escape option usage on txp:image

skewray · 2014-04-28 00:08:51

The txp:image tag has an option for escape=“html”, and the documentation states that this can be used to add a title. Could someone post an example of the syntax I would use to add a title with spaces into a txp:image tag? I have tried some variations without success. As a suggestion, the example should be added to the online documentation.

GugUser · 2014-04-28 01:51:34

skewray wrote #280425:

The txp:image tag has an option for escape=“html”, and the documentation states that this can be used to add a title.

Where is this written in the documentation?

The <txp:image /> tag outputs alt and title attribute values, when you assign this texts to the pictures in the designated fields.

You can also work with txp:images and txp:image_info

skewray · 2014-04-28 01:57:19

here

This link mentions escape, and does not show title or alt as options. On second reading, it appears that maybe escape allows weird characters in title and alt. Still, title and alt do not appear to be available.

GugUser · 2014-04-28 04:00:40

skewray wrote #280427:

Still, title and alt do not appear to be available.

The title and alt attribute will be added if there is content for them. In the image edit page you can see an “Alternate text” field for “alt” and a “Caption” field for “title”.

philwareham · 2014-04-28 12:10:13

Yeah, the title and alt fields are generated from alt field and caption field respectively. Although in Textpattern 4.6 the title tag is removed from images because it’s pointless and just used for SEO keyword stuffing, which is bad. The caption field is now just for proper captions.

The escape="html" attribute is just for if you wanted to usurp the alt or caption field entry for some other use such as providing a URL in a slideshow or lightbox link or whatever – something where the special characters need to be encoded.

GugUser · 2014-04-28 14:15:28

philwareham wrote #280436:

(…) the title tag is removed from images because it’s pointless and just used for SEO keyword stuffing, which is bad.

I use the title attribute to show the caption text in a lightbox, that has nothing to do with SEO.

philwareham · 2014-04-28 15:11:11

GugUser wrote #280442:

I use the title attribute to show the caption text in a lightbox, that has nothing to do with SEO.

Well you shouldn’t, and if the lightbox forces you to do that then I’d recommend using a better lightbox script.

They should use a HTML5 data-* attribute for this kind of stuff, which is designed exactly for that purpose. Or better still the semantic figure and figcaption tags.

Here is the spec for title attributes, note that green advisory text too which pretty much says don’t use this attribute for anything. Screen readers don’t even use it either.

GugUser · 2014-04-28 16:57:53

philwareham wrote #280453:

Here is the spec for title attributes, note that green advisory text too which pretty much says don’t use this attribute for anything. Screen readers don’t even use it either.

Fine. That was new to me and I searched for more information. Among other things, I found this short summary Using the HTML title attribute.

This means, with a view to the future, we need to change the following constructions, for example:

Inside of txp:images:

<a href="<txp:image_url />" title="<txp:image_info />"><img src="<txp:image_url thumbnail="1" />" alt="<txp:image_info type="alt" />" /></a>

Or for abbr with Textile: CMS(Content Management System)

Or inside a external link: "Textpattern(visit the Textpattern site)":http://textpattern.com/

That means, for an image gallerie, each image inside a figure element:

<figure>
<!-- link and image -->
<figcaption><txp:image_info type="caption" /></figcaption>
</figure>

More complicatet this will be with the possibly coming picture element (picturefill).

And what will be with the backward compatibility for external links and abbreviations (abbr) in existing article texts parsed with Textile?

It seems the HTML-world is becoming increasingly more complex.

(…) I’d recommend using a better lightbox script.

Are Magnific Popup or Swipebox bad lightbox scripts because they works with the title attribute? Which would be better?

They should use a HTML5 data-* attribute for this kind of stuff, which is designed exactly for that purpose.

The description in the article doesn’t convince me that this is an appropriate alternative. For example:

What shouldn’t I use data attributes for?

(…) It is clearly stated in the spec that the data is not intended to be publicly usable.

I do not know what to think about all this. At the moment it’s strange for me. But it is certain that we need backward compatibility for older sites.

Gocom · 2014-04-28 19:40:45

Client-side JavaScript libraries tend to be written by non-programmers. The overall quality is mostly comparable to projects written in PHP.

GugUser wrote #280461:

Are Magnific Popup or Swipebox bad lightbox scripts because they works with the title attribute? Which would be better?

Both are configurable and provide an API. In Magnific Popup you can change the caption attribute name, or provide a custom handler:

$('.lightbox').magnificPopup({
    type: 'image',
    image: {
        titleSrc: function () {
            return item.el.attr('data-caption');
        }
    }
});

Swipebox can be fed an array of elements:

$('.lightbox').on('click', function () {
    var images = [];

    $('.lightbox').each(function () {
        images.push({
                href: $(this).attr('href'),
                title: $(this).attr('data-caption')
        });
    });

    $.swipebox(images);
});

philwareham wrote #280436:

The escape="html" attribute is just for if you wanted to usurp the alt or caption field entry for some other use such as providing a URL in a slideshow or lightbox link or whatever – something where the special characters need to be encoded.

The escape attribute has no benefit, but is a legacy mistake and can only open up bag of security issues. You can not use HTML inside attributes, and disabling the escaping creates a potential RCE vector and generates invalid HTML.

GugUser · 2014-05-16 02:42:58

Gocom wrote #280466:

In Magnific Popup you can change the caption attribute name, or provide a custom handler:

The code for Magnific Popup should be (function (item) etc.):

$('.lightbox').magnificPopup({
    type: 'image',
    image: {
        titleSrc: function (item) {
            return item.el.attr('data-caption');
        }
    }
});

alesh · 2017-01-20 14:19:06

philwareham wrote #280453:

… They should use a HTML5 data-* attribute for this kind of stuff …

Say, how do i add a data attribute to an image tag? I need to add data-action="zoom" from inside an image form. Is that a thing?

GugUser · 2017-01-20 14:47:33

The <txp:image /> tag has no form. But you can do it with the <txp:images /> tag (images). Create a form with the code you need. Here is one of my owns (you can adapt it):

<a href="<txp:image_url />" class="zoom" data-caption="<txp:image_info />"><img src="<txp:image_url thumbnail="1" />" alt="<txp:image_info type="alt" />" /></a>

Textpattern CMS

Textpattern CMS support forum

#1 2014-04-28 00:08:51