Image Replace

Niettegenstaande zijn complexiteit is dit er toch eentje om te onthouden.. Je kunt per breekpunt (schermbreedte) een andere afbeelding tonen. Ideaal om grote foto's door telkens kleinere te vervangen al naar gelang je tablet of smartphone gebruikt.

PC.

Tablet (er is een stuk van de afbeelding weggesneden)

Smartphone

Je moet eerst 2 nieuwe afbeeldingsstijlen (gewone stijlen, geen responsive) aanmaken. Ik noem ze image replace big en small. Het enige dat je moet doen is de nieuwe 'Replace image' stijl gebruiken. Je kunt natuurlijk nog verder effecten toepassen...

Dit ziet er nu zo uit.

Nu moet je ook een nieuwe responsive image style aanmaken.

Je doet dit door een breakpoint group te selecteren. Elk responsive thema heeft dit wel ingebouwd. Ik neem die van het thema waar ik in werk. Maar je kunt van elk actief thema de breekpunten nemen. Let op de pixels waarop er gebroken wordt. Bij elk punt ga je zeggen welke image style je gaat gebruiken.

Hier de overgangen bij Bartik. Je moet dus het thema niet gebruiken om toch van de overgangen gebruik te kunnen maken!

Merk de verschillen op met die van dit thema.

Het komt er op neer dat ik een afbeelding ga gebruiken op ware grootte voor de smartphones en dat ik deze telkens wijzig als het scherm groter wordt. Je kunt dit natuurlijk ook omdraaien.

Nu ga je in het inhoudstype 3 afbeeldingsvelden aanmaken. Image is bij mij het origineel (=kleinst). Small is voor tablet en big voor PC.

Small en big zullen straks onzichtbaar worden gezet in de weergave. Bij de image instellingen zie je nu onderaan de replace mogelijkheid.

Bij de andere stijlen moet je niets zetten.

De weergave wordt dus zo.

Vergeet niet je stijl te kiezen bij de weergave voor je image veld.