pdoResources

A list of resources (a catalogue, articles) with the first gallery image of each. The image is joined in the pdoResources query, and the g3xGetImage snippet returns its thumbnail URL by ID.

[[!pdoResources?
    &parents=`5`
    &tpl=`ListRowTpl`
    &leftJoin=`{
        "Image": {
            "class": "Gallery3x\\Model\\Gallery3xFile",
            "on": "modResource.id = Image.resource_id AND Image.position = 0 AND Image.active = 1"
        }
    }`
    &select=`{
        "modResource": "modResource.id, modResource.pagetitle, modResource.introtext, modResource.uri",
        "Image": "Image.id AS image_id, Image.alt AS image_alt"
    }`
]]

Image.position = 0 is the first image in gallery order. If the first image is disabled, the resource gets no picture — then remove Image.active = 1 or pick the minimum position with a subquery.

The ListRowTpl chunk

{set $img = $image_id ? ($image_id | g3xGetImage : 'small') : ''}
<div class="catalog-item">
    <a href="{$id | url}">
        <img src="{$img ?: '/assets/images/no-image.png'}" alt="{$image_alt ?: $pagetitle}">
    </a>
    <h3><a href="{$id | url}">{$pagetitle}</a></h3>
    <p>{$introtext}</p>
</div>

The g3xGetImage snippet

Tag call: [[g3xGetImage? &input=`[[+image_id]]` &options=`small`]]. An empty result means there is no image or it has no such size.