Associating images to links

Destry · 2010-01-21 20:20:32

I’m finding it interesting to use link lists to handle different kinds of microcopy, but one place I’ve hit a wall is in those cases where the microcopy needs an image associated to it.

I’m wondering if there’s a way to associate an image to individual links (Content > Links), just like you can do with associating one with an article.

I’ve given the last 30 minutes thinking how I might fandangle that with conditionals, but I don’t think it’s possible as I need to have an individual image associated to in individual link in each case. I could do this manually, of course, but where’s the thrill in that? :)

If that’s not possible, it sure would be nice. I can imagine an image ID field in the link create/edit view of the Links tab for adding the value as expected.

thebombsite · 2010-01-21 21:51:23

If my memory serves Destry, you can add images to the link description but I can’t remember if it will take a TXP tag or it needs a standard XHTML “img” tag. You may also need to change the “escape” attribute setting for the link_description.

Last edited by thebombsite (2010-01-21 23:31:26)

els · 2010-01-21 23:19:31

The link description field can contain either an html tag or a txp tag, and you should use escape="" in the link_description tag. You’ll need to know the name, location or id of the image, and type the entire tag.

Here’s another wild experiment ;)

Upload the image in the Files tab, and enter the URL in the description field. To display, use something like this:

<txp:file_download_list category="images">
   <a href="<txp:file_download_description />"><img src="<txp:site_url />files/<txp:file_download_name />" /></a>
</txp:file_download_list>

thebombsite · 2010-01-21 23:31:10

Blimey. Do you get out much Els?

els · 2010-01-22 00:04:36

Too wild for you? ;) (no, but I probably should…)

maniqui · 2010-01-22 01:04:55

Although clever, Els’s wild experiment may not fit Destry requirements, as it seems he wants to associate a TXP managed image (Content -> Images) to a TXP-managed link (Content -> Links), a request that has been made a few times in the past.
The trick is how to relate a link to an image, so when outputting a list of links, the proper image is rendered for each link.

I wonder if this another wild experiment would work (needs upm_image plugin).

1. Upload the image in the Image tab. On the image name (a field that I think is barely used), put the URL that image is related to. For example: http://www.awebsite.com

2. Create a link on Links tab.

Then, use this form to fetch the corresponding image for a link.

<txp:linklist>
<txp:upm_image image_name='<txp:link_url />' />
...more link related tags here...
</txp:linklist>

The trick (if it works…) is based on the ability of upm_image to fetch an image by image’s name (have never tested that feature, but it’s documented on plugin’s help).

jsoo · 2010-01-22 01:55:08

Then you lose access to the link’s title and description.

Short of coming up with a plugin to do this, I think using articles is the most versatile solution. You have title, body, and excerpt to use in place of title, URL, and description, and of course you have the article image field.

maniqui · 2010-01-22 02:42:01

Then you lose access to the link’s title and description.

No, you don’t.

Going with articles is probably the most flexible option, although it feels like cheating TXP.

jsoo · 2010-01-22 03:03:45

Right, I wasn’t paying very close attention! Note that with Julián’s solution you can also use plain old image, which also allows fetching an image by name.

maniqui · 2010-01-22 03:29:06

You are right, Jeff. No need for upm_image, unless very specific markup is needed.

Destry · 2010-01-22 10:22:36

Wow…you guys are awesome!

Hmm, options.

FOLLOW-UP:

Well, as Julian understood and seems to agree, the ideal solution would be a new core feature (via an image ID field in the links create/edit view).

I had, of course, thought of using articles, but using Articles for managing microcopy (2-3 sentences max) seems overkill. Likewise, though it wasn’t mentioned, I want something more dynamic than “static” forms (hand-created blocks of special-purpose content).

Aside from that, it seems I can:

use the image description field to add the markup there (Stuart)
experiment with using the Files functionality (Els)
experiment with using the link destination in the image “name” field (Julian)

I think I like the idea of putting the tag in the description. I’ll give that a go first. I would rather not use other features in ways they were not intended, even if it does work. I think this just adds confusion to long-term maintenance. And if I can avoid installing a plugin not already installed, that would be good to, so requesting a plugin for this is not my ideal approach either.

