Image v thumbnails alt

colak · 2023-11-07 06:35:42

One way of rethinking images handling is the issue with the alt tag. At the moment, we only have one such field but thumbnails are not always smaller versions of the uploaded image as txp supports cropping, and the uploading of another thumbnail, out of the box.

Consider the following

Image alt="orange and watermelon"

Thumbnail should be alt="orange"

At the moment, the alt is the same for both.

Bloke · 2023-11-07 18:06:50

Yes. We have discussed this in the past but decided that the number of times it is needed is not worth the additional complexity and database overhead.

The fact that the thumbnail is different from the main image is immaterial. The goal when displaying the image is to view the final full size picture, and that is what the alt tags reflects, regardless of what cropping may have been applied.

The only situation where different alt tags is potentially beneficial is with Art Direction where you’re showing a different or zoomed in/out portion of a main image on devices with a different viewport. That may significantly change what the picture represents and is therefore useful to screen readers and assistive tech to describe the page more accurately. But for regular thumbnails, it really isn’t worth the hassle imo.

colak · 2023-11-08 06:49:04

Couldn’t be solved with unlimited custom fields?

jakob · 2023-11-08 08:30:20

colak wrote #335855:

Couldn’t be solved with unlimited custom fields?

Likely yes. In the meantime, you could use my jcr_image_custom to add a custom field to the images pane that you call thumb_alt, for example.

When the unlimited custom fields make core, I intend to create migration scripts to bring across the custom fields to the new system.

etc · 2023-11-08 11:22:25

Txp has some limited possibility to simulate cf, that you could use here. Define alt as, say,

orange and watermelon|orange

Now you can access its parts as

<!-- orange and watermelon -->
<txp:hide process="1" breakby="|" limit="1"><txp:image_info id="666" type="alt" /></txp:hide>

<!-- orange -->
<txp:hide process="1" breakby="|" limit="1" offset="1"><txp:image_info id="666" type="alt" /></txp:hide>

Actually, wrapping in <txp:hide /> shouldn’t be necessary, but <txp:image_info /> interferes with global attributes (I’ll fix that somehow).

colak · 2023-11-09 05:59:33

etc wrote #335857:

Actually, wrapping in <txp:hide /> shouldn’t be necessary, but <txp:image_info /> interferes with global attributes (I’ll fix that somehow).

Would that mean that we can eventually have the following?

<txp:images id="#,##">
<img src='/images/<txp:image_info type="id" />' 
width='<txp:image_info type="w" />' 
height='<txp:image info type="h" />' 
alt='<txp:image_info process="1" breakby="|" type="alt" />' 
/>
</txp:images>

and

<txp:images id="#,##">
<img src='/images/<txp:image_info type="id" />t<txp:image_info type="ext" />' 
width='<txp:image_info type="thumb_w" />' 
height='<txp:image info type="thumb_h" />' 
alt='<txp:image_info process="1" breakby="|" offset="1" type="alt" />' 
/>
</txp:images>

phiw13 · 2023-11-09 06:15:30

colak wrote #335855:

Couldn’t be solved with unlimited custom fields?

That would be my first and second choice rather than bloat the system with an “alt” alt attribute. That would be limited to a sub-subset of users, while additional custom fields for images benefit all users, for their specific usage. I use Jacobs excellent little plugin to include an author / date and location field.

etc wrote #335857:

Txp has some limited possibility to simulate cf, that you could use here. Define alt as, say,

orange and watermelon|orange...

[…snip…]

Not a fan of this approach as it “pollutes” the field with extra data that may become redundant in the long(er) run. But certainly an interesting exercise in the near infinite possibilities of Textpattern CMS.

Bloke · 2023-11-09 11:23:21

etc wrote #335857:

Define alt as, say, orange and watermelon|orange...

This is interesting and – although slightly off-topic – is something I’ve done on some sites, but with the image Caption field so I can offer attribution.

For example, the caption field might be:

Truck piled high with garbage on the side of a dusty highway | Photo by Steve Buissinne:https://pixabay.com/users/stevepb-282134 from Pixabay

(I’ve taken the quotes out so they’re not Textiled here in the forum, but that would be a Textile link)

Then in my form that displays each image I use a jot of PHP to grab the caption parts into txp:variables, strip the bit after the pipe (if it exists) and siphon it off into an smd_colophon global variable. I could probably ditch some of the PHP and use tags as Oleg suggests above. Hadn’t thought of that. Very clever.

Anyway, my current approach:

<txp:variable name="fullcaption" value='<txp:image_info escape="tidy,textile" />' />
<txp:php>
   global $variable;
   global $smd_colophon;

   $captionParts = explode('|', $variable['fullcaption']);
   $variable['caption'] = trim($captionParts[0]);

   if (!empty($captionParts[1])) {
      $smd_colophon[] = array(
         'name' => parse('<txp:image_info type="name" />'),
         'url' => parse('<txp:image_url />'),
         'source' => trim(parse($captionParts[1])),
      );
   }
</txp:php>

<if::variable name="caption" not value="">
    <figure tag here>
        ...
        <figcaption itemprop="caption">
            <txp:variable name="caption" />
        </figcaption>
    </figure>
<txp:else />
    <figure without caption here>
</if::variable>

That means I can render each image with the various components and then, at the very end of the page (e.g. in the footer) iterate over the $smd_colophon global to output a list of images and their attribution in that particular article.

In this site’s case I put the colophon on a separate page, which is generated using a URL param to fetch the article and parse the images through the form shown above.

This approach keeps everything nice and automated so I can offer dedicated image attribution (or not) on each page by just including the source in the caption.

With image custom fields this would be simpler, as I wouldn’t need to pipe delimit the content.

bici · 2023-11-10 17:26:46

Bloke wrote #335863:

This is interesting and – although slightly off-topic – is something I’ve done on some sites, but with the image Caption field so I can offer attribution.

In this site’s case I put the colophon on a separate page, which is generated using a URL param to fetch the article and parse the images through the form shown above.

That is awesome. Can’t quite get my head around the code but it is cool when I look at the live example on your site.

Textpattern CMS

Textpattern CMS support forum

#1 2023-11-07 06:35:42