Zona listarii articolelor (content area) pentru majoritatea temelor de WordPress este data de div-urile “content” si/sau “contentleft” (ex: <div id=”contentleft”>) , asta in functie de structura temei. Aceste div-uri din CSS contin linii specifice care dicteaza practic structura de design a website-ului.
MANIPULAREA IMAGINILOR IN CSS – PARAMETRII “WIDTH SI HEIGHT”
SCENARIU: Daca am folosit pentru blog o tema care avea latimea pentru post area de 600px sa ziceam, iar imaginile insetare de noi in articole au fost de dimensiuni care au ajuns in latime pana la 550px, atunci va interveni o problema cand o sa schimbam design-ul blogului cu o tema grafica care are latimea “content area” mai mica de 550px. In acest scenariu, imaginile din articole care sunt mai mari decat latimea contentului vor tinde sa se duca peste sidebar sau sa iasa in afara ariei de listare. Ar arata urat si ar putea sa afecteze buna functionare a website-ului.
Pentru acest scenariu sunt doua rezolvari. O rezolvare ar fi sa editam articolele si sa schimbam dimensiunile imaginilor. Ar dura mult si ar fi munca anevoioasa, insa ar avea si un mare avantaj fata de metoda a doua (o sa vedeti la final).
A 2a metoda ar fi sa conditionam din CSS latimea maxima la care sa ajunga imaginile care sunt cuprinse de actiunea div-ului “contentleft“. Pentru asta va trebui sa adaugam in style.css urmatoarele linii.
* max-height este optionala daca doriti sa ajustati doar latimea.
Comparativ cu prima metoda, aceasta este mai rapida, insa imaginile vor fi listate distorsionat. Practic o imagine cu latimea de max-width:600px si inaltimea de max-height:400px, va fi listata la dimesiunile 450px cu 400px. Este o metoda indicata numai pentru blog-urile care au foarte multe articole cu imagini si unde editarea lor ar dura mult timp. Un avantaj ar fi ca imaginile micsorate din CSS sa contina un link catre imaginea cu dimensiunile originale.
