CODEWITHSUNDEEP
twiggrav
Jan Galinski
Jan Galinski

Reputation: 11993

Grav: loop over /user/pages/images in twig template

I want to use images for a background slide (vegas) without adding them to a yaml file explicitly.

I have

/user/pages
   /01.start
   /images/
      bg1.png
      bg2.png

and need an output like this

<script type="text/javascript">
   $("body").vegas({
     timer: false,
     slides: [
        { src: "/user/images/slide/bg1.png" },
        { src: "/user/images/slide/bg2.png" }
    ]
  });
</script>

I can get page.media.images, but I can't figure out how to loop over /users/pages/images and how to deal with "{{}}" outputs inside the javascript statement.

Upvotes: 1

Views: 2062

Answers (1)

Hung Tran
Hung Tran

Reputation: 815

If /user/pages/01.start/ is a page (contains a Markdown file) and images is just a folder inside /user/pages/01.start (there is no Markdown file in background folder). You use for to loop the images, Grav automatically detects the images in subfolder of the page.

To not print the last comma, you compare loop.index with the quantity of images you have (use length filter for the array of images).

If you want the direct URLs of your images you use your_image_variable.url, if you to get the cached images' URLs, use your_image_variable.cache.url

    $("body").vegas({
        timer: false,
        slides: [
            {% for image in page.media.images %}
            { src: "{{ image.cache.url }}" }{% if loop.index < page.media.images|length %},{% endif %}

            {% endfor %}
     ]
   });

If you want to get the images from a specific page, for example /user/pages/images/background you need to put a Markdown file in this folder to let Grav consider this folder is a page and in your theme you use:

{% for image in pages.find('/images/background').media.images %}
    {# Your code here #}
{% endfor %}

You can set background page unpublished to forbid direct access to it.

Upvotes: 3

Related Questions