XF 2.2 How to fetch thumbnail versions of images attached to a post or resource description

[CStrategies]

I want to display a gallery or slider of images from the user's resource description (XFRM) or from a thread post (I assume the process will be similar).

I assume XF automatically creates thumbnail versions of images that are attached to a post, but I'm not sure how to find them/ what the naming scheme is for thumbnailed images. Any help would be greatly appreciated!

 

[CStrategies]

I figured this out myself. My implementation might not be the best or most efficient, but hopefully it helps others.

First, initialize the lightbox on the page by including it in your template. In my case, I am adding it to the search results page:

<xf:css src="search_results.less" />
<xf:css src="lightbox.less" />
<xf:css src="public:searchThumbs.less" />
<xf:js prod="xf/lightbox-compiled.js" dev="vendor/fancybox/jquery.fancybox.js, xf/lightbox.js" />
    <xf:if is="!page_param('hasLb')">
        <script class="js-extraPhrases" type="application/json">
        {
            "lightbox_close": "{{ phrase('lightbox_close')|escape('js') }}",
            "lightbox_next": "{{ phrase('lightbox_next')|escape('js') }}",
            "lightbox_previous": "{{ phrase('lightbox_previous')|escape('js') }}",
            "lightbox_error": "{{ phrase('lightbox_error')|escape('js') }}",
            "lightbox_start_slideshow": "{{ phrase('lightbox_start_slideshow')|escape('js') }}",
            "lightbox_stop_slideshow": "{{ phrase('lightbox_stop_slideshow')|escape('js') }}",
            "lightbox_full_screen": "{{ phrase('lightbox_full_screen')|escape('js') }}",
            "lightbox_thumbnails": "{{ phrase('lightbox_thumbnails')|escape('js') }}",
            "lightbox_download": "{{ phrase('lightbox_download')|escape('js') }}",
            "lightbox_share": "{{ phrase('lightbox_share')|escape('js') }}",
            "lightbox_zoom": "{{ phrase('lightbox_zoom')|escape('js') }}",
            "lightbox_new_window": "{{ phrase('lightbox_new_window')|escape('js') }}",
            "lightbox_toggle_sidebar": "{{ phrase('lightbox_toggle_sidebar')|escape('js') }}"
        }
        </script>
    </xf:if>
    <xf:page option="hasLb" value="{{ true }}" />

Then, to capture images specifically from an XFRM resource description, you can use:

<xf:set var = "$description" value="{{ $resource.Description }}" />
<xf:if is="$description.attach_count">
    <xf:foreach loop="$description.Attachments" value="$attachment">
        <xf:if is="$attachment.has_thumbnail">

Then, incorporate the proper tags for the lightbox image. Some notes:
-You need to wrap your resource images in a container with js-lbContainer class
-Your data-lb-id for your container and the data-fancybox need to match, or else it will treat every lightbox container on the page as the same gallery

In my case, the images show next to resources in the search_result_resource template:

<xf:set var = "$description" value="{{ $resource.Description }}" />
    <xf:if is="$description.attach_count">
    <div class="searchresultImages js-lbContainer" data-xf-init="lightbox" data-lb-id="resource-{{ $resource.resource_id }}" data-lb-caption-desc="{{ $resource.title }}">
        <xf:foreach loop="$description.Attachments" value="$attachment">
            <xf:if is="$attachment.has_thumbnail">
            <a href="{$attachment.direct_url}" target="_blank" class="js-lbImage" data-lb-sidebar-href="" data-lb-caption-extra-html="" data-fancybox="resource-{{ $resource.resource_id }}" style="cursor: pointer;" data-caption="{{ $resource.title }}">
                <img src="{$attachment.thumbnail_url}" alt="{$attachment.filename}"
                    width="{$attachment.thumbnail_width}" height="{$attachment.thumbnail_height}" class="bbImage searchresultThumb" loading="lazy" />
            </a>
            </xf:if>
        </xf:foreach>
        </div>   
    </xf:if>

An in order to display the thumbnails nicely on the search results page, I added some additional classes to the contentRows and some css:

.bbImage.searchresultThumb {
    max-height: 5em;
    max-width: 100%;
      width: auto;
      height: auto;
}
.searchresultImages.js-lbContainer {
    display: flex;
    flex-shrink: 0 0 100%;
    max-height: 5em;
    width: auto;
    height: 100%;
    justify-content: flex-end;
}
.contentRow.searchresultWrap {
    flex-wrap: wrap;
}
.contentRow-main.searchresultMain {
    min-width: 20%;
}

Hope someone else finds this useful. If I can get it cleaned up maybe I'll make an add-on.