A way to access the thumbnail of an entry in Twig

[BramMortier]

I love the thumbnail feature in Craft. It gives authors so much context when editing entries. But a nice addition would be to give us access to that selected thumbnail in twig: entry.thumb. This would come in very handy when trying to create a search results page for a website that searches all entries. Otherwise we have to manualy get the asset field for each entry type conditionally.

It's already used in the CP with a custom query i suppose when displaying the all entries page? Or am i missing something?

Thanks for considering!

[brandonkelly]

Element thumbnail support is very CP-specific right now – elements have a getThumbHtml() method which is only concerned with returning HTML for the control panel. There’s no getThumbAsset() etc., as thumbnails aren’t necessarily based on an asset (e.g. user photos).

[BramMortier]

I see, but thumbnails aren’t necessarily based on an asset? As far as I know only asset fields can be set as the thumbnail for an entry type. The getThumbHtml method returns the following

<div class="thumb" data-sizes="calc(500rem/16)" 
data-srcset="https://craft-author-toolbar.ddev.site/uploads/_357x500_crop_center-center_none/pexels-mavimiro-30993356.jpg?v=1757080403 500w, https://craft-author-toolbar.ddev.site/uploads/_714x1000_crop_center-center_none/pexels-mavimiro-30993356.jpg?v=1757080403 1000w"></div>

maybe you can expose at least a getThumbUrl method that also accepts a size attribute like the getThumbHtml method and returns just the url so it can be used outside the admin panel?

[BramMortier]

I think i've found a partial workaround but i'm not completely there yet. We can get the thumbnailField of an entry type with result.fieldLayout.getThumbField but the original handle is not a public property. Any other way I could access this?

{% set allEntriesQuery = craft.entries %}

{% set results = allEntriesQuery.all|group('section.name') %}

{% if results|length %}
    <div class="c-search-results">
        {% for sectionHandle, entries in results %}
            {% if sectionHandle %}
                <ul class="c-search-results-groups-list">
                    <li class="c-search-results-groups-list-item">
                        <h2>{{ sectionHandle }}</h2>

                        <ul class="search-results-list">
                            {% for result in entries %}
                                {% set url = result.url|default("") %}
                                {% set status = result.status|default("") %}

                                {% if result.fieldLayout.getThumbField %}
                                    <pre>
                                        {{ dump(result.fieldLayout.getThumbField) }}
                                        {{ dump(result["imageField"].one.url) }}
                                    </pre>
                                {% endif %}

[BramMortier]

Currently solved it as follows:

{{ dump(result[result.fieldLayout.thumbField.field.handle].one.url) }}

would be great to see an improvement on this thanks for the explanation tho!

[brandonkelly]

I see, but thumbnails aren’t necessarily based on an asset?

No. Any field layout element can identify itself as a potential thumbnail source via thumbable(), and returns the thumbnail via its thumbHtml() method.

craft\fieldlayoutelements\CustomField (the field layout element class used to represent custom fields) has thumbable() return true if the custom field implements ThumbableFieldInterface. That’s currently the case for all relation fields – not just Assets – (which will return the thumb HTML for their first related element), as well as Icon fields, which will return the selected icon’s HTML.

If you really want to do this, you should make the code more defensive. Make sure that getThumbField() is returning a custom field’s layout element, and that the referenced field is an Assets field. Also make sure that the Assets field actually has an asset selected.

{% set thumbField = result.fieldLayout.thumbField %}
{% if (
  thumbField is instance of "craft\\fieldlayoutelements\\CustomField"
  and thumbField.field is instance of "craft\\fields\\Assets"
) %}
  {% set asset = result.getFieldValue(thumbField.field.handle).one() %}
    {{ asset.url }}
  {% endset %}
{% endif %}

Note this would only work for field layouts that have an Assets field selected as the thumbnail provider directly. If you have an Entries field selected (so the thumbs are inherited from the related entries’ thumbnails), for example, you’d need to make this a bit more recursive, via a macro.

{% macro thumb(element) %}
  {% set thumbField = element.fieldLayout.thumbField %}
  {% if (
    thumbField is instance of "craft\\fieldlayoutelements\\CustomField" 
    and thumbField.field is instanceof "craft\\fields\\BaseRelationField"
  ) %}
    {% set relatedElement = element.getFieldValue(thumbField.field.handle).one() %}
    {% if relatedElement is instance of "craft\\elements\\Asset" %}
      {{ relatedElement.url }}
    {% elseif relatedElement %}
      {{ _self.thumb(relatedElement) }}
    {% endif %}
  {% endif %}
{% endmacro %}

{{ _self.thumb(result) }}

[BramMortier]

Learned something new today! Thanks for taking the time to explain and giving some code examples. I see why it would be hard to get the thumbnail to the frontend now... Cheers!