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.

Drupal8_002856.png

Tablet (er is een stuk van de afbeelding weggesneden)

Drupal8_002857.png

Smartphone

Drupal8_002858.png

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...

Drupal8_002843.png
Dit ziet er nu zo uit.


Drupal8_002845.png

Nu moet je ook een nieuwe responsive image style aanmaken.
Drupal8_002846.png

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!

Drupal8_002855.png

Merk de verschillen op met die van dit thema.
Drupal8_002847.png

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.

Drupal8_002849.png

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

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


Drupal8_002851.png

Bij de andere stijlen moet je niets zetten.


Drupal8_002852.png

De weergave wordt dus zo.


Drupal8_002853.png

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


Drupal8_002854.png