[Textile] Figures and figcaptions

Destry · 2016-03-18 08:07:52

Phil,

(I’m being lazy web.)

I take it this is still the core modus operandi in 4.6?

(Catching up again.)

philwareham · 2016-03-18 09:13:46

@destry

Yep.

Destry · 2016-08-17 23:46:24

Loving that this now works. Articles are so much cleaner without the full fig caption complex in the body, and that captions behave as they should (not as title attributes).

One question now… How can I get textile (and/or markdown) that is used in the caption field to render on output? We did this in the TXP Mag, but I can’t remember what the process was.

Wouldn’t that make the DITA people cry… Formatting within structured raw text fields. ;)

jakob · 2016-08-18 08:43:35

Destry wrote #300694:

One question now… How can I get textile (and/or markdown) that is used in the caption field to render on output? We did this in the TXP Mag, but I can’t remember what the process was.

How about with:

<txp:smd_wrap transform="textile"><txp:image_info type="caption" /></txp:smd_wrap>

But you will get an extra <p> wrap tag. If you want to strip that out, you need to chain on additional replace transform:

<txp:smd_wrap transform="textile,replace|regex|'<\/?p>'|"><txp:image_info type="caption" /></txp:smd_wrap>

I think that should work.

The other nice thing about farming off the image stuff to a separate form is that you can adapt it later, for example to add srcset tags without having to revisit the body fields again.

If you use smd_macro or rah_beacon, you can extend that principle and make your own txp:tags for images, figures or image groups. For example, you can make a form or smd_macro called figure and you need only insert <txp:figure id="123" /> into your body field. The whole code block including txp:images goes into that form*. You can go further to include a custom caption="my caption" to override the image’s own caption or caption="" to suppress the caption. The form gets more complex but your author’s body field remains cruft-free.

What I would really like now is a customisable tag-builder for making it easier for authors to pick images and insert that tag.

*Note: if using rah_beacon, you need to avoid using form names that collide with txp’s own tags (e.g. your form can’t be called images or image. I have a fork of rah_beacon that avoids that problem.

Destry · 2016-08-18 10:25:00

Sweet into, Jakob. Thanks!

I went with the second wrap, to remove the p. But since the tag I’m using in the body is, for example:

notextile. <txp:images id="78" form="images-body" />

The textile that’s added by smd_wrap is turned off again at the point location by notextile.. I’m assuming that’s what’s happening, because the textile doesn’t render.

Hmm… Those damn Textile p tags have always been such a pisser. I’ll just go with no textile in captions. Less confusing for editors anyway than having to explain the ability of using Textile in caption fields. Links in caption, for example, are nice to have/offer when dealing with image owners (link backs), but not critical.

jakob wrote #300699:

What I would really like now is a customisable tag-builder for making it easier for authors to pick images and insert that tag.

Yes! And the ability to position figures of varying widths right or left too, instead of being stuck with full-width figures. So either by adding prefab classes, or via a width-percentage picker/text field, and a float-direction picker.

And, yeah, smd_macro is something I really need to look closer at. Never used it yet. I wonder if that would solve the textile problem I’m running into?

Last edited by Destry (2016-08-18 10:29:38)

Destry · 2016-08-18 10:37:08

jakob wrote #300699:

For example, you can make a form or smd_macro called figure and you need only insert <txp:figure id="123" /> into your body field. The whole code block including txp:images goes into that form*.

That scenario and form would make a nice Textpattern Tip (you listening, Stubbs?). I remember someone once suggesting a similar doc source specifically for “smd_macro” solutions too, also a good idea. Plug and play pattern solutions! As fun as it might be to wade through plugin documentation on a busy schedule, being able to just copy/paste the right macro would be great too.

jstubbs · 2016-08-18 11:09:18

Destry wrote #300701:

That scenario and form would make a nice Textpattern Tip (you listening, Stubbs?).

Anyone wants to submit a tip/tutorial is most welcome..sorry haven’t followed this thread very closely, but always happy for more submissions! Back to the topic…

Destry · 2016-08-18 11:30:26

That was fast reply. You’re indeed awake and following. ;)

Submissions noted.

jakob · 2016-08-18 16:36:29

Destry wrote #300701:

That scenario and form would make a nice Textpattern Tip (you listening, Stubbs?). I remember someone once suggesting a similar doc source specifically for “smd_macro” solutions too, also a good idea.

I found it here and then saw it was me that posted it. I’ll replicate it here:

smd_macro for txp:figure tag

And here for cutting and pasting:

name	default	replacement
id		img_id
caption	NOTSPECIFIED	caption

<figure>
  <txp:image id="{img_id}" />
  <txp:smd_if field="{caption}" operator="eq" value="NOTSPECIFIED">
    <figcaption><txp:image_info id="{img_id}" type="caption" /></figcaption>
  <txp:else />
    <txp:smd_if field="NULL" operator="eq" value="{caption}">
    <txp:else />
      <figcaption>{caption}</figcaption>
    </txp:smd_if>
  </txp:smd_if>
</figure>

Note that this also requires smd_if. That gives you a tag that behaves as follows:

