Images are 1st class citizens of TXP

Bloke · 2010-01-27 03:25:41

As of r3302, images in TXP can now be treated with the same amount of respect as files and links in terms of tag output. There’ll be more to come on this topic as the tags are refined and article (possibly also file & link) images are taken into account, along with a few other goodies.

For now, let it be heard that you can construct fairly in-depth galleries without a plugin. Here’a a rundown of the new tags:

<txp:image_list>: operates as a single or container tag (content can be specified via a Form if you prefer). Its sole job is to grab a list of images for display on your page. It functions very similarly to <txp:file_download_list> and <txp:linklist>. Without a form/container it just outputs hyperlinked images exactly like <txp:image_index />. Attributes:
- id: list of image IDs to grab
- name: list of image names to grab
- category: list of image categories to grab [ id, name and category are cumulative ]
- ~~has_thumb~~ thumbnail: only list images that have thumbnails assigned to them
- label, labeltag, wraptag, break, class, html_id, limit, offset and sort all do their usual thang
- form: specify a Form to use for each image in the list
- ~~thumb=“1”: render the image as a thumbnail instead of the full size image (only useful when used as a single tag)~~

Once you have an image list set up you can then display images using the traditional <txp:image /> and <txp:thumbnail /> tags inside the form/container. Those two tags have been retrofitted with the ability to understand when they are used inside an image_list tag and display the appropriate image.

You my also display other information (alt, caption, category, author, blah blah) using the multi-function tag <txp:image_info />. Traditionally, TXP uses one tag for one piece of information from the database, but there are so many things in the image table that to write tags for every one would be a waste of effort with very little gain. Thus, txp:image_info has the ability to output everything from the table. You can use it to grab each thing one at a time (like a traditional tag) or you can list things to grab all in one go. For example:

<txp:image_list category="holiday_2010">
<txp:image />
<br /><txp:image_info type="caption" />
<br/><txp:image_info type="author" />
</txp:image_list>

and

<txp:image_list category="holiday_2010">
<txp:image />
<br /><txp:image_info type="caption, author" break="br" />
</txp:image_list>

are equivalent.

You can output any of the following image data using the type attribute:

id
name
category
category_title
alt
caption
ext
author
w (image width)
h (image height)
thumb_w
thumb_h
date (timestamp of image upload… this is NOT very useful in this format: see later)

The tag also takes these attributes:

escape: to HTML escape the output, set escape=“html”(which is the default). Use escape="" to turn it off
wraptag, class, break, and breakclass do their usual thing
id: allows you to use the tag outside the image_list tag to just display information about a particular image from its ID
name: allows you to use the tag outside the image_list tag to just display information about the given image from its name

So far so good. But while being able to output things in isolation is very useful there are times when you want a helping hand or a shortcut. This is where the remaining tags come in: they are specialised versions of the image_info tag for dealing with three aspects of images that have quite common formatting methods: the image URL, ~~the image dimensions~~ and the image date.

<txp:image_url /> outputs the URL to the image. As a single tag it spits out the raw, full URL. As a container it automatically creates a hyperlink out of whatever it contains (this could be some info from an image_info tag or any text of your choosing). The tag has the following attributes:
- link: by default this is set to auto which means it will automatically link if the tag is used as a container. You may also explicitly set it to 1 (link) or 0 (don’t link) if you prefer
- ~~thumb=“1”~~ thumbnail="1": to output the URL to the thumbnail instead of the full size image
- id and name allow you to use the tag outside the image_list context

* <txp:image_size /> is a shortcut tag that allows you to display image dimensions more easily. By default it outputs both width and height separated by a space. You may use the following attributes to configure it:
** type: which type of infomation you wish to display. Choose from width or height (or list them both: this is the default)
** thumb="1": display the thumbnail dimensions instead of the full size image dimensions. If the thumbnail dimensions are not available in the database, they will be read from the image thumbnail file itself
** break: what characters to put between the values when outputting more than one type. Default: space [ NOTE: in my original draft, this attribute was called join. I thought break would be more familiar to everybody BUT thinking about it further, it doesn’t work the same way as a traditional break attribute (i.e. it doesn’t render an HTML tag). So should it be renamed back to join? Or something else? ]
** as_html: output the image dimensions as an HTML width="X" height="Y" pair that may be embedded directly in an <img> tag

<txp:image_date /> simply allows you to display the date in a variety of ways. It takes a format attribute that works in the same way as <txp:posted />. By default it displays the date in the format set in your Archive Date Format preference. You may also use this tag outside the image context by employing one of either the id or name attributes.

<txp:if_thumbnail> rounds things off. This conditional allows you to take action inside your image_list tag only if the current image has a thumbnail or not

So there you have it. Please please please take this SVN version for a spin and see how it performs. If there are any silly assumptions I’ve made or the default options could be better, NOW is the time to speak up.

Happy imaging.

Last edited by Bloke (2010-03-16 10:54:02)

MattD · 2010-01-27 04:36:53

Can it be used with article images?

Bloke · 2010-01-27 09:00:49

MattD wrote:

Can it be used with article images?

In what way would you expect to use it? Got any examples I can swing off? Technically, article_image is designed to only hold one image so how would you make a list out of it?

For now I’ve deliberately sidelined article_image until I can clearly figure out some use cases for it. Also, I figured that when (or if) we introduce link_image and file_image would be a good time to think about it all! In the meantime, if you have any ideas on how it can be used, please let me know so I can put my thinking wings on. Cheers.

PascalL · 2010-01-27 09:02:29

Woaw! very complete! thanks Bloke for your excellent work!

Gocom · 2010-01-27 09:07:00

MattD wrote:

Can it be used with article images?

