YaBlo: yab_image: another image plugin for textpattern

yab_image: another image plugin for textpattern

Trencavel am 28. November 2008

Yes, another image plugin for textpattern. :)

What it does

This plugin allows you to display an image with an assigned caption as caption :). The width of the caption will always fits the width of the displayed image.

The problem

In textpattern you have an option to give an uploaded image a caption, but textpattern will show this caption via textile, tag <txp:image /> or html only as title attribute of the image element. This is not a real image-caption aka image-subtitle.

If you want a real image-caption in textpattern so you have to work with different  in your body with textile or with raw html. The next problems are the different widths of the images and the caption (subtitle) below.

Here is an example what I mean:

Example Picture 1 This is a caption with an appropriate width Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Example Picture 1 This is a longer caption and the width could break your layout Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Solution

If you know this problem and you often use or want to use image-captions then maybe yab_image is a solution for you. The example above will with <txp:yab_image /> look like this:

Example Picture 2 This is a longer caption of the image. With yab_image the caption doesn't break your layout.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Usage

You can use this plugin almost the same as <txp:image />. The behavior is a little bit different: If a caption for an image is available and if you want to float the image and the caption, use the align attribute. This will float the image and the caption.

If no image caption is given <txp:yab_image /> works the same as <txp_image />·

F.i.: <txp:yab_image id="5" align="right" />

Additional an alt_caption attribute is available. So you can overwrite an existent caption and display an image with different captions. If you html-escape the captions, use escape="html" as same is as in <txp:image />.

F.i.: <txp:yab_image id="5" align="right" alt_caption="This is a alternative caption" />

Styling

The plugin will create new html elements:

If an image caption is given:
given caption here: This elements will wrap the caption.

And if additionally the attribute align is used:
image+caption, where {align} will be your given align: This span is wrapped around the image and the caption. So you have the ability to set different paddings for different floats.

You can always use the wraptag attribute to wrap all with another html element.
Depending on your usage and used wraptag you have to clear the floats.

As of version 0.3 <txp:yab_image /> will produce (X)HTML-strict output. The align attribute in the image element will be completly removed. So the HTML-markup will be different from <txp:image />.

Download

yab_image_v0.3 plugin
yab_image v0.3 source

Changelog

08-11-28 – v0.1
- release
08-11-30 – v0.2
- added: alt_caption attribute for alternative captions
09-04-08 – v0.3
- removed image align attribute in html markup, so output will be (X)HMTL-strict
- added different css classes for different floats for styling purpose

Textpattern |

Kommentare

# - Basil Carmody schrieb am 30. Dezember 2008, 18:10:

Maniqui, on the TextPattern Forum, gave me the lead to your plug-in yab_image.

I’m new to TextPattern and it is my first plug-in! Thank you very much for having created it.

I don’t find in your write-up of the plug-in the instructions for specifying a normal caption. I only see the alt_caption function.

Could you please tell me the normal way to specify a caption.

Also, I had wanted to put two photos side-by-side, each with its own caption underneath. Is that possible?

Many thanks,

Basil
# - trenc schrieb am 31. Dezember 2008, 12:00:
Hi Basil,

on textpattern normally you can give an image a default caption: Go to content->images-tab then edit your specific image and there under caption you can give the caption. If this image-specific caption is given and not empty so
```
<txp:yab_image id="id of the image" />
```
will use this caption as subtitle by default. If you want to publish this same image but with another caption/subtitle on your page you can use the alt_caption-attribute. But you can always use the alt_caption if you want. Even if the image-specific caption is not set:
```
<txp:yab_image alt_caption="alternative caption here" id="id of the image" />
```
Two images side by side is possible. Use <txp:yab_image /> twice in one line but both with the align-attribute. For instance:
```
<txp:yab_image id="id of left image" align="left" /><txp:yab_image id="id of right image" align="right" />
```
But by using this it’s possible that you have to clear the floating by yourself otherwise the following text will be floated too.
# - Jadii schrieb am 10. April 2009, 15:03:

what you need! thanks
# - Jason Das schrieb am 11. April 2009, 02:50:

Can this be made to work with the default article image rather than inserting the image id in the tag?
# - trenc schrieb am 11. April 2009, 11:00:

Hi Jason,

I’ve answered you in the forum.

./ YaBlo