Find first image for every post

ctuxboy

Hello,
Maybe stupid question. I have a lot of posts and some posts has several images.
When go the a post-page, i want find the first image from a post for a Twitter Tag, looking in the docs, and the tutorial, is it always needed using this snippet , finding the first image?

Is there a shorter way, like this (this doesn't work, but maybe doing something wrong):

<meta name="twitter:image" content="@{ :img | findFirstImage }">

mad

ctuxboy Hi, you have to use that function with rendered HTML content as described in the docs:

@{ text | markdown | findFirstImage }

Or in case you use blocks:

@{ +main | findFirstImage }

ctuxboy

mad i do it this way:

<meta name="twitter:image" content="<@ filelist { glob: @{ files | def('*-1.jpg') } } @><@ foreach in filelist @>@{ :file }<@ end @>">

All the images in a post has the same pattern:

city-street-1.jpg
city-street-2.jpg

and hoped there was a more simple solution without a foreach-loop.
I have a lot of variables in a post, so try reduce it, that's the reason i don't want adding an extra variable with a link to an image.

mad

ctuxboy Sure there is a much shorter way. Look at my post above. That will return the first found image in your content variable. Just use that one for your meta tags. No need for a loop. And by the way there is an extension to create such meta tags automatically.

ctuxboy

mad used my option 😊
I don't want an extra variable, what i said in my post above, but i develop the code more readable, using the 'snippet' statement, and can used on several places in my code, works like a sharm 🤩:

<@ snippet firstImage @>
  <@~ filelist { glob: @{ files | def('*-1.jpg') } } ~@>
  <@~ if @{ :filelistCount } = 0 ~@>
    /shared/no-picture.png
  <@~ else ~@>
    <@ foreach in filelist @>@{ :file }<@ end @>
  <@~ end ~@>
<@ end @>

<meta name="twitter:image" content="<@ firstImage @>">

I know there is a nice Extension about Meta-tags, will give it a try!

mad

ctuxboy Hi, you can skip the loop by using a with statement instead:

<@ snippet firstImage @> 
    <@~ with '*-1.jpg' @>@{ :file }<@ end ~@> 
<@ end @>

ctuxboy

mad YESYESYES,
That is what i want 🙏
Thanks a lot for the help!

Regards,
Christophe

yoomgui

Hello,
Is it possible to resize/crop the snippet image?
I tried but without success...

Thanks,
Guillaume

mad

yoomgui Hi, can you elaborate? Where did you try to crop?

yoomgui

Hi,
Thanks for the quick answer.
It's true that I wasn't very clear ;-)
I managed to do the resize/crop.

<@ snippet firstImage @> <@~ with '*.jpg' { width: 800, height: 800, crop: true } @>@{ :fileResized }<@ end ~@> <@ end @>