Grav CMS - image questions/problems in partial template

Question

New to Grav and am learning as I go, but have found little to no documentation on things I am trying to find out about :(

I am putting together a blog as a test and modifying the existing antimatter theme. In /partials/blog_item.html.twig there are the following lines for images :

{% set header_image = page.header.header_image|defined(true) %}
{% set header_image_width  = page.header.header_image_width|defined(900) %}
{% set header_image_height = page.header.header_image_height|defined(200) %}
{% set header_image_file = page.header.header_image_file %}

{% if header_image %}
    {% if header_image_file %}
        {% set header_image_media = page.media.images[header_image_file] %}
    {% else %}
        {% set header_image_media = page.media.images|first %}
    {% endif %}
    {{ header_image_media.cropZoom(header_image_width, header_image_height).html }}
{% endif %}

It takes the first image used in a post and makes a 900x200 version of it as a header. Here is what I can't figure out :

1 - How can I add a class to this image when it is output? I want to add an img-responsive class, but see no way to do this.

2 - What if I don't want a header image at all for the post, but the post will have images in it? Okay, so I remove the {% set header_image_media = page.media.images|first %} part, but with that question is how to I define what image to use as page.media.images[header_image_file] then if I want to use one?

3 - How can I get the full url of this header image for outputting on the page? I am not talking about the full tag, just the string of its full url?

Maybe these are easy, but I can't find anything about it. I am using the admin panel plugin so when I create a post/item so there is the Frontmatter, actual content/post, and images uploaded (with only insert and delete options).

score 1 · Answer 1 · answered Jul 24 '17 at 18:19

I know it's an old post, but I thought it could be nice to have more Q/A about Grav on stackoverflow.

1 - How can I add a class to this image when it is output? I want to add an img-responsive class, but see no way to do this.

You need to pass the class as the third parameter of .html() like this:

{{ header_image_media.cropZoom(header_image_width, header_image_height).html('TITLE', 'ALT', 'CLASS') }}

2 - What if I don't want a header image at all for the post, but the post will have images in it? Okay, so I remove the {% set header_image_media = page.media.images|first %} part, but with that question is how to I define what image to use as page.media.images[header_image_file] then if I want to use one?

I wouldn't do it this way. I would add a variable for each article page.header.has header and then, I would adjust the twig template accordingly.

3 - How can I get the full url of this header image for outputting on the page? I am not talking about the full tag, just the string of its full url?

You can use the filter |absolute

{{ header_image_media.cropZoom(header_image_width, header_image_height).html('TITLE', 'ALT', 'CLASS')|absolute }}

Grav CMS - image questions/problems in partial template

1 Answers1