Alt/caption for image field types

[GwendolenLynch]

Image and imagelist field types should have an additional text field to allow for linked caption/alt text to be associated with the image.

The alt="" has SEO importance and it would be nice to be able to have a caption frame automatically generated for the image that can be styled by the selected/used user theme.

Something like this would be cooler than ice:

fields:
        image:
            type: image
            alt: true
            caption: true

The booleans will give template designers to option to use or ignore.

[GwendolenLynch]

OK, so I just noticed that this is already implemented for imagelist field types. So really the issue/question is solely related to image field types.

[bobdenotter]

If you can specify in your contenttype.yml whether or not you want to have the 'alt' and 'title' fields in the "edite record" screen, that'd be cool to have.

I'd favor 'title' over 'caption', though.. Just to keep it in line with the attributes in the <img> tag.

Is this something you could do, and make a pull-request for?

[GwendolenLynch]

It is, I am still learning the Bolt code base though so any quick pointers would speed this up for me.

Agreed on 'title' too.

[bobdenotter]

If we were to split up the work that needs to be done for this, the following things come to mind:

1. Update app/view/_sub_editfields.twig to edit the form fields that are displayed depending on whether or not 'title' and 'alt' are set. When developing, you can use {{ print(field) }} to dump the current field definition with its properties. These new properties in the .yml file should be available here, without needing to change any other files. Check out how the 'geolocation' and 'video' field types add multiple fields.

2. when storing a posted record, update the image fields. Since they will contain some meta-info, we'll probably need to save them serialized in the database. Just like the 'geolocation' and 'video' field types. Check 'saveContent()' in app/src/Bolt/Storage.php.

3. when retrieving a record, for displaying in a template, we'd need to add some magic to keep the old 'images' working, while at the same time we'd need to be able to access the new fields if available. This might be tricky to get right.. Breaking backwards compatibility should really be avoided if at all possible. I think this could be done either in get() or setValues() in app/src/Bolt/Content.php.

4. Update the documentation. :-)

Let me know if you get stuck. I'll gladly help!

[GwendolenLynch]

You, Sir, are awesome... That is exactly what I need.

I agree about backward compatibility, and is largely why I filed this instead of just trying something myself first. I shall make a start tomorrow morning (GMT) and see where I get to!

[GwendolenLynch]

RFC/TOL
Working through some experiments here and initially I worried using 'title' in the YAML file might be a bit confusing so I looked at the HTML5 spec and noted that there are some attributes that we may or may not want to include in future.

So for the Contenttype part I am thinking something like this:

        image:
            type: image
            attrib: [ alt, usemap, crossorigin ]

Advantage I see to this approach is that if we start from the beginning by using an array of attributes, extending how we implement them in Bolt later on is less painful.

[bobdenotter]

I wonder how useful "usemap" and "crossorigin" would be in this context, though..

[GwendolenLynch]

In current context, "tits on a bull" as we say in Australia. My thought was to do something that was forward compatible with anything that may be introduced into HTML5 that we haven't thought of yet and in turn not have to jump though hoops with Bolt in the future...

Sort of "Why would anyone need more than 640KiB of RAM?" thing

[bobdenotter]

Fair enough! :-)

[GwendolenLynch]

Nitpicks very welcome on that patch... It should be a very clean try albeit any tabs or the like that snuck in.

Obviously documentation will need to be updated, but give it took me 7 weeks to the day to get this done in a couple of hours, I am sure I can remove one more finger from said spot and write that up too :-)

[GwendolenLynch]

Feature submitted in #996

[gpkvt]

The first comment says "Image and imagelist". Am I correct that this feature is available for image-fields only, yet?

At least I can't find a way to enter a title for an imagelist-item (using bolt 2.2.7). Would be nice if this could get added.

[GwendolenLynch]

In imagelists, after you've added them to the list, you can just click on the file name and change that text. I just defaults to the file name.

[gpkvt]

Well that's embarrassing. ;) Thanks!

[GwendolenLynch]

Nah, it's just not obvious… and that popover text in the i could be better

[edanao]

is there by any chance that we could add like a description and a link to the images in the imagelist? :)

[SahAssar]

@edanao If you want more fields in the imagelist you might want to look into making it a repeating field with an image field and the additional fields that you want. So in your repeater you'd have a imagefield, a textfield, a textarea and a field for your link, then it should work pretty much how you want it to.

[edanao]

thank you @SahAssar !!!

[MikSDigital]

Hello!

By the way, is it possible to call alt attribute with this statement:
{{ showimage(post.image, 500,360) }}
?

[SahAssar]

@MikSDigital This issue is 3 years old and that sort of question is probably better for our slack/irc or the discusssion boards, but to answer your question that should work, yes.

[nestordedios]

Hola everyone!!

I know this is an old closed issue but I did not want to open a new issue for something that might be related.

When I use this configuration:

pages:
    ...
    fields:
        ...
        image:
            type: image
            attrib: [title, alt]
        slider:
            type: imagelist
            attrib: [title, alt]
        ...

Bolt 3.3.6 backend looks like this:

For imagelist items I don't have the option to edit alt and title attributes. I can only edit text to be used either as alt or title. In the other hand, for a single image field I can edit both attributes. I'm not the one to say, but maybe this issue needs to be reopened?

I have this issue on Bolt 2.2.22 and Bolt 3.3.6

[GwendolenLynch]

Hey mate. Nope, this is a limitation of imagelists. It would be good to review how we handle fields types more consistently in v4, but for v3 it would break BC.

[nestordedios]

Hey @GawainLynch That's a pitty :(. Then I think using repeater fields is the best way to go for this. Looking forward for those improvements when v4 lands :). Thanks 👍