Article image as hero image, with caption

Destry · 2016-08-17 17:44:07

In my articles section only, I want to use the article_image for hero images only, when one exists, and sometimes these hero images have captions (most of the time).

Leaving out the conditional tags for the moment, I was trying to use this in my article form for the positive output:

<figure><txp:article_image width="0" height="0" />
 <figcaption><txp:image_info /></figcaption>
</figure>

(edited to actual code)

I get an error that <txp:image_info /> can’t be used out of an image context, which should probably be obvious to me as to why an article image isn’t context enough, but it isn’t.

I then tried to be sneaky using this idea, but putting this in the article form, but no dice…

<txp:if_article_image>
 <txp:images id='<txp:article_image />' form="images" />
</txp:if_article_image>

Any way with core to use article_image and pull the caption, but served up from the article form instead of in the body field?

I’m guessing it can’t be done.

Last edited by Destry (2016-08-17 18:06:50)

Bloke · 2016-08-17 19:00:23

Destry wrote #300689:

<txp:image_info /> can’t be used out of an image context

Image context is when you’re inside (the container of) an image tag. Since your <txp:image_info> tag came after the <txp:article_image />, the info tag goes “what image do you mean?” and throws that error. It sadly can’t guess which image you mean (however fun it’d be if it tried). Had you put the <txp:image_info /> tag inside the <txp:article_image> container, it would have worked.

I then tried to be sneaky

A few pointers:

<txp:images /> is the master tag that is (usually) employed as a container to wrap a bunch of images for, e.g. a gallery. It can of course be used to make a gallery of one image :-)
It tries to be clever and figure out the context based on where you use it. In your case, since you’re using it to get the article image, you’re in luck: it tries that first without you having to specify any additional attributes.
<txp:article_image /> by default doesn’t output the ID, it outputs an entire image tag. Hence, using it as you have, results in this construct once the tag-in-attribute replacement has been done:

<txp:images id='<a href="http://example.org/images/destry.jpg">Destry Wion</a>' form="images" />

which Txp (rightly) interprets as nonsense.

So the key to it is something like this:

<txp:if_article_image>
 <txp:images form="images" />
</txp:if_article_image>

Where the images form contains your <txp:image /> tag to display the image, and <txp:image_info /> to display its caption, wrapped up in whatever suitable markup you wish (<figure>, <figcaption> etc). Or, if you’re not intending to reuse the Form contents anywhere else, you can do it all inline by using the <txp:images> tag as a container.

You can also use the wraptag and class attributes of the <txp:images> tag to render the <figure class="something">... </figure> if you wish, thereby reducing the amount of markup in your Form. Again, it depends if you’re going to reuse the Form elsewhere or not and need the same wrapper markup there.

Does that help?

Last edited by Bloke (2016-08-17 19:03:39)

Destry · 2016-08-17 19:16:24

That helped! But please don’t test me on it next week.

This is what works:

<txp:if_article_image>
 <figure><txp:images form="images" />
	 <figcaption><txp:image_info /></figcaption>
 </figure>
</txp:if_article_image>

But there’s still an error in debug mode:

Tag error: <txp:image_info /> -> Textpattern Notice: Image tags cannot be used outside an image context. while parsing form article-full on page articles

textpattern/lib/txplib_misc.php:5870 trigger_error()
textpattern/publish/taghandlers.php:3633 assert_image()
image_info()
textpattern/vendors/Textpattern/Tag/Registry.php:83 call_user_func()
textpattern/lib/txplib_publish.php:514 Textpattern\Tag\Registry->process()
textpattern/lib/txplib_publish.php:463 processTags()
textpattern/publish/taghandlers.php:3138 parse()
if_article_image()
textpattern/vendors/Textpattern/Tag/Registry.php:83 call_user_func()
textpattern/lib/txplib_publish.php:514 Textpattern\Tag\Registry->process()

I take it I can ignore that?

Bloke · 2016-08-17 19:29:18

Destry wrote #300691:

This is what works:

Ummm, how? Your <txp:image_info /> tag is still outside your images container!

If you want to do it all inline, without a Form:

<txp:if_article_image>
   <txp:images wraptag="figure">
      <txp:image />
      <txp:image_info wraptag="figcaption" />
   </txp:images>
</txp:if_article_image>

Or if you want to do it with a Form:

<txp:if_article_image>
   <txp:images form="images" />
</txp:if_article_image>

with your images Form containing:

<figure>
   <txp:image />
   <txp:image_info wraptag="figcaption" />
</figure>

Destry · 2016-08-17 22:42:27

Thank you for your patience with my senility. An if_article_image conditional doesn’t count as an image container/context, I see now. Also, my images form was a little off. All right as rain now. Thanks again.

Textpattern CMS

Textpattern CMS support forum

#1 2016-08-17 17:44:07