Adding a caption to an image output by the Article Image field

bici · Today 00:23:46

I would like to add a string under the article image that is output via the Article Image field in admin area? is this possible or will TXP 5 handle that?

in the Body i can add this code ( it can be as simplified to bare bones in terms of image and text) :

<figure style="float:left; padding: 5px 5px 10px 20px;"" > <img class="imgr borderedbox inspace-5" src="./images/381.png" style="width:520px" name="foto" alt="image" ><figcaption_books class="inspace-15 center"> A wee caption under photo </figcaption></figure>

Doable via the admin side?

phiw13 · Today 01:20:06

Possible now!

On the admin side, images > edit image there is a caption field, under the alt field. Fill in your prose

in your form or article:

<figcaption>
    <txp:image_info type="caption" />
</figcaption>

You’re done.

bici · Today 01:43:00

well I’ll be! .. good to hear.
but I tried this in my form without any results:

<txp:if_article_image>
	<txp:article_image wraptag="p" class="article-image" width="720"/> <figcaption>
    <txp:image_info type="caption" /> </figcaption>
</txp:if_article_image>

phiw13 · Today 02:22:29

Strange… Doesn’t <txp:article_image /> get the image information?

Try this:

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

bici · Today 02:37:21

phiw13 wrote #341176:

Strange… Doesn’t <txp:article_image /> get the image information?

Try this:

<txp:if_article_image>...

magical! thanks..
I don’t know why I had never thought that this was possible to do! .

EDIT: I cannot get the caption to not continue on a new line and not to centre but align left under the image! this code

<figure> <txp:image /><figcaption class="inspace-15 left"><txp:image_info type="caption"/></figcaption> <figure>

starts the caption on the left but continues on a new line that is centred and a space between lines added. odd

Last edited by bici (Today 03:37:52)

jakob · Today 05:02:30

bici wrote #341177:

I don’t know why I had never thought that this was possible to do!

Yes, in the docs it says txp:image_info “should usually be used in an ‘image’ type form, although it may be used on its own providing you specify an id or name.”

EDIT: I cannot get the caption to not continue on a new line and not to centre but align left under the image! this code … starts the caption on the left but continues on a new line that is centred and a space between lines added.

That will have to do with your css styling. The default browser styling for figure and for figcaption is display: block; which places them on a line of their own. figure additionally has a bit of top and left margin, if not overridden. If no other styles are influencing that, they should both be left-aligned by default, so the centering is likely coming from elsewhere in your styles.

See this test case (look in the css tab to see the alternative inline styling).

If you want to force the caption to be on one line, investigate text-wrap: nowrap; in your css, but note that it can play havoc with your layout if your caption is long.

EDIT: If you do …

<txp:image_info wraptag="figcaption" class="myclass" />

… you can avoid an empty figcaption being output if you don’t specify a caption.

bici · Today 05:49:19

jakob wrote #341178:

Yes, in the docs it says txp:image_info “should usually be used in an ‘image’ type form, although it may be used on its own providing you specify an id or name.”

That will have to do with your css styling. The default browser styling for figure and for figcaption is display: block; which places them on a line of their own. figure additionally has a bit of top and left margin, if not overridden. If no other styles are influencing that, they should both be left-aligned by default, so the centering is likely coming from elsewhere in your styles.

See this test case (look in the css tab to see the alternative inline styling).

If you want to force the caption to be on one line, investigate text-wrap: nowrap; in your css, but note that it can play havoc with your layout if your caption is long.

EDIT: If you do …

<txp:image_info wraptag="figcaption" class="myclass" />...

… you can avoid an empty figcaption being output if you don’t specify a caption.

thanks… I do have some css voodoo happening that I need to adjust. good tip about empty captions.

jakob · Today 06:43:58

The browser dev tools can be indispensable for finding out what’s influencing your styles. In case it’s of use to anyone, Kevin Powell and Amit Sheen have put out a free CSS DevTools for Beginners course that goes through the main panels step by step.

Textpattern CMS

Textpattern CMS support forum

#1 Today 00:23:46