Shortcode and multiple article_images

giz · 2020-05-14 21:48:59

I’m using a misc. form called figure.txp to display images from an article_image field:

<txp:images limit='<txp:yield name="limit" />' break="">
	<figure class="image <txp:yield name="class" />">
		<img src="<txp:if_yield name="slir">/slir/<txp:yield name="slir" />/</txp:if_yield><txp:image_url />" alt />
		<figcaption><txp:image_info escape="tidy,textile" /></figcaption>
	</figure>
</txp:images>

I call it via a shortcode:

<txp::figure limit="1" class="image--thumb image--fill hide-figcaption" slir="w800-c3:2" />

Problem is, the wrong images are being displayed, and if I set limit="5" in my shortcode, a single image displays. I’ve tried setting id='<custom_field name="article_image" />' both in the shortcode and in my form, but to no avail.

What am I missing?

colak · 2020-05-15 04:00:45

Can you explain what the slir does? The following might/should work, but it’s probably not what you are looking for.

<txp:images limit='<txp:yield name="limit" />' id='<txp:yield name="id" />' break="">
	<figure class="image <txp:yield name="class" />">
		<txp:image />
		<figcaption><txp:image_info escape="tidy,textile" /></figcaption>
	</figure>
</txp:images>

giz · 2020-05-15 19:42:24

Thanks Yiannis.

If I specify image id’s manually eg. <txp::figure id="1,2,3" class="image--thumb" slir="w800" /> with figure.txp: <txp:images id='<txp:yield name="id" />' break="">etc my shortcode behaves. When I leave the <txp:images> tag to auto detect and use article_images, it displays the wrong images.

SLIR isn’t the problem. However, it is the reason why I want to use shortcodes in the first place.

Background 1

In the past, I’ve used variables to handle my image sizing and formatting instructions. It works but is messy / a pain to deal with.

This in my article form:

<txp:variable name="slir" value="w480-c1:1" />
<txp:variable name="image-class" value="image--thumb image--fill hide-figcaption" />
<txp:variable name="auto-proportion" value="1" />

<txp:images form="images" />

with images.txp:

<figure class="image <txp:variable name="image-class" />">
	<img src="/slir/<txp:variable name="slir" />/<txp:image_url />" alt />
	<figcaption><txp:image_info escape="tidy,textile" /></figcaption>
</figure>
<txp:variable name="slir" value="" />
<txp:variable name="image-class" value="" />
<txp:variable name="auto-proportion" value="0" />

I was hoping to use my figure shortcode to do way with all those variables.

Background 2

Our recent FaceTime chat prompted me to have a go at creating a formal Template for TXP for image-rich websites. Using a shortcode for all my image display needs will go a long way in simplifying my code.

.

SLIR is my go-to image resizing script.

Original image is 2500px wide: https://www.artedomus.com/images/3910.jpg

The same image scaled and cropped to the Golden Mean:

https://www.artedomus.com/slir2/w640-c1618:1000/https://www.artedomus.com/images/3910.jpg

=

SLIR has a few tricks up its sleeve, including caching its efforts and handling its own garbage collection.

Last edited by giz (2020-05-15 19:46:20)

Bloke · 2020-05-15 20:18:22

Long shots, but a few things.

1) Do you really mean <img src="<txp:if_yield name="slir">/slir/<txp:yield name="slir" />/</txp:if_yield><txp:image_url />" alt />?

If you pass in slir=“test” for example, your URL will become:

/slir/test/https://example.com/images/42.jpg

which is probably not what you intended. Might have to build the remainder of the URL up manually in the slir case.

2) limit='<txp:yield name="limit" />' will result in limit='' if you omit the attribute, which equates to unlimited images. You may wish to try: limit='<txp:yield name="limit" default="1" />' to catch that eventuality.

3) Are you actually getting the wrong images or just all images? Recall that if you don’t have any article images, <txp:images> defaults to the entire set. If that is the case, you need to guard for those eventualities with a <txp:if_article_image>...</txp:if_article_image> wrapper around your entire shortcode.

