Wsparcie » Motywy » Responsywne miniatury

  • Robię portal na wordpressie. Layout jest responsywny i strony na których są różne artykuły, są wypełnione „cegiełkami” (nazwałem to brickbox) z obrazkiem w tle i podpisami. Responsywność polega na 4 layoutach dopasowanych do konkretnych szerokości. Problem w tym, że przy np. rozdzielczości 960 brickboxów w kolumnie są 2 i mają po 470 px szerokości a przy 1280 są już 4 po 310 px. Dodam, że portal musi być zgodny ze standardem WCAG 2.0 (dostępne strony), co w tym przypadku oznacza, że nie mogę użyć drugiej z wymienionych niżej opcji; muszę zawrzeć obrazek w tagu <IMG />.
    Szukam sposobu, by można było wstawić w tło brickboxa obrazek ilustrujący dany artykuł. Mam jak narazie trzy opcje ale każda z nich ma spore wady:

    1) TimThumb – to phpowy skrypt generujący miniaturki „w locie”. Wszystko byłoby wspaniale, ale niestety trzeba zdefiniować wielkości obrazka w php, więc dałoby się to zrobić tylko jednorazowo, przy ładowaniu każdej podstrony (po przeskalowaniu okna, obrazki byłby złego rozmiaru)

    2) cssowy background-size:cover – to jest super, ale po pierwsze nie obsługują tego starsze przeglądarki i nie ma zasadniczo dobrego polyfilla, po drugie obrazki traciłyby na jakości będąc rozciągane, po trzecie nie byłoby wtedy tagu img, więc i tagu alt, który jest obligatoryjny przy obrazkach na stronie zgodnej z WCAG 2.0

    3) klasyczne wordpressowe podejście – defniujemy kilka rozmiarów i wordpress przy uploadowaniu generuje wszystkie zadane mu rozmiary. Wady są dwie: na serwerze przechowywana jest ogromna ilość nie zawsze potrzebnych obrazków oraz – nie wiem za bardzo w jaki sposób sprawić, żeby tag IMG zaczytywał inny rozmiar obrazka przy resizowaniu. Mam JSowy pomysł – każdy obrazek wgrany na serwer miałby sufix; np. nazwa_obrazka-col3o12.jpg (gdzie col3o12 to klasa która mówi, że brickbox zajmuje 3 z 12 kolumn). Przy resizie, JS przelatywałby przez wszystkie obrazki zmieniając nazwę na odpowienią, co powodowałoby przeładowanie obrazka. Ale jak powszechnie wiadomo, przelatywanie przez tagi JSem nie jest za bardzo wskazane.

    Proszę o pomoc!

Viewing 2 replies - 1 through 2 (of 2 total)
  • zerknij sobie na wtyczki WP Fluid Images, Hammy, New Nine Adaptative Images

    Thread Starter entio

    (@entio)

    Dzięki dzięki, coś już jest. Przyjrzę się temu dokładniej jak już będę brał się do rzeczy. Na razie szkielet html/css.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Temat ‘Responsywne miniatury’ jest zamknięty na nowe odpowiedzi.