Captions with article_image?

Destry · 2020-07-07 13:21:49

I thought outputting a hero image with a caption via article_image would be straight forward, but I can’t seem to manage it.

Apparently article_image and image_info tags do not communicate well. I can’t figure out how to get type="caption" info working in relation to article_image. I realize the attribute doesn’t work with the tag, oddly, so what’s the trick to achieve the end?

My crude lump of clay so far, which seems logical on the surface, but…

<txp:if_article_image>
  <figure>
    <txp:article_image />
    <figcaption><txp:image_info escape="tidy,textile" /></figcaption>
  </figure>
</txp:if_article_image>

Last edited by Destry (2020-07-07 13:23:31)

michaelkpate · 2020-07-07 13:26:26

Are you missing type="caption" ?

Destry · 2020-07-07 13:29:36

michaelkpate wrote #324341:

Are you missing type="caption" ?

I think that’s supposed to be the default condition if not declared.

But I’m getting the error:

‘Image tags cannot be used outside an image context.’

But I don’t see how it’s not in context.

Bloke · 2020-07-07 13:42:31

Destry wrote #324342:

But I don’t see how it’s not in context.

Because the <txp:article_image/> tag is self-closing. It just outputs the image and leaves. Thus, when Txp sees the <txp:image_info> tag without an ID or name, it just shrugs and goes what image?

It might be handy one day to allow <txp:article_image> to be a container. But until that day you need to wrap it in <txp:images> if you want additional info, because that tag defaults to loading up info about the article image in its container:

<txp:if_article_image>
  <figure>
    <txp:images>
      <txp:article_image />
      <figcaption><txp:image_info escape="tidy,textile" /></figcaption>
    </txp:images>
  </figure>
</txp:if_article_image>

EDIT: alternatively, grab the ID of the article image and pass that to the <txp:image_info> tag, in lieu of wrapping it in <txp:images>:

<figcaption><txp:image_info id='<txp:custom_field name="article_image" />' escape="tidy,textile" /></figcaption>

Last edited by Bloke (2020-07-07 13:45:32)

michaelkpate · 2020-07-07 13:50:03

Edit; Stef was ahead of me.

I used to get that a lot – especially when I was trying to do things with <smd_thumbnail>.

Try:

<txp:if_article_image>
    <txp:images>
        <figure>
            <txp:article_image />
            <figcaption><txp:image_info escape="tidy,textile" /></figcaption>
        </figure>
    </txp:images>
</txp:if_article_image>

While seemingly redundant it always seemed to fix the problem for me.

Destry · 2020-07-07 13:52:03

Thanks, the images wrapper. Doh.

Last edited by Destry (2020-07-07 13:52:24)

etc · 2020-07-07 14:00:38

I suspect that <txp:article_image /> inside <txp:images /> in article context could be problematic for multiple article images. It should be safer to replace it by <txp:image />.

Bloke · 2020-07-07 14:01:05

michaelkpate wrote #324344:

<txp:images> While seemingly redundant

In this instance, I agree it does appear redundant. Not entirely sure what we can do about this, though.

We could make the assumption that if you’re wrapping statements in <txp:if_article_image> that you’re likely to be using the article image inside it. Thus we could perhaps preload the article image (at the expense of a database call) into the ‘image container’ ($thisimage) in this special case. That would mean Destry’s OP code would work as-is because the act of including the wrapped conditional would set the context, instead of having to force the context with the default behaviour of <txp:images>.

Not sure if that would have any ramifications on other tags like thumbnail, or plugins inside the conditional.

Perhaps the safer alternative would be to allow <txp:article_image> to be used as a container. It would mean that a bunch of its attributes such as height, width and thumbnail become redundant if used as a container, but there are other tags that behave in this way so it’s not without precedent.

Bloke · 2020-07-07 14:03:28

etc wrote #324346:

I suspect that <txp:article_image /> inside <txp:images /> in article context could be problematic for multiple article images.

I agree and was going to mention this in my post but saw you mentioned it here. <txp:image> is definitely safer.

etc · 2020-07-07 14:06:02

Bloke wrote #324347:

Perhaps the safer alternative would be to allow <txp:article_image> to be used as a container. It would mean that a bunch of its attributes such as height, width and thumbnail become redundant if used as a container, but there are other tags that behave in this way so it’s not without precedent.

+1

Bloke · 2020-07-07 14:08:04

etc wrote #324349:

+1

Core is your oyster ;)

etc · 2020-07-07 14:14:40

Bloke wrote #324350:

Core is your oyster ;)

July is not a month with ‘r’ :-) Anyway, it would seemingly become just a poor map to <txp:images />.

michaelkpate · 2020-07-07 15:23:32

Bloke wrote #324347:

In this instance, I agree it does appear redundant. Not entirely sure what we can do about this, though. We could make the assumption that if you’re wrapping statements in <txp:if_article_image> that you’re likely to be using the article image inside it.

This is the form post-thumbnail from a project I have been working on.

<txp:evaluate test="images">

<div class="entry__thumb">
    <a href="<txp:permlink />" class="entry__thumb-link">
    <txp:images id='<txp:custom_field name="article_image" />' >
        <img src="<txp:smd_thumbnail type='1x' display='url' />"

        srcset="<txp:smd_thumbnail type='1x' form="img-srcset" /> 1x,
                <txp:smd_thumbnail type='2x' form="img-srcset" /> 2x"

        alt=""
        />
    </txp:images>
    </a>
</div>

</txp:evaluate>

Based on what we’ve been discussing I guess the id='<txp:custom_field name="article_image" />' is unnecessary since Destry’s example worked without specifying anything.

Or I could remove the <txp:images> code entirely and do this in the article form.

<txp:images>
    <txp:output_form form="post-thumbnail" />
</txp:images>

Bloke · 2020-07-07 15:46:32

michaelkpate wrote #324356:

Based on what we’ve been discussing I guess the id='<txp:custom_field name="article_image" />' is unnecessary since Destry’s example worked without specifying anything.

The answer is… sort of!

If you wrap the entire block, including <txp:evaluate> in <txp:if_article_image> then yes it will work without the id. If, however, you do not wrap the conditional then there’s an outside chance it won’t work. The reason is subtle:

<txp:images> has the auto_detect attribute which defaults to article, category, author. What this means is that – without any other filter attributes to the contrary – it will:

Look first in the article image field, then if it finds none;
Will look in the URL to see if there’s an image-based /category list in use, and if it doesn’t find one of those;
Consider images owned by the author given in the URL /author list, and if it fails to find one of those;
Return all images in the database.

So, if you put your above code on a page that displays an article that has a missing article_image field, you’ll probably get all images displayed. The id guards against that by skipping the auto_detect feature in lieu of you explicit giving the image to fetch.

tl;dr
If you’re dealing with article images, either:

a) wrap the code in <txp:if_article_image> to avoid nasty surprises of retrieving all images by mistake.

b) specify a filter attribute which overrides the automatic detection of context (i.e. author, category, extension, id, name, realname, size, or thumbnail).

Setting auto_detect="" turns off the feature but will still return all images if no image filter attributes are present. You can also set auto_detect to check for stuff in a different order or to only consider some or all of those automatic contexts.

Last edited by Bloke (2020-07-07 15:52:04)

Textpattern CMS

Textpattern CMS support forum

#1 2020-07-07 13:21:49