<txp:figure id="123" caption="My custom caption" />
– inserts image 123 with an HTML5 figcaption entitled “My custom caption”.
<txp:figure id="123" />
– inserts image 123 with an HTML5 figcaption with whatever is set in your images caption field.
<txp:figure id="123" caption="" />
– inserts image 123 with an HTML5 figure and no fig caption.

BTW: to achieve the differentiation between “no caption attribute specified” (case 2) and “caption attribute specified but blank” (case 3), you need to set a dummy value as the the default value in the attributes section of smd_macro. That’s what the NOTSPECIFIED is for.

jakob · 2016-08-18 17:21:48

And this is how the same txp:figure tag can be done with rah_beacon. Once you’ve installed rah_beacon, you only need create a form called figure and insert this:

<txp:rah_beacon_atts caption="NOTSPECIFIED" />
<figure>
  <txp:image id='<txp:variable name="img_id" />' />
  <txp:if_variable name="caption" value="NOTSPECIFIED">
    <figcaption><txp:image_info id='<txp:variable name="img_id" />' type="caption" /></figcaption>
  <txp:else />
    <txp:if_variable name="caption" value="">
    <txp:else />
      <figcaption><txp:variable name="caption" /></figcaption>
    </txp:if_variable>
  </txp:if_variable>
</figure>

rah_beacon allows you to tag on any attribute and it will be made into a variable for use in your form. The rah_beacon_atts tag allows you to set default values for variables if not specified.

That gives you a tag that behaves as follows:

<txp:figure img_id="123" caption="My custom caption" />
– inserts image 123 with an HTML5 figcaption entitled “My custom caption”.
<txp:figure img_id="123" />
– inserts image 123 with an HTML5 figcaption with whatever is set in your images caption field.
<txp:figure img_id="123" caption="" />
– inserts image 123 with an HTML5 figure and no fig caption.

– – –

You can add further attributes, for example this would be how to add a simple class attribute:

<txp:figure img_id="123" class="right" />

and then add:

<figure<txp:if_variable name="class" value=""><txp:else /> class="<txp:variable name="class" />"</txp:if_variable>>

to your form’s code.

Likewise the above code (both for rah_beacon and smd_macro) could be expanded with a further if-case to trap the situation where the caption should be used from the image, but the image has no caption and thus prevent an empty figcaption tag from being output.

– – –

smd_macro and rah_beacon both do very similar things and have advantages and disadvantages.

rah_beacon:

very easy to create: just add a form like you would with a normal txp tag
easy to add attributes – they automatically become variables and are removed again after use.
easier handling when working with flat files in your own code editor
take care when naming attributes not to overwrite any other variables you may have on the page. If you think there is a risk of that happening, I would suggest “namespacing” your other site / page variables and keeping simpler attributes for your macro tags.
if you add your own has-whatever helper variables in your form code, be aware that that won’t be removed at the end of the macro and needs unsetting/resetting at the end/beginning of the form. You notice that when you use several txp:figure tags in one document and wonder why the first one behaves properly but the rest don’t.

smd_macro:

has a little descriptor field
has its own edit window so doesn’t pollute your txp forms
no danger of conflicting with your txp:variables
macros can be exported and imported
not quite as easy to work with for flat files

With both these options, you need to be aware that you’re introducing txp tags that are not part of the normal txp tagset, and that might confuse future site admins (and forum helpers!) if they try and look up that tag. You could prefix the tag with your own initials to make that clearer. Personally I prefer simpler tags for the end user.

Destry · 2016-08-19 13:55:13

Jakob, you go beyond the call of duty, but it’s so appreciated. Your help/docs are always detailed and clear.

I have some other headaches to work out at the moment, but I’ll get back to trying one of these in the near future.

jstubbs · 2016-08-20 04:01:04

If either of you manages to get a write up done for Textpattern Tips please feel free to send it in. Thanks.

Textpattern CMS

Textpattern CMS support forum

#25 2016-03-18 08:07:52

Re: [Textile] Figures and figcaptions

#26 2016-03-18 09:13:46

Re: [Textile] Figures and figcaptions

#27 2016-08-17 23:46:24

Re: [Textile] Figures and figcaptions

#28 2016-08-18 08:43:35

Re: [Textile] Figures and figcaptions

Destry wrote #300694:

#29 2016-08-18 10:25:00

Re: [Textile] Figures and figcaptions

jakob wrote #300699:

#30 2016-08-18 10:37:08

Re: [Textile] Figures and figcaptions

jakob wrote #300699:

#31 2016-08-18 11:09:18

Re: [Textile] Figures and figcaptions

Destry wrote #300701:

#32 2016-08-18 11:30:26

Re: [Textile] Figures and figcaptions

#33 2016-08-18 16:36:29

Re: [Textile] Figures and figcaptions

Destry wrote #300701:

#34 2016-08-18 17:21:48

Re: [Textile] Figures and figcaptions

#35 2016-08-19 13:55:13

Re: [Textile] Figures and figcaptions

#36 2016-08-20 04:01:04

Re: [Textile] Figures and figcaptions

Board footer