Responsive images in the image block

The CMS Questions
1

Hi all

I’ve been playing around with responsive images lately and I’ve managed to get it working in scenarios where the image takes up a certain amount of viewport width, for example when the image takes up 25% or 100% of the width.

Now I want to update the image block to make the images in my layout template pages responsive too. The only thing is, in those pages I have images which when on min-wdtih:992px take up 33%, 50% and 100% of the viewport. So the pages have multiple images displayed in various sizes, so all three scenarios on one page.

Considering that the same image block is used for displaying images in all three scenarios, how would I go about achieving this? Is it even possible? Any tips would be appreciated.

2

You would have to pass the layout information (i.e. number of columns) down to the image block.

3

Hello, I solved the problem like this to pass the layout and column informations to the snippet like texnixe says :

foreach($page->layout()->toLayouts() as $layout){
	foreach ($layout->columns() as $column){
		foreach($column->blocks() as $block){
			snippet('blocks/' . $block->type(), [
				'block' => $block,
				'column' => $column,
				'layout' => $layout
			]);
		}
	}
}

You can then make any necessary calculation of images sizes in the images block snippet.

4

Thanks Sonja and sly31.

@sly31 would that code be going into the layout snippet file or image block file?

It will probably take me weeks to get my head around this :smiley:

5

Into your template where you render the blocks field.

1 Like