Adding images

maakbow

I'm creating a site for (hopefully) someone else to edit. Although markdown is simple and universal in the web world, it's a mystery to most people, so I am really glad the markdown editor has a GUI for common elements (even if headings are currently missing).

However inserting images via markdown where you have to go find the url and get the path correct is really something the average person will fail at. Maybe this will be fixed in 1.5? 😀 I see those animations on automad twitter 😀 .
Will navigating to an image file and selecting it (visually) ever be part of content entry in AUTOMAD?

Also I CAN NOT enter just an image into the markdown editor without other elements. Is this just me being dumb or is there a solution to this? So a common layout, 50/50 image one side heading and some text the other. How do we achieve this?
Sure it would be possible to target a single image inside a content <div> and style the text around it but with unknown <p> structure due to how a user enters content, this would be an unreliable solution.

mad

maakbow Yes, image selection is one of the new features that will be shipped with the next release! 🤓

maakbow

And thanks so much for all your work on this mad . I have led teams building web software, so I know how much work it is.

mad

maakbow 😊 Thanks a lot!

maakbow

Just one other thing it would be nice to have a more elegant solution to is responsive images.

With this code I cannot declare the crop sizes or add alt tags.
<picture> <source srcset="/automad-master@{ imageUrlDesktop }" media="(min-width: 700px)" /> <img src="@{ imageUrlMobile }" /> </picture>
Maybe I've just done this badly. Maybe version 1.5 is coming soon.?

mad

maakbow Take a look at the with statement. It let’s you resize images and gives you some other options.

maakbow

Sorry I don't know how to make 'with' work using <picture><source srcset="...>

I need to swap images in a hero image so landscape on desktop and portrait on mobile.. its possible i could crop a large square image to either landscape or portrait using the same image, but less than optimal..

Also my code above does not work on live. The srcset image path which starts with "automad-master" locally is not there on live. tried starting with../ but cannot find the image path.. Only the mobile image works

mad

maakbow Hi, you can use for every image size you need a separate with statement. You can take a look at the hero snippet of the Bulma package. I think that's what you're looking for.

maakbow

Thanks heaps for that..
I found the bulma hero tried so many things.

This is where I got to but it only sees the path to the portrait image correctly

<picture>
	<@ with @{ :file | def('*.jpg, *.jpeg, *.png, *.gif')}  { width: 1600, height: 960, crop: true} @>
	<@ set { ":imageLandscape": @{ :fileResized } } @>
	<@ end @>
					
	<@ with @{ :file | def('*.jpg, *.jpeg, *.png, *.gif')}  { width: 1020, height: 1020, crop: true} @>
	<@ set { ":imageSquare": @{ :fileResized } } @>
	<@ end @>
					
	<@ with @{ :file | def('*.jpg, *.jpeg, *.png, *.gif')}  { width: 600, height: 900, crop: true} @>
	<@ set { ":imagePortrait": @{ :fileResized } } @>
					
	<source srcset="@{ :imageLandscape }" media="(min-width:1020px)">
	<source srcset="@{ :imageSquare }" media="(min-width:800px)">
	<source srcset="@{ :imagePortrait }" media="(min-width:600px)">

	<img src="@{ :fileResized }" alt="@{ :basename }">
	<@ end @>
</picture>

Im not sure why this shouldnt work as it works with simple img, just doesnt seem to get the correct path for srcset

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

Cheers

mad

maakbow Hi, as far as I can see quickly, you’re using the :file runtime variable. Is there somewhere a wrapping foreach statement? Note the you also don’t need the def function in the pipe since the runtime variable is never undefined.