FWIW, I tested your shortcode on my site and – without the slir param – it worked well.

giz · 2020-05-15 21:07:45

Thanks Bloke.

Bloke wrote #322998:

Long shots, but a few things.

1) Do you really mean <img src="<txp:if_yield name="slir">/slir/<txp:yield name="slir" />/</txp:if_yield><txp:image_url />" alt />?

If you pass in slir=“test” for example, your URL will become:

/slir/test/https://example.com/images/42.jpg...

which is probably not what you intended. Might have to build the remainder of the URL up manually in the slir case.

Actually that is what I intended :) If you were to pass any old string to SLIR it would simply spit back the original image: https://www.artedomus.com/slir2/test/https://www.artedomus.com/images/3910.jpg

2) limit='<txp:yield name="limit" />' will result in limit='' if you omit the attribute, which equates to unlimited images. You may wish to try: limit='<txp:yield name="limit" default="1" />' to catch that eventuality.

Thanks – simpler than the <txp:if_yield name="limit" value>etc I’ve been using.

3) Are you actually getting the wrong images or just all images? Recall that if you don’t have any article images, <txp:images> defaults to the entire set. If that is the case, you need to guard for those eventualities with a <txp:if_article_image>...</txp:if_article_image> wrapper around your entire shortcode.

FWIW, I tested your shortcode on my site and – without the slir param – it worked well.

I’m getting the wrong images. I have 38 images in the images tab, and 10 articles, each with at least 1 image specified by their id in the article_image field.

In the article_listing.txp form I call <txp:if_article_image><txp::figure limit="1" etc and get a single unique image for each article (article1 displays 1.jpg, article2 displays 2.jpg, article3 displays 3.jpg etc)
In default.txp form I call <txp:if_article_image><txp::figure limit="10" etc and get the same.

(I also double checked that I’m actually using v4.8.0 ;-)

colak · 2020-05-16 05:54:21

Hi Gary, Admittedly I am using short tags in the write tab, not in the forms. Basically, they save me of a lot of typing. Did you try.

<txp:images limit='<txp:yield name="limit" default="1" />' id='<txp:custom_field name="article_image" />' break="">
	<figure class="image <txp:yield name="class" />">
		<img src="<txp:if_yield name="slir">/slir/<txp:yield name="slir" />/</txp:if_yield><txp:image_url />" alt />
		<figcaption><txp:image_info escape="tidy,textile" /></figcaption>
	</figure>
</txp:images>

also, instead of using <txp:if_article_image>, you could try <txp:if_custom_field name="article_image">.

> Edited to add that I just noticed that you have tried it but are you sure there was no typo?

Also, where you have <txp:image_info escape="tidy,textile" /> shouldn’t you also be specifying a type. ie. <txp:image_info escape="tidy,textile" type="caption" />?

Last edited by colak (2020-05-16 08:36:57)

giz · 2020-05-16 18:33:15

Thanks Yiannis.

I’ve tried every variation I can think of. So I stepped back and tried specifying image ids manually.

<txp:images id='<txp:yield name="id" />'>
	<img src="<txp:image_url />" alt />
</txp:images>

This works: <txp::figure id="3" />

This doesn’t: <txp::figure id="5,6,7" /> – only the first image is displayed

.

I’m reverting back to my messy variables-based approach for now!

etc · 2020-05-16 20:01:44

giz wrote #323017:

This works: <txp::figure id="3" />

This doesn’t: <txp::figure id="5,6,7" /> – only the first image is displayed

Everything works as expected in my tests. Are you sure your text editor does not use some typographic comma?

giz · 2020-05-17 19:24:18

Thanks Oleg.

I don’t think its my editor (Coda), but everything points to something smelly with my MAMP / TXP setup.

Investigating…

Textpattern CMS

Textpattern CMS support forum

#1 2020-05-14 21:48:59