Another thing I considered doing, similar in idea of adding a Twitter stream, was using Posterous for microcopy and inserting the Posterous stream. In fact I really liked this idea because Posterous is pretty cool; everyting you post can be done directly via email (text, images, videos, sound files, pdf…) and Posterous will auto-format the content in the best-most minimal way possible for web presentation. You can even refine presentation yourself with your own styles. Ultimately I opted out of Posterous (for the time being) because the widget for use on your site is from a third-party that you also have to register with, and that seems a bit extreme. However, Posterous is coming out with their own API, and that should result in developers coming up with some pretty cool stuff, eliminating third-party registering.

Though, if it could be done elegantly in Txp itself, that would be nice too.

A MODEL FOR FUTURE CORE?

Microcopy can be a lot of things, and you’ll see it used in reference to web form help dialogue, error messages, status responses, process instructions (e.g., a checkout process), marketing quips…or in the sense I’m proposing here, for short copy used in columns. In this latter case, link lists would work very well, and when images are needed, definition lists <dl> are probably the most semantic/logical structure.

A possible scenario…

One I’m playing with now involving images (thus my initial question) is an “I’m reading” list, where the current two books a person is reading are shown on the home page. Data for each item includes a title link, thumbnail image (book cover), and very brief description. A category for these links, e.g., might be “read-list”.

Using definition list, the link form might be:

<dl id="link-list reading">
<dt><txp:link /></dt>
<dd><txp:link_image /></dd>
<dd><txp:link_description /></dd>
</dl>

The second <dd> in the code above, of course, holds a Txp tag that doesn’t exist, but which could be useful here.

The Links panel in Content > Links might have a new field (under the URL field?) called “Link image” for the image ID to be entered (just like for articles).

Advantages…

This kind of architecture has the following advantages:

No plugins.
Fields are used as they are intended.
The need for HTML class selectors is reduced (though still easily used in the Form’s <dl> structure as desired).
CSS is a bit more intuitive/cleaner as a result of a more semantic structure.

Additional considerations…

There might even be another field if other kinds of microcopy link lists are imagined ahead of time, and thus data accounted for. For example, maybe you want a mini Events block showing a title, thumbnail (banner ad for the event), date and description for each event, in which case maybe a Date field is needed to reflect the date(s) of the events.

<dl id="link-list conferences">
<dt><txp:link /></dt>
<dd><txp:link_image /></dd>
<dd><txp:link_event_date /></dd>
<dd><txp:link_description /></dd>
</dl>

Note: I suggested “link_event_date” to avoid any confusion just “link_date” would create (suggesting the date of the link’s creation, perhaps).

IN THE MEANTIME

I’ll probably go with putting the image in the description, and target the CSS to a class on the single <dd> so I can control the presentation of the thumbnail and text in relation to each other sharing the same element.

<dl id="link-list reading">
<dt><txp:link /></dt>
<dd class="image-desc"><txp:link_description escape="" /></dd>
</dl>

We’ll see how it goes.

Bloke · 2010-01-22 10:58:42

Destry wrote:

Posterous is coming out with their own API

Or, if one of the output streams is XML… :-)

<dd><txp:link_image /></dd>

I’ve done file_image before and it’s pretty handy. Not a major stretch to do link_image too. Opens up the possibility of plugins to do stuff with them (e.g. thumbnail preview… something I’ve also done on occasion, btw).

a mini Events block showing a title, thumbnail (banner ad for the event), date and description for each event, in which case maybe a Date field is needed to reflect the date(s) of the events.

You could perhaps manipulate the existing date field using, I dunno, smd_query or something to be the date of the incoming event. Depends if you need two dates or not.

Textpattern CMS

Textpattern CMS support forum

#1 2010-01-21 20:20:32

Associating images to links

#2 2010-01-21 21:51:23

Re: Associating images to links

#3 2010-01-21 23:19:31

Re: Associating images to links

#4 2010-01-21 23:31:10

Re: Associating images to links

#5 2010-01-22 00:04:36

Re: Associating images to links

#6 2010-01-22 01:04:55

Re: Associating images to links

#7 2010-01-22 01:55:08

Re: Associating images to links

#8 2010-01-22 02:42:01

Re: Associating images to links

#9 2010-01-22 03:03:45

Re: Associating images to links

#10 2010-01-22 03:29:06

Re: Associating images to links

#11 2010-01-22 10:22:36

Re: Associating images to links

#12 2010-01-22 10:58:42

Re: Associating images to links

Board footer