Grav loop: can't use .gif files as title-images. Only jpg

Archive
1

Dear coders,

i am working on a portfolio site, which has both .gif and .jpg-files as title images to show on the portfolio overview. As you can see, my loop does not provide a possibility to use .gif-files, only .jpgs.
Is there a good workaround to fix this?

{% for child in collection %}
<div class="col-md-4 projekt">
<a href="{{ child.url }}" data-title="{{ child.title }}">

<img src="{{ child.media['title.jpg'].url }}">

</a>
</div>
{% endfor %}

Thank you guys!!! btw: Grav is amazing!

Tim

2

Define images inside your loop and then just call the image.url no matter what filetype it is. Here’s a simplified example from one of my template files which always shows the first image of a portfolio page on an overview page:

{% for child in collection %}
<figure>
   {% set image = child.media.images|first %}
   <img src="{{ image.quality(70).url }}" />
   <figcaption>{{ child.title }}</figcaption>
</figure>

Hope this helps…

3

Hi sebbb, thank you very much for your replay! Well, your code works anyway, but bizzarely it still ignores my title.gif. :frowning: Hmm…
Here’s an idea:
Is there a way to write
<img src="{{ child.media['title.jpg'].url }}">
with a neutral datatype?

Or another one:

Is there a way to ask, if there’s a title.gif or a title.jpg for each project?

4

As I wrote before: just use image.url without ['title.jpg'] to deliver images independent of their datatype. i just tried myself but it seems to ignore GIF files. It works fine with PNG and JPEG. I’ll have another look at the docs but I’m afraid gifs wont work. :frowning:

5

Ok looks like I found something. If you have a look at system/config/media.yaml you can see that gif files don’t have the filetype image. They are listed as type: animated. That’s why they aren’t displayed when looping through images.

You could change the filetype of gif to type: imagein your own user/config/media.yaml to get it working, but I’m not quite sure if that’s the right way to go.

6

I’m also trying to implement this on a page where I need to randomize the image shown from a folder containing both jpegs and animated gifs. I am using

page.find('/imgfolder').media.images|randomize|first

and while Jpegs work flawlessly, gifs are ignored. I tried changing the filetype in

system/config/media.yaml

as sebbb suggested. This allows gifs to show up but they are static. It seems to me there’s not a way to include different kind of media in the same loop.

7

Use [...].media.all :slight_smile:

8

That did it! Thank you very much!