I can't seem to get the first image associated with a page

[Muut]

Hi guys,

I have a template, where I would like to make a function that shows the first image associated with a page if it exists. I have looked into the documentation and figured out that I can use this:

{% set first_image = page.media.images|first %} to get that image.

However, it doesn’t work. I doesn’t show anything. So wondered if there wasn’t any image associated, so I ran this loop:

{% for image in page.media.images %}
{{ image.html }}
{% endfor %}

Which showed both of the images associated with the page.

Do any of you have an idea, why the first function I tried doesn’t work, as I should according to the documentation? And what suggestions do you have to make it work instead?

Thanks in advance.
Jonas

[Muut]

|first should work. You can use {{dump(first_image)}} to see what value is associated with it https://learn.getgrav.org/advanced/debugging#dump-command-for-twig

[Muut]

Thanks for the response… I got this dump, but I don’t understand it very well, other than it actually does find the three images associated with the page.

Any suggestions?

array:3 [▼
"badge.png" => ImageMedium {#193 ▼
#thumbnailTypes: array:3 [▼
0 => “page"
1 => “media"
2 => “default”
]
#image: null
#format: “guess”
#quality: 85
#default_quality: 85
#debug_watermarked: false
#sizes: “100vw”
#mode: “source”
#thumbnail: null
#thumbnailType: null
#alternatives: []
#attributes: []
#styleAttributes: []
#gettersVariable: “items”
#items: array:15 []
#blueprints: null
#storage: null
#nestedSeparator: “.”
#parsedown: Parsedown {#200 ▼
#breaksEnabled: false
#markupEscaped: false
#urlsLinked: false
#BlockTypes: array:24 []
#unmarkedBlockTypes: array:1 []
#InlineTypes: array:12 []
#inlineMarkerList: “!”*&[:<>~" #DefinitionData: null #specialCharacters: array:17 [▶] #StrongRegex: array:2 [▶] #EmRegex: array:2 [▶] #regexHtmlAttribute: "[a-zA-Z_:][\w:.-]*(?:\s*=\s*(?:[^"'=<>\s]+|”[^”]"|’[^’]’))?"
#voidElements: array:13 []
#textLevelElements: array:40 []
#page: null
#special_chars: array:2 []
#twig_link_regex: “/\s*(.?)\s(?:\2|})}))/”
+completable_blocks: []
+continuable_blocks: []
}
}
“logo_big.png” => ImageMedium {#194 ▼
#thumbnailTypes: array:3 []
#image: null
#format: “guess”
#quality: 85
#default_quality: 85
#debug_watermarked: false
#sizes: “100vw”
#mode: “source”
#thumbnail: null
#thumbnailType: null
#alternatives: []
#attributes: []
#styleAttributes: []
#gettersVariable: “items”
#items: array:15 []
#blueprints: null
#storage: null
#nestedSeparator: “.”
#parsedown: Parsedown {#201 ▼
#breaksEnabled: false
#markupEscaped: false
#urlsLinked: false
#BlockTypes: array:24 []
#unmarkedBlockTypes: array:1 []
#InlineTypes: array:12 []
#inlineMarkerList: “!”*&[:<>~" #DefinitionData: null #specialCharacters: array:17 [▶] #StrongRegex: array:2 [▶] #EmRegex: array:2 [▶] #regexHtmlAttribute: "[a-zA-Z_:][\w:.-]*(?:\s*=\s*(?:[^"'=<>\s]+|"[^"]"|’[^’]’))?"
#voidElements: array:13 []
#textLevelElements: array:40 []
#page: null
#special_chars: array:2 []
#twig_link_regex: “/\s*(.?)\s(?:\2|})}))/”
+completable_blocks: []
+continuable_blocks: []
}
}
“test.jpg” => ImageMedium {#196 ▼
#thumbnailTypes: array:3 []
#image: null
#format: “guess”
#quality: 85
#default_quality: 85
#debug_watermarked: false
#sizes: “100vw”
#mode: “source”
#thumbnail: null
#thumbnailType: null
#alternatives: []
#attributes: []
#styleAttributes: []
#gettersVariable: “items”
#items: array:15 []
#blueprints: null
#storage: null
#nestedSeparator: “.”
#parsedown: Parsedown {#202 ▼
#breaksEnabled: false
#markupEscaped: false
#urlsLinked: false
#BlockTypes: array:24 []
#unmarkedBlockTypes: array:1 []
#InlineTypes: array:12 []
#inlineMarkerList: “!”*&[:<>~" #DefinitionData: null #specialCharacters: array:17 [▶] #StrongRegex: array:2 [▶] #EmRegex: array:2 [▶] #regexHtmlAttribute: "[a-zA-Z_:][\w:.-]*(?:\s*=\s*(?:[^"'=<>\s]+|"[^"]"|’[^’]’))?"
#voidElements: array:13 []
#textLevelElements: array:40 []
#page: null
#special_chars: array:2 []
#twig_link_regex: “/\s*(.?)\s(?:\2|})}))/”
+completable_blocks: []
+continuable_blocks: []
}
}
]