Textpattern Forum

You are not logged in. Register | Login | Help

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 5,905
Website

Images are 1st class citizens of TXP

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)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern.

Txp Builders – finely-crafted code, design and Txp

Offline

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

MattD
Plugin Author
From: Monterey, California
Registered: 2008-03-21
Posts: 1,188
Website

Re: Images are 1st class citizens of TXP

Can it be used with article images?


My Plugins

Piwik Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 5,905
Website

Re: Images are 1st class citizens of TXP

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.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern.

Txp Builders – finely-crafted code, design and Txp

Offline

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

PascalL
Member
From: Switzerland
Registered: 2009-03-09
Posts: 132
Website

Re: Images are 1st class citizens of TXP

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

Offline

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

Gocom
Developer
Registered: 2006-07-14
Posts: 4,476
Website

Re: Images are 1st class citizens of TXP

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)


Rah-plugins | What? I’m a little confused… again :-) <txp:is_god />

Offline

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

Els
Admin
From: The Netherlands
Registered: 2004-06-06
Posts: 7,388
Website

Re: Images are 1st class citizens of TXP

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?


<txp:Els /> ;)
Tag Reference | Unexpected behaviour? Check the tag trace | Still no clue? Check the names of your custom fields

Offline

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

ruud
Developer emeritus
From: a galaxy far far away
Registered: 2006-06-04
Posts: 4,513
Website

Re: Images are 1st class citizens of TXP

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).

Offline

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

nardo
Member
From: tuvalahiti
Registered: 2004-04-22
Posts: 739

Re: Images are 1st class citizens of TXP

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)

Offline

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

maniqui
Moderator
From: Buenos Aires, Argentina
Registered: 2004-10-10
Posts: 2,989
Website

Re: Images are 1st class citizens of TXP

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?


La música ideas portará y siempre continuará

TXP Builders – finely-crafted code, design and txp

Offline

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

the_ghost
Plugin Author
From: Minsk, The Republic of Belarus
Registered: 2007-07-26
Posts: 907
Website

Re: Images are 1st class citizens of TXP

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>

Providing help in hacking ATM! Come to courses and don’t forget to bring us notebook and hammer! What for notebook? What a kind of hacker you are without notebok?

Offline

Board footer

Powered by FluxBB