Textpattern CMS

#1 2007-01-18 03:19:50

siempretango

New Member

Registered: 2005-09-27

Posts: 2

Associate an image with a Link

Hi,

I was wondering if anyone had managed to associate an image with a textpattern link (i.e. under the links tab in content). I’d like my links list to have a small graphic/icon next to each external link, but searches for ideas/plugins to enable this haven’t come up with much (probably because searching for “links” and “image” returns tonnes of hits!

I’d rather not embed an [img] tag inside the link description field, as it doesn’t give the same control over formatting.

Thanks in advance,
Ben

#2 2007-01-18 05:48:08

aesop1

Archived Plugin Author

Registered: 2004-09-19

Posts: 142

Re: Associate an image with a Link

I would do this outside of txp as a CSS class utilizing a background image.

In your stylesheet you could have an “external” class like:

.external { background: url(images/external.gif) no-repeat right top; padding-right: 15px; /* you would need to play with the padding */

}

Then you could utilize it like so:

<span class=“external”><a href=”“>My external link</a></span>

or in a txp article form:

<span class=“external”><txp:permlink>My external link</txp:permlink></span>

You would need to make an external link image, of course, and play with the padding to vary the distance from the text. Make sense?

You could also use a selector to automatically identify outgoing links, but that is CSS 3 feature, and well, I’m tired.

Last edited by aesop1 (2007-01-18 06:05:38)

#3 2007-01-18 22:26:58

els

Moderator

From: The Netherlands

Registered: 2004-06-06

Posts: 7,458

Re: Associate an image with a Link

You can add a class to a link (like in Content > Links) like this: TextBook example.
If you meant a clickable icon you can put it inside the <a> tags instead of using a background image.

#4 2007-01-18 22:42:01

aesop1

Archived Plugin Author

Registered: 2004-09-19

Posts: 142

Re: Associate an image with a Link

Sorry, missed the part about TXP links (under the links tab). Still you can make the background image method apply and it will give you a clickable image as well (at least for all practical purposes).

So, there are different ways to solve the problem—with TXP forms or via CSS or both.

Last edited by aesop1 (2007-01-18 22:44:41)

#5 2007-01-22 10:33:37

siempretango

New Member

Registered: 2005-09-27

Posts: 2

Re: Associate an image with a Link

Sorry, on reread I realise I was not clear.

I was thinking about having a different image for each link… I have groups of links under different headings, each link under each heading will have a different image (derived in some manner from what it’s linking to).

By using a css class in the form I would need a form for every link, and a css entry for every link and my presentation>page would need a linklist with a single link for every link.

#6 2007-01-22 15:24:00

els

Moderator

From: The Netherlands

Registered: 2004-06-06

Posts: 7,458

Re: Associate an image with a Link

Ah I see. I don’t see any other option than putting it in the description field. You can also do this:

In the description field just put 1.gif. And in the link form:

<img src="images/<txp:link_description />" />

But I don’t know if that would make any difference regarding your styling control.