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)
  • Moderator Paweł Knapek

    (@adpawl)

    zerknij sobie na wtyczki WP Fluid Images, Hammy, New Nine Adaptative Images

    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)
  • The topic ‘Responsywne miniatury’ is closed to new replies.