How to refer to uploaded images

MixedContent · 2012-02-28 03:19:05

When I upload an image, “foo.jpg”, how do I refer to this image 1. in an article or 2. in a page template? Maybe the answer is the same, but I do need to know how to display an image in the header of a page, next to the site name and pithy slogan. I know how to do the html and the css, but I need the image’s (apparent) location too.

At one point, it looked as if the answer would be << src=”/images/foo.jpg”>>, but that doesn’t seem to work for the image I uploaded — the alt text is displayed instead.

If this is in the doc, please point me at it, because maybe there’s other stuff I should know from there too.

maruchan · 2012-02-28 05:11:22

I was feeling in a video mood, so I made a video. Have a look: Accessing image tags in Textpattern

Last edited by maruchan (2012-02-28 05:11:33)

MixedContent · 2012-02-28 05:37:11

Thanks. I’m sort of a text guy myself when it comes to tech info, but I suppose mileage varies.

At about 0:54, you say, “…you can look those up if you like…” Which leaves me wondering where I can look those up. Is what you related in the video written in the doc somewhere, or is this purely a bardic tradition?

maruchan · 2012-02-28 05:53:10

I think it was bardic until you came along with that “bardic” comment. :-) I’ve updated the wiki with that information. “Escape HTML” is just a guess for now until we can check with someone who knows more about that feature. I thought it was meant to replace certain characters with HTML escape characters, but I couldn’t get it to work.

Last edited by maruchan (2012-02-28 06:01:12)

els · 2012-02-28 20:37:14

Marc, I think it’s a good idea if you add a link to your video on that wiki page. There are too many videos out there that are hard to find…

“Escape HTML” is just a guess for now until we can check with someone who knows more about that feature. I thought it was meant to replace certain characters with HTML escape characters, but I couldn’t get it to work.

Aside: in this context the escape attribute is only relevant for the Textpattern tag, not for the Textile link or HTML tag of course.

I’ve had trouble figuring out the use of the escape attribute too. It’s mostly useful when you want to display the alt and/or caption fields as text, and are using HTML tags in those fields. Outside of this use, it’s always a bit awkward to use HTML there.
Here is an example of the output of the <txp:image /> tag in both cases when you have this in the image caption field:

One & Two<br />& Three

escape="html" (default value) in the <txp:image /> tag shows the title attribute’s value in the generated HTML img tag as follows in the source code:

title="One &amp; Two&lt;br /&gt;&amp; Three"

With escape="" it becomes:

title="One & Two<br />& Three"

In both cases the title, when hovering over the image, will be shown as One & Two<br />& Three.

Now if you’d want to display the caption field as text on your page (using <txp:image_info type="caption" />), with escape="" you would get the desired output:

One & Two
& Three

and with escape="html":

One & Two<br />& Three

The tricky thing here is to remember to add escape="" explicitly, because html is the default value.

And I just noticed that the tag builder doesn’t work as expected for the <txp:image /> tag: no matter whether you choose empty or html for escape, the attribute is not added to the generated tag.

Last edited by els (2012-02-28 20:40:32)

Bloke · 2012-02-28 21:58:28

Els wrote:

I just noticed that the tag builder doesn’t work as expected for the <txp:image /> tag

Well spotted. As it happens I’ve been doing a trawl of the tag builder code this week, fixing it up with the latest attributes and things so I’ve just fixed the image tag too.

I’ll roll it into core in the next few days. Thanks.

Last edited by Bloke (2012-02-28 21:58:52)

els · 2012-02-28 22:31:25

OT: Stef, did you secretly write a plugin for this forum that pings you every time someone writes ‘doesn’t work as expected’? ;)

Bloke · 2012-03-04 02:07:07

Tag builder updates have landed including the (slightly more convoluted than expected) fix for the escape attribute.

escape="" now shows up correctly if you choose the empty value. In the past, any empty attribute was omitted (and in fact escape wasn’t even included in the image tag, but that was an oversight). Now we have the option to specify that some empty items are to be included in the tag output if we wish. There might have been a more elegant way round it, but I think this version works for all cases I tried and should allow us to do something similar if the need arises in future tag attributes.

Please test, thanks.

And [OT] Els: no plugin required. I’m plugged directly into the ether. In fact, I regularly download the entire Internet to my brain and sift through it during downtime while asleep. A bit like Johnny Mnemonic I guess, but without the atrocious acting and rubbish screenplay ;-)

hilaryaq · 2013-02-28 17:46:45

Is it possible to generate the code snippet for a thumbnail in the same way the code snippet for full size image is generated? Always found it weird that you you couldn’t click a dropdown like ‘full-size image’ ‘thumbnail’ and depending on your choice either <txp:thumbnail or <txp:image was given to you to copy and paste!

Textpattern CMS

Textpattern CMS support forum

#1 2012-02-28 03:19:05

How to refer to uploaded images

#2 2012-02-28 05:11:22

Re: How to refer to uploaded images

#3 2012-02-28 05:37:11

Re: How to refer to uploaded images

#4 2012-02-28 05:53:10

Re: How to refer to uploaded images

#5 2012-02-28 20:37:14

Re: How to refer to uploaded images

#6 2012-02-28 21:58:28

Re: How to refer to uploaded images

#7 2012-02-28 22:31:25

Re: How to refer to uploaded images

#8 2012-03-04 02:07:07

Re: How to refer to uploaded images

#9 2013-02-28 17:46:45

Re: How to refer to uploaded images

Board footer