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!
- Temat ‘Responsywne miniatury’ jest zamknięty na nowe odpowiedzi.