1

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.

Jan Galinski
  • 11,768
  • 8
  • 54
  • 77

1 Answers1

3

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.

Hung Tran
  • 790
  • 2
  • 8
  • 24
  • Thanks for the valuable insight! But I do not want to loop over page.media.images but /user/pages/images/background .... How do I address those? – Jan Galinski Jun 30 '17 at 11:57
  • This works, thanks. But: when I change (add/remove) images in the background folder, they are only applied when I clean the cache ... – Jan Galinski Jul 02 '17 at 07:16
  • @JanGalinski That's caused by Grav's cache and it is not related to your loop issue. Depending on how you configure cache settings, you may see the new content after clearing the cache and doing a hard-refresh on your browser. – Hung Tran Jul 03 '17 at 08:07
  • Yes, I understand ... not a problem, won't change that often. You helped me a lot to get it up and running. – Jan Galinski Jul 03 '17 at 09:56