A few more option with images plugin?

ingleslenobel · 2014-10-30 12:46:41

Hello,

I get how the native article image process and tag works but can anyone recommend me a plugin that gives a few more options? For example I might like several images in an article, some right aligned half width, some full width, and the ability to add some caption text below (not as title) which I’d style to be consistent with the rest of my site. I’ve looked through images plugins but the one that seemed to fit the bill is missing a download location, sadly.

I would love to use milosevic’ smd_macro adaptation but that depends on chh_if_data and that is now deprecated

Any recommendations?

Thank you!
-Johan

Last edited by ingleslenobel (2014-10-30 12:56:52)

uli · 2014-10-30 13:08:18

I think you can prepare some forms with tags according to the use cases you’re having, and then use something like this here:

<txp:output_form form="YOUR_FORM_NAME_1">54</txp:output_form>

Where the number is the image’s ID you want to display. The nice part about this is: there’s a txp:yield tag that you’ve to put inside your image tag forms in order for this to work. And then exactly where the yield tag sits will the tag parser put the image ID that you’ve entered between the opening and the closing output_form tag above, i.e. the yield tag is actually a placeholder for the image ID (in your case).

Edit: Put the placeholder explanation where it belongs.

Last edited by uli (2014-10-30 13:30:06)

Bloke · 2014-10-30 13:09:38

<txp:images> is pretty capable for most things. Using the form attribute or as a container, you can bend it in many ways. I based a lot of the functionality on a stripped-down (and better) version of my original smd_gallery plugin which was the grand-daddy of gallery plugins for a while.

You can already have multiple images assigned to an article if you comma-separate the IDs in the Article image field. <txp:images> will pick them up by default, and you can iterate over them. However, this will only present them as a gallery, unless you do some custom splitting to feed them to different txp:images tags.

If you want your images smattered throughout your body content, you probably need to put them inline in your article body text. This can be cumbersome and difficult to update in future, but jakob outlines an smd_macro that works very well to insert images inline. You can extend that macro to permit a class attribute for alignment / sizing purposes. It does require smd_if or some txp:if_variable logic to test for values and deliver nicely formatted output as fallbacks in case some image meta data is not assigned, so that may not be your kind of thing.

Uli’s suggestion is also excellent, depending on where you’re putting the tag (Form vs article body), so consider that before employing plugins if you’re putting it in a Form. An extended (untested) example:

<txp:output_form form="images_left">
   <txp:custom_field name="article_image" />
</txp:output_form>

and in form images_left:

<txp:images id='<txp:yield />' wraptag="div" class="left">
   <txp:image />
   <txp:image_info wraptag="div" class="caption" />
</txp:images>

EDIT: fix crappy, badly-terminated tag in code, thanks Uli.

Last edited by Bloke (2014-10-30 13:52:20)

ingleslenobel · 2014-10-30 13:19:27

Ahhh briliiant, thank gents, appreciated. That should sort me out.

-Johan

ingleslenobel · 2014-10-30 13:44:36

ugh – works, but getting errors – can anyone point me in the right direction with this?

uli · 2014-10-30 13:46:51

<txp:else /> ->  Textpattern Warning: tag does not exist [...]

That error is mostly caused by improper closing of tags. If you’ve copied the code above try altering this here </txp:images /> to this </txp:images>

jakob · 2014-10-30 13:49:11

Both my figure/figcaption macro and milosevic’s can be switched to using txp:variable and txp:if_variable if wishing to avoid the use of plugins. For example milosevic’s would look like this:

<txp:variable name="caption" value="{txt_caption}" />
<div class="photo {pos}"><txp:image id='{img_id}' width="0" height="0" />
<txp:if_variable name="caption" value=""><txp:else />
   <span class="caption"><txp:variable name="caption" /></span>
</txp:if_variable>
</div>

Mine would function similarly:

<txp:variable name="this_img_caption">{caption}</txp:variable>

<txp:if_variable name="this_img_caption" value="SMD_NONE">
  <txp:variable name="this_img_figcaption">
    <figcaption class="caption"><txp:image_info id="{img_id}" type="caption" /></figcaption>
  </txp:variable>

<txp:else />

  <txp:if_variable name="this_figcaption" value="">
    <txp:variable name="this_img_figcaption" value="" />
  <txp:else />
    <txp:variable name="this_img_figcaption">
      <figcaption class="caption">{caption}</figcaption>
    </txp:variable>
  </txp:if_variable>

</txp:if_variable>

<figure class="photo {class}">
  <txp:image id="{img_id}" />
  <txp:variable name="this_img_figcaption" />
</figure>

(here with an additional class attribute)

For inline images, the nice thing about using a macro or form is that you can change how your code is output later as the web develops, e.g. when the srcset tag becomes standard practice, or if you decide to switch to a different lightbox script. For inline images I quite like using a macro rather than output form because it’s more concise and you can pass more information to it than with output_form and yield.

You can do nice things with smd_macro without requiring too much of your content editors. I have one that constructs photosets (image tableaus) in different row configurations from a single tag and two attributes.

ingleslenobel · 2014-10-30 13:49:37

yep, my bad, I had <txp:smd_if_field instead of <txp:smd_if field.

hit self with mallet

Last edited by ingleslenobel (2014-10-30 13:50:11)

ingleslenobel · 2014-10-30 14:47:33

All working now, thanks gents!

trenc · 2014-10-31 09:26:47

yab_image is caption capable.

Textpattern CMS

Textpattern CMS support forum

#1 2014-10-30 12:46:41

A few more option with images plugin?

#2 2014-10-30 13:08:18

Re: A few more option with images plugin?

#3 2014-10-30 13:09:38

Re: A few more option with images plugin?

#4 2014-10-30 13:19:27

Re: A few more option with images plugin?

#5 2014-10-30 13:44:36

Re: A few more option with images plugin?

#6 2014-10-30 13:46:51

Re: A few more option with images plugin?

#7 2014-10-30 13:49:11

Re: A few more option with images plugin?

#8 2014-10-30 13:49:37

Re: A few more option with images plugin?

#9 2014-10-30 14:47:33

Re: A few more option with images plugin?

#10 2014-10-31 09:26:47

Re: A few more option with images plugin?

Board footer