Is it possible to pull only images from collections?

Archive
1

Hello,

Just curious if using the page collections feature, can you set it to pull only certain content from the collections like an image for example? Maybe something like below.

{% for p in page.collection %}
{% endfor %}

Thanks

2

it is possible… if you have a collection of images, you could loop over that collection and then for each image, you could retrieve a specific image from that page…maybe the first one you find with page.media.images|first or a specific file if every page has an image of a certain name: page.media.images['somefile.png']

3

rhukster,

In the Grav Documentation for Page Collections it has the following example which will pull the title and content it seems:

{% for p in page.collection %}

{{ p.title }}

{{ p.summary }} {% endfor %}

I was just wondering if there was a way to just pull an image from each page and/or any type of content. With your example page.media.images|first will that go out to each page in the collection and pull the first image it finds?

Thanks again for your assistance.

4

One thing I still don’t seem to be able to get is the ability to pull all images from a child page media area.

If I have my main page called home and a child page called images. In the child page in the media section if I added 3 images, would it be possible to then pull all three of those images into the home page?

May something like the following where each image would be added inside a list tag.

    {% for child in collection %} {% set image = child.media.images %}
    • {% endfor %}

Thanks

5

If you want all images from a specific page you can use page.find(some/page).

For example:

    {# get the page media #}
    {% set p = page.find('/home/images') %}

    {# get all the images from the page media #}
    {% set images = p.media.images %}

    <ul>
      {% for image in images %}
        <li>
          {{ image.html }}
        </li>
      {% endfor %}
    </ul>

With Image Actions you can do a lot more things.
For example resize the image and set title, alt and class attributes

<ul>
      {% for image in images %}
        <li>
          {{ image.resize(400, 200).html('title', 'alt','class') }}
        </li>
      {% endfor %}
    </ul>

Hope this helps.

1 Like
6

wsanter,

Thank you very much. Was indeed helpful. Ideally I am trying to set this up to use a child page media area to populate the parent page bootstrap carousel. This is just what I needed to get me going.

7

Can something similar be done with either the page object or uri object to pull only specific elements from a page?

for example if under home there was a child page called contacts with some text and the following divs. Could you pull in any of the elements by class like all the p.name class content?

Thomas

class="address">123 somewhere

<.div>

Steve

class="address">123 somewhere else

<.div>

So on the page pulling the data you would have

Thomas

Steve

Just curious if something like this is possible or if we need to use php or javascript to do it.

Thank You

8

It would be easier to manage any information you might want to pull later on by adding it with custom fields in Grav.
Thus, if your div looks like this, it will be very easy to fetch the data from another page with page.find(’/contact’).header.contact1name

<div class=“contact”>
<p class=“name”>{{ page.header.contact1name }}</p>
<p> class=“address”>{{ page.header.contact1address }}</p>
<.div>
9

paulmassendari,

Thank you, that makes good sense. I am still trying to wrap my head around how to get things done most effectively and have been thinking more on all the code snippets out there already that we can easily add to our sites. What I am hoping to figure out is the best way to allow for a client to work with those snippets without actually having to change or write code.