Image Replace

One to remember, even if it is a complex one..Show for every breakpoint an other image.. Ideal for showing big pictures en change them for smaller devices.

PC.

Drupal8_002856.png

Tablet (a piece has been cropped)

Drupal8_002857.png

Smartphone

Drupal8_002858.png

First make 2 imagestyles (default ones, not responsive) I call them replace big and small. The only effect you need to apply is 'replace image'. Of course one can add more effects...

Drupal8_002843.png
It looks like that now.


Drupal8_002845.png

Now you need to add a new responsive image style.


Drupal8_002846.png

You need to choose the breakpoints group. Every responsive theme has these breakpoints built in..I take those of the theme i'm working with, but you can take breakpoint of every active theme! Mind the pixels for the breakpoints. Choose the styles according the size of the screen.

Let's take a look at the Bartik breakpoints.. I repeat you don't need to choose the breakpoints of you default theme.. 

Drupal8_002855.png

I took those.. Mind the differences..
Drupal8_002847.png

I make the smartphone display the default image display. When the screen is bigger i replace the images. You can do otherwise..

Drupal8_002849.png

Now we need to make 3 image fields in the content type.


Drupal8_002850.png

Small and big will be set invisible in the display mode. The image field needs the replace settings.


Drupal8_002851.png

For the other styles you do nothing

Drupal8_002852.png

The display mode..


Drupal8_002853.png

Don't forget to set the response image style you made.


Drupal8_002854.png