Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
if_first_image
I am experimenting with the if_first_image and I constructed the following.
<txp:article_custom section="projects,about" limit="999">
<txp:if_custom_field name="pubs">
<txp:images id='<txp:custom_field name="pubs" />' break="">
<txp:if_first_image>
<div class="line" id="book_<txp:image_info type="id" />">
<figure itemscope itemtype="http://schema.org/ImageObject"><span itemprop="image" class="grid_6"><txp:permlink>
<txp:image fetchpriority="high" /></txp:permlink></span><figcaption itemprop="caption" class="grid_17"><txp:image_info type="caption" escape="" /></figcaption></figure>
<txp:else />
<div class="line" id="book_<txp:image_info type="id" />">
<figure itemscope itemtype="http://schema.org/ImageObject"><span itemprop="image" class="grid_6"><txp:permlink>
<txp:image loading="lazy" /></txp:permlink></span><figcaption itemprop="caption" class="grid_17"><txp:image_info type="caption" escape="" />
</figcaption></figure></div>
</txp:if_first_image>
</txp:images>
</txp:if_custom_field>
</txp:article_custom> I would expect the first image to have a fetchpriority="high" attribute, and the rest to have loading="lazy". Instead all images are loaded with fetchpriority="high".
> Edited to add that I was surprised that fetchpriority="high" was parsed properly in the txp:image tag.
Last edited by colak (2025-08-05 14:33:23)
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: if_first_image
It works for me. The fetchpriority is rendered on the first image and not the others. And the loading parameter is added to the remaining image tags.
I’m using 4.9.0. Which version are you on? And is your doctype set to html5? If not, the loading attribute won’t show up.
btw, the fetchpriority works because Oleg added the ability to pass arbitrary html5 image attributes through verbatim if they’re not one of ours that core intercepts.
P.S. you need to close your <div> tag in the first image ‘if’ branch.
Last edited by Bloke (2025-08-05 15:49:25)
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: if_first_image
Bloke wrote #340061:
It works for me. The
fetchpriorityis rendered on the first image and not the others. And theloadingparameter is added to the remaining image tags.
I guess you mean the first image of each article? Perhaps, that’s not what Yiannis wanted?
BTW, wouldn’t it be handy to be able to filter articles by image:
<!-- articles with images -->
<txp:article_custom image />
<!-- articles with some of given images -->
<txp:article_custom image="1, 2, 3" />
<!-- articles sharing some images with the current article -->
<txp:article_custom match="image" />Offline
Re: if_first_image
etc wrote #340062:
I guess you mean the first image of each article?
Yeah, I only tested it on a single article. It should match on the first image of each article, because each one will restart the ‘images’ tag… umm, won’t it? Or does if_first_nnn only get evaluated once?
BTW, wouldn’t it be handy to be able to filter articles by image:
YES!
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: if_first_image
etc wrote #340062:
I guess you mean the first image of each article? Perhaps, that’s not what Yiannis wanted?
Indeed. It’s a page with a lot of 2figures but I would only get a fetchpriority on the first one and the rest in a lazy way
BTW, wouldn’t it be handy to be able to filter articles by image:
<!-- articles with images -->...
Although I cannot currently think of a way that it will be of use for me, I’m sure that there will be a functional necessity for many others as some point.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: if_first_image
After the discussion here I tried doubling the code so as to get the high priority on the first image appearing on the page, but everything loads with lazy. This is what I tried
<txp:article_custom section="projects,about" limit="1">
<txp:if_custom_field name="pubs">
<txp:images id='<txp:custom_field name="pubs" />' break="">
<div class="line" id="book_<txp:image_info type="id" />">
<figure itemscope itemtype="http://schema.org/ImageObject">
<span itemprop="image" class="grid_6">
<txp:permlink><txp:image fetchpriority="high" /></txp:permlink>
</span>
<figcaption itemprop="caption" class="grid_17"><txp:image_info type="caption" escape="" /></p></figcaption>
</figure>
<div class="clear"> </div></div>
</txp:images>
</txp:if_custom_field>
</txp:article_custom>
<txp:article_custom section="projects,about" limit="999" offset="1">
<txp:if_custom_field name="pubs">
<txp:images id='<txp:custom_field name="pubs" />' break="">
<div class="line" id="book_<txp:image_info type="id" />">
<figure itemscope itemtype="http://schema.org/ImageObject">
<span itemprop="image" class="grid_6">
<txp:permlink><txp:image loading="lazy" /></txp:permlink>
</span>
<figcaption itemprop="caption" class="grid_17"><txp:image_info type="caption" escape="" /></p></figcaption>
</figure>
<div class="clear"> </div></div>
</txp:images>
</txp:if_custom_field>
</txp:article_custom>I actually thought that the above would work, and it’s not my cache as I also tried it on Tor browser!
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: if_first_image
If what you’re looking for is fetchpriority for the first image overall, and lazy for all the rest on the page, you could do this by setting a variable and checking whether it’s the first instance of the variable. That’s done most easily with a counter variable:
<txp:article_custom section="projects,about" limit="999">
<txp:if_custom_field name="pubs">
<txp:images id='<txp:custom_field name="pubs" />' break="">
<txp:variable name="img_counter" add="1" />
<div class="line" id="book_<txp:image_info type="id" />">
<figure itemscope itemtype="http://schema.org/ImageObject">
<span itemprop="image" class="grid_6">
<txp:permlink>
<txp:if_variable name="img_counter" value="1">
<txp:image fetchpriority="high" />
<txp:else />
<txp:image loading="lazy" />
</txp:if_variable>
</txp:permlink>
</span>
<figcaption itemprop="caption" class="grid_17">
<txp:image_info type="caption" escape="" />
</figcaption>
</figure>
</div>
</txp:images>
</txp:if_custom_field>
</txp:article_custom> You could also set a variable with the initial “fetchpriority” state, then once used, set it to the “lazy” state, and check with if_variable to get your desired output.
TXP Builders – finely-crafted code, design and txp
Offline
Re: if_first_image
Hi Julian,
Thanks, do you nevertheless understand why my attempt above does not work? Is there a bug, either in my snippet or in txp?
Edit: I think I got it. It is because the latest article has nothing in the pubs CF!
Last edited by colak (2025-08-06 12:12:41)
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: if_first_image
colak wrote #340070:
Do you nevertheless understand why my attempt above does not work? Is there a bug, either in my snippet or in txp?
Edit: I think I got it. It is because the latest article has nothing in the
pubsCF!
You could be right there. You can test it easily enough by temporarily putting recent non-pub articles without images into hidden status.
Maybe my recent post could help. I wanted to list only articles that contained a value in the custom field. For that, you need to find out which custom-field number matches “pub” – let’s say for this example it is custom_6:
<txp:article_custom section="projects,about“ custom_6 limit="999">
<txp:images id='<txp:custom_field name="pubs" />' break="">
…
</txp:images>
</txp:article_custom>You can then skip the if_custom_field tags and your first match will be relevant.
Then you could use if_first_article to target the first article’s images – assuming that the pubs field denotes an article also has images – or if you want just the first image of the first article, then using if_first_article and if_first_image in combination. That said, maybe my txp:variable suggestion is more portable…
TXP Builders – finely-crafted code, design and txp
Offline
Re: if_first_image
It appears that there is definitely something screwy.
I’m trying different methods to see where the problem lies.
Latest attempt
<txp:variable name="ids"><txp:article_custom section="projects,about" pubs limit="999" break=","><txp:article_id /></txp:article_custom></txp:variable>This correctly returns a CSL of the ids of the articles that have the CF field populated.
Then:
<txp:article_custom id='<txp:variable name="ids" />' limit="1">
<txp:images id='<txp:custom_field name="pubs" />' break="">
<div class="line" id="book_<txp:image_info type="id" />">
<figure itemscope itemtype="http://schema.org/ImageObject">
<span itemprop="image" class="grid_6">
<txp:permlink><txp:image fetchpriority="high" /></txp:permlink>
</span>
<figcaption itemprop="caption" class="grid_17"><txp:image_info type="caption" escape="" /></figcaption>
</figure>
</txp:images>
</txp:article_custom>This correctly returns the latest id as stored in the variable, but it ignores the fetchpriority and returns lazy instead. The above is followed by the snippet below
<txp:article_custom id='<txp:variable name="ids" />' limit="999" offset="1">
<txp:images id='<txp:custom_field name="pubs" />' break="">
<div class="line" id="book_<txp:image_info type="id" />">
<figure itemscope itemtype="http://schema.org/ImageObject">
<span itemprop="image" class="grid_6">
<txp:permlink><txp:image fetchpriority="high" /></txp:permlink>
</span>
<figcaption itemprop="caption" class="grid_17"><txp:image_info type="caption" escape="" /></figcaption>
</figure>
</txp:images>
</txp:article_custom>which returns everything as expected.
I would expect that this method, as it is reliant on filtered ids would function with flying colours, but it doesn’t.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: if_first_image
Solved. In the end it was a gremlin I had a semi-colon instead of a colon in the first part of the snippet. ie. <txp;variable .... I’m officially an idiot.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: if_first_image
Glad you got it working (though I think what you posted must be muddled, as the first part doesn’t contain lazy in the code, so can’t return it.)
I’m not sure how well mysql/textpattern caches queries that have been made, but you’re using article_custom three times, where I think you could get away with once, either with the txp:variable counter I showed above or with the combination of if_first_article and if_first_image as I hinted at earlier, e.g.:
<txp:article_custom section="projects, about" pubs limit="999">
<txp:images id='<txp:custom_field name="pubs" />' break="">
<div class="line" id="book_<txp:image_info type="id" />">
<figure itemscope itemtype="http://schema.org/ImageObject">
<span itemprop="image" class="grid_6">
<txp:permlink>
<txp:if_first_article>
<txp:if_first_image>
<!-- first article and first image -->
<txp:image fetchpriority="high" />
<txp:else />
<!-- first article, further images -->
<txp:image loading="lazy" />
</txp:if_first_image>
<txp:else />
<!-- second and further articles -->
<txp:image loading="lazy" />
</txp:if_first_article>
</txp:permlink>
</span>
<figcaption itemprop="caption" class="grid_17">
<txp:image_info type="caption" escape="" />
</figcaption>
</figure>
</div>
</txp:images>
</txp:article_custom> I didn’t know you could filter just by the custom_field name (you entered pubs); I thought it had to be custom_x where x is the corresponding custom field number, but if you can use the name, it makes the code more readable later.
TXP Builders – finely-crafted code, design and txp
Offline