Why not. Even without looking at the actual source code, you can see that it atleast has id attribute. EqualsToAwesomeArticleImageWhyAmITalkinLikeThis.

Bloke wrote:

For now I’ve deliberately sidelined article_image until I can clearly figure out some use cases for it. Also, I figured that when (or if) we introduce link_image and file_image would be a good time to think about it all! In the meantime, if you have any ideas on how it can be used, please let me know so I can put my thinking wings on. Cheers.

The tag has ID. If you ask me, leave article image as it is ;) No need to bloat the core for an alias.

Last edited by Gocom (2010-01-27 09:09:56)

els · 2010-01-27 11:37:29

Wow. Speechless. This is great, Stef :) (I feel a strong urge to rebuild a complete site… but no, I’ll wait until images have custom fields ;) )

Bloke wrote:

break: … So should it be renamed back to join? Or something else?

join is not a familiar term for most users. I agree that break has a different meaning here than in all other tags, but will that be a problem? It seems pretty obvious. If you still think it should be replaced, what about separator?

ruud · 2010-01-27 11:52:08

Bloke wrote:

break: what characters to put between the values when outputting more than one type. Default: space [ NOTE: in my original draft, this attribute was called join. I thought break would be more familiar to everybody BUT thinking about it further, it doesn’t work the same way as a traditional break attribute (i.e. it doesn’t render an HTML tag). So should it be renamed back to join? Or something else? ]

“break” in other tags doesn’t necessarily output a HTML tag. It can output a comma as well.
You can avoid the entire discussion, by simply limiting the tag to output just one dimension (unless the as_html feature is used).

nardo · 2010-01-27 13:05:57

have a situation right now where I need to check if the article image has a thumb (so that lightbox code can be added – or not) … i.e. if thumb exists, wrap anchor tags with rel="lightbox" … else display image

update did this with smd_gallery – populated a variable with {hasthumb} value and checked against it!

Last edited by nardo (2010-01-27 13:49:12)

maniqui · 2010-01-27 13:09:12

Gocom wrote:

The tag has ID. If you ask me, leave article image as it is ;) No need to bloat the core for an alias.

But how do you do to feed the value(s) inserted on article_image field to image or image_list?

the_ghost · 2010-01-27 13:29:32

nardo wrote:

have a situation right now where I need to check if the article image has a thumb (so that lightbox code can be added – or not) … i.e. if thumb exists, wrap anchor tags with rel="lightbox" … else display image

Can this work?

<txp:variable name="if_thumb"><txp:article_image thumbnail="1" /></txp:variable>
<txp:if_variable name="if_thumb">
  Yes, we have thumb
</txp:if_variable>

Bloke · 2010-01-27 13:44:06

maniqui wrote:

But how do you do to feed the value(s) inserted on article_image field to image or image_list?

Ah right. I see the issue. If you want to get at the extra info for an image in the article_image field you need to be able to output its ID (or name) so it can be injected into the relevant tag, e.g.:

<txp:image_info id='<txp:article_image show_me_the_damn_id="1" />' type="caption, alt" break="br" />

Hmmm, anyone have any good ideas here? Keep in mind that there may (empahsis) be a file_image and a link_image in future too.

ruud wrote:

limiting the tag to output just one dimension (unless the as_html feature is used).

A good suggestion. I was trying to reduce the number of times you’d need to call the tag if you wanted to output, say, Size: 1024x768. So:

<txp:image_size break="x" /> [ 1 DB call ]

instead of:

<txp:image_size type="width" />x<txp:image_size type="height" /> [ 2 DB calls ]

or:

<txp:image_info type="w" />x<txp:image_info type="h" /> [ 2 DB calls ]

Without the ability to output both dimensions at once it seems a bit overkill to have a tag kept just for the as_html attribute. Perhaps the tag could just have id/name/thumb attributes so it merely always outputs the HTML-ised dimensions. Then, if you want any finer control, use image_info instead. Does that make more sense?

Last edited by Bloke (2010-01-27 13:45:17)

nardo · 2010-01-27 13:51:36

didn’t seem to work! but I did something similar with smd_gallery that can return a 0 or 1 against a query ‘has thumb?’

thank you!

the_ghost wrote:

nardo wrote:

have a situation right now where I need to check if the article image has a thumb (so that lightbox code can be added – or not) … i.e. if thumb exists, wrap anchor tags with rel="lightbox" … else display image

Can this work?

<txp:variable name="if_thumb"><txp:article_image thumbnail="1" /></txp:variable>
<txp:if_variable name="if_thumb">
  Yes, we have thumb
</txp:if_variable>

Textpattern CMS

Textpattern CMS support forum

#1 2010-01-27 03:25:41

Images are 1st class citizens of TXP

#2 2010-01-27 04:36:53

Re: Images are 1st class citizens of TXP

#3 2010-01-27 09:00:49

Re: Images are 1st class citizens of TXP

#4 2010-01-27 09:02:29

Re: Images are 1st class citizens of TXP

#5 2010-01-27 09:07:00

Re: Images are 1st class citizens of TXP

#6 2010-01-27 11:37:29

Re: Images are 1st class citizens of TXP

#7 2010-01-27 11:52:08

Re: Images are 1st class citizens of TXP

#8 2010-01-27 13:05:57

Re: Images are 1st class citizens of TXP

#9 2010-01-27 13:09:12

Re: Images are 1st class citizens of TXP

#10 2010-01-27 13:29:32

Re: Images are 1st class citizens of TXP

#11 2010-01-27 13:44:06

Re: Images are 1st class citizens of TXP

#12 2010-01-27 13:51:36

Re: Images are 1st class citizens of TXP

Board footer