User Editable Responsive Images

maakbow

I'm trying to create a hero image that swaps between separate images based on screen aspect ratio or screen size.
I require the content editor to upload 3 separate images.
A Landscape image, a Square image and a Portrait image
There are reasons why separate images are better in my situation so <srcset> alone cant work.

I am fine with the html/css to get this working static, but cant seem to integrate automad for the user to manage the images.

I am open to how the images are chosen by the content editor but currently there are three template variables and images assigned to them for each page.

I have tried to use the <picture> tag with <source scrcset ... but cannot get this working with Automad. Has anyone got this working

My last resort was with background images.
This below works for a single image but media queries cant be used inline.
<div class="hero" style="background-image: url(@{ imageLandscape });">

If I use a <style> tag like this below the full url to the image does not get inserted, just the image file name?

<div class="hero">

<style>
	.hero { background-image: url(@{ imagePortrait });}
	
	@media (min-width:700px)	{
	    .hero {background-image: url(@{ imageSquare });}
	    }
	    
	@media (min-width:1140px)	{
	        .hero {background-image: url(@{ imageLandscape });}
	}
</style>
</div>

Any solutions will be gratefully received.

I would think this is a fairly common requirement.

mad

maakbow Hi there, you can take a look at the Bulma theme. That hero resizes images automatically to multiple sizes to be used on different devices.

maakbow

mad Thanks for the answer.
I'm not sure I follow the automad code completely but as this uses <srcset> without <picture><source> it appears the bulma hero create multiple images from a single image?

I'm not so concerned with the best image and file size for the device. That's a worthy goal but it's less than the ideal situation for me.

I'm aware a square image 'can' be cropped to portrait and to landscape but a better visual outcome requires different source images for landscape, portrait etc so the content creator can create an image that suits the different aspect ratio/device better.

Any way back to bulma, should I be able to isolate and use this piece of the bulma code (below) by itself ? (Apart any css of course) I've removed classes and the "active as I don't require a carousel.

<@ foreach in filelist @>
	<div class="myClassHere">
		<@ with @{ :file } { width: 1200 } @>
			<@ set { ":small": @{ :fileResized } } @>
		<@ end @>
		<@ with @{ :file } { width: 1800 } @>
			<@ set { ":medium": @{ :fileResized } } @>
		<@ end @>
		<@ with @{ :file } { width: 2400 } @>
			<@ set { ":large": @{ :fileResized } } @>
		<@ end @>
		<img
		class="myClassHere"
		src="@{ :medium }"
		srcset="@{ :small } 500w,
			@{ :medium } 1600w,
			@{ :large } 2400w"
		sizes="(-webkit-min-device-pixel-ratio: 2) 50vw,
			(min-resolution: 192dpi) 50vw,
			(min-resolution: 2dppx) 50vw,
			(-webkit-min-device-pixel-ratio: 3) 33.33vw,
			(min-resolution: 288dpi) 33.33vw,
			(min-resolution: 3dppx) 33.33vw"
			alt="@{ :basename }"
		/>
	</div>
<@ end @>

I thought maybe if I provided the page with variables for 'small', 'medium' and 'large' and select images in the CMS for these variables it could work?...but I cant get it to work. It displays all the images at once.

.....So I tried something as simple as this below to see if it would work. If I inspect the images in the browser, they seem to be correctly pathed but they wont display in page

<picture>
<source	media="(max-width:600px)"	srcset="@ { imagePortrait }" >
<source	media="(max-width:900px)"	srcset="@ { imageSquare }" >
<source	media="(min-width:900px)"	srcset="@ { imageLandscape }" >
<img src="@ { imagePortrait }" alt="">
</picture>

So then I added the full image path. See below. Obviously this wont work on an actual template and on other pages but it works here locally and across devices ???

<picture>
    <source	media="(max-width:600px)"	srcset="http://192.168.1.68:8006/automad-master/pages/02.products/01.homeware-collections/black-and-white/@{imagePortrait }" >
    <source	media="(max-width:900px)"	srcset="http://192.168.1.68:8006/automad-master/pages/02.products/01.homeware-collections/black-and-white/@{imageSquare }" >
    <source	media="(min-width:900px)"	srcset="http://192.168.1.68:8006/automad-master/pages/02.products/01.homeware-collections/black-and-white/@{imageLandscape }" >
    <img src="http://192.168.1.68:8006/automad-master/pages/02.products/01.homeware-collections/black-and-white/@{imagePortrait }" alt="">
</picture>

mad

maakbow Hi, I think your simplified example should work for a single image. As you say the URLs should also be resolved correctly. The srcset attribute is supported by the resolver. Can you see the full correct URL to one of the images when inspecting the page? Or what is the result there? Does it report a broken link?

I guess it is only like that in your example, but make sure you have no whitespace between @ and {.

Maybe you can also try to use an <img> tag as used in the Bulma theme.

maakbow

mad Thanks for confirming this "should" work
Two things fixed this:

User error. I was inserting just the image name into the dashboard variable because i have found if the image is loaded to the same page, that's all it needs. But this still did not fix my problem by itself.
Testing on live server. With the full image url coppied into the variable AND on the live server this works YAY. Not sure why on my local it doesn't work. I have tried on XAMP local server and Ghostlab local server.

So looks like more ftp and slower testing to live server is best 😆

It would be awesome if the blocks image selector had some solution for multiple responsive images, then i could create a "hero block" of my own. How likely is it that we will be able to create our own blocks in the future? 😀

It appears the path locally is not including the first part of the path. See below how the <img> has the correct full path and but this doesn't display because the images are replace with those in the <source> tags. If you inspect the <img> path and open in new tab, it opens the image. The paths within <souce> are missing the "/automad-master/" and if I inspect and open the path I get a 404

<picture>
    <source media="(max-width:600px)" srcset="/pages/02.products/01.homeware-collections/black-and-white/herotest-portrait.jpg">
    <source media="(max-width:900px)" srcset="/pages/02.products/01.homeware-collections/black-and-white/herotest-square.jpg">
    <source media="(min-width:900px)" srcset="/pages/02.products/01.homeware-collections/black-and-white/herotest-portrait.jpg">
    <img src="/automad-master/pages/02.products/01.homeware-collections/black-and-white/herotest-portrait.jpg" alt="">
</picture>