Forums

Articles
Create
cancel
Showing results for 
Search instead for 
Did you mean: 

How to assign alt text to an image thumbnail?

Justin Stockton March 25, 2019

I'm stumped on how to go about assigning alt text to an image that I want displayed as a thumbnail. I would expect the following bit of code to display the image as a thumbnail with the text defined in the alt attribute on the image itself.

!cartman-authority-badge.png|thumbnail,alt=Cartman as cop - 'respect my authority' round badge! 

I've tried putting the alt text in quotes and switching it with the thumbnail attribute, but not matter what I try, the image is still rendered as

<img alt="cartman-authority-badge.png" src="https://paciellogroup.atlassian.net/secure/thumbnail/38624/cartman-authority-badge.png?default=false" class="">

Any ideas?

1 answer

1 vote
Andy Heinzer
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
March 27, 2019

Hi Justin,

I found a related thread about this over in https://community.atlassian.com/t5/Confluence-questions/Setting-image-title-and-alt-text-in-Confluence-4-WYSIWYG-editor/qaq-p/361827 that I think will help.  Granted this was for Confluence server and from 2011, but I think we can still try these steps in Jira Cloud versions today.

It looks like the syntax needs to be

!test.jpg|thumbnail|alt="Test Alt Text",title="Test Title Text"!

Note the pipe character | after the thumbnail attribute.   However even in my testing, it doesn't look like the alt tag is being pushed to the <img> tag in the HTML.  Instead only the title attribute appears to be working for Jira Cloud.

Does this title tag help as a substitute for the alt tag there?  I know it is not technically the same thing, but depending on your use case here I am interested to learn if this might suffice.

Andy

Justin Stockton March 27, 2019

@Andy HeinzerI just tested this by changing the comma after the thumbnail attribute in my example to a pipe |, and when I saved the change neither the thumbnail nor the alt attribute were applied to the image; e.g.

!cartman-authority-badge.png|thumbnail|alt=Cartman as cop - 'respect my authority' round badge!

Results in:

<img src="/secure/attachment/38624/38624_cartman-authority-badge.png" style="border: 0px solid black">

I played around with a few different scenarios and discovered that, even though with the pipe I can't get the thumbnail to display, Jira will rendered whatever the 2nd attribute is on the image. So

!cartman-authority-badge.png|thumbnail|title="I am a title",alt="I am the alt"!

Renders as,

<img src="/secure/attachment/38624/38624_cartman-authority-badge.png" alt="I am the alt" style="border: 0px solid black">

And:

!cartman-authority-badge.png|thumbnail|alt="I am the alt",title="I am a title"!

Renders as,

<img src="/secure/attachment/38624/38624_cartman-authority-badge.png" title="I am a title" style="border: 0px solid black">

Seeing the pattern, I found that if I put an empty comma between the pipe and the first attribute then I can get all of the attributes to pass through.

!cartman-authority-badge.png|thumbnail|,alt="I am the alt",title="I am a title"!

Renders as,

<img src="/secure/attachment/38624/38624_cartman-authority-badge.png" alt="I am the alt" title="I am a title" style="border: 0px solid black">

So if I can just figure out how to get the thumbnail to actually apply itself now, I might have a workaround.

Like Metin Savignano likes this

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events