Topic: Adding Alt Tags for images
I'm wondering if it's possible to add alt tags for images via JB Pro. The SEO features are great, but from what I understand, Google prefers alt tags over image titles and captions.
Pages 1
You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Pro Support → Adding Alt Tags for images
I'm wondering if it's possible to add alt tags for images via JB Pro. The SEO features are great, but from what I understand, Google prefers alt tags over image titles and captions.
When the 'Add SEO Content' checkbox is selected (in JuiceboxBuilder-Pro's 'Customize -> Sharing' section), the SEO code generated already includes 'alt' attributes in the <img> tags, populated by the image's caption.
Hi-
I've inherited a client with juicebox 1.3.2. There is a requirement for 508 compliance and including alt tags for images is a must. I've set the addSEOContent flag, but no alt tags are generated. There is a caption, so I've got that, but something must be missing. Can you point me in the right direction?
Thanks-
k
When selecting 'Add SEO Content' in JuiceboxBuidler-Pro's 'Customize -> Sharing' section, alt attributes are included in the SEO code's img tags (in the gallery's 'index.html' page) and they are populated by the image captions. Make sure that your image captions (on the 'Images' tab) are not empty.
Hey thanks for your quick reply. I can see what might be the caption text in
<p class="jb-caption-desc">Description</p>in the source. But there is still no alt tag. I also confirmed that addSEOContent flag is set to "true". Is there a separate "caption" property that I need to set? Can you tell me what property is used for the caption?
I should add that they are setting the configs in a file, not by the UI.
The code that you posted is part of the code generated by Juicebox dynamically when the gallery is displayed.
(It is generated by the 'juicebox.js' JavaScript file.)
The code that you posted is not the SEO code which is produced when selecting the 'Add SEO Content' checkbox.
The SEO code can be found by opening the gallery's 'index.html' file in a plain text editor. It will look something like this:
<noscript>
<!-- Image gallery content for non-javascript devices -->
<h1>Gallery Title</h1>
<p>Gallery Description</p>
<p><img src="images/IMG_0678.JPG" title="title #1" alt="caption #1"/><br>title #1 caption #1</p>
<p><img src="images/IMG_0712.JPG" title="title #2" alt="caption #2"/><br>title #2 caption #2</p>
<p><img src="images/IMG_0992.JPG" title="title #3" alt="caption #3"/><br>title #3 caption #3</p>
</noscript>The img tags in the SEO code contain alt attributes populated by the image captions.
Thanks again for your help. I am not using the UI. The config properties are being passed into the juicebox call:
defaults: {
addSEOContent:'true',
backgroundColor: '#222',
shareTwitter: 'true',
shareGPlus: 'true',
navButtonBackColor: '00a8ff',
galleryTitlePosition: 'top'
}
I know the properties are being read but alt tags are not being generated. What property does the js look for to set the caption?
Thanks for your patience...
The 'Add SEO Content' checkbox has no bearing on the code generated dynamically by the 'juicebox.js' file when the gallery is displayed. Alt attributes are not included in the img tags in this code.
What property does the js look for to set the caption?
Captions are displayed in a gallery as long as the captionPosition configuration option is not set to NONE (and as long as captions have been entered for the images).
Hi sorry. Thanks for your patience.
We are using a CMS to grab images, title, description and then passing that info to juicebox. What I need to do in my code is to set the caption to the description I'm getting from the CMS, pass everything to juicebox and then have it output an alt tag for the image with that description/caption. Title and description are already working in separate tags, but I need the description to also appear in the alt tag of the image. Maybe I'm not understanding how this works. How can I get juicebox to output *any* alt tag given the setting above, and given we are not using the UI?
Thanks again for your help. If it's any consolation, the client is also re-buying the license because their previous developer has the old one.
We are using a CMS to grab images, title, description and then passing that info to juicebox.
When you pass information to Juicebox, you would do so using the format of a standard gallery XML file.
What I need to do in my code is to set the caption to the description I'm getting from the CMSA caption would be set within <caption></caption> tags in the XML file.
A complete image entry would look something like this:
<image imageURL="images/image.jpg" thumbURL="thumbs/thumb.jpg" linkURL="images/image.jpg" linkTarget="_blank">
<title>Title goes here.</title>
<caption>Caption goes here.</caption>
</image>, pass everything to juicebox and then have it output an alt tag for the image with that description/caption.
The only img tags that Juicebox outputs are 'behind the scenes' and visible only by a browser's developer tools. It is not possible to change their content as they are generated by the 'juicebox.js' file which is obfuscated and cannot be modified.
I do not understand exactly what you are trying to do. Perhaps you could show me a working example?
You seem to be gathering gallery data dynamically and creating an XML file on-the-fly (rather than using a static XML file) but you have no control over the HTML code that is output when Juicebox parses the XML file and displays the gallery.
Ah ha! We are generating this code dynamically - I think that code snippet gave me enough to try something. We've got <title/> and <description/> but not <caption/>. Will let you know how it goes!
Hi-
Okay here's a live example of the xml my code is generating:
<juiceboxgallery galleryTitle="title of gallery">
<image imageURL="/content/image.jpg" thumbURL="/content/image1.rpath.84.84.MEDIUM.1387232111735.jpg" linkURL="/index.html" linkTarget="_blank">
<title>title image 1</title>
<caption>desc1 <a href="/index.html">link1</a></caption>
</image>
<image imageURL="/content/image2.jpg" thumbURL="/image2.rpath.84.84.MEDIUM.1387232111735.jpg" linkURL="/content/image2.jpg" linkTarget="_blank">
<title>title2</title>
<caption>desdesc2 </caption>
</image>
</juiceboxgallery>Looks like your suggestion, but it's still not generating alt tags. What am I doing wrong?
Where exactly are you looking for 'alt tags'?
Are you referring to 'alt' attributes within the <img> tags (visible only within a browser's developer tools and not visible via the 'view page source' option) generated dynamically when Juicebox displays the gallery?
If so, then, as I mentioned previously, 'alt' attributes are included only in the SEO code (in the gallery's 'index.html' page) and not in the code generated dynamically (by the 'juicebox.js' JavaScript file) when Juicebox displays the gallery.
(This will be addressed for the next version of Juicebox and 'alt' attributes will be added to the dynamically generated code as well as the SEO code in the gallery's 'index.html' page.)
Ah - that's it then. I didn't understand that the SEO content was a separate file. I'll have to wait for the new version. Thank you very much for your help with this! A+ service :).
PS - this is a requirement for accessibility compliance, which in my client's case needs to happen immediately. If there's any way to prioritize this I would be thrilled. Thanks again!
This issue has now been addressed and will be included in the next version of Juicebox.
There is no set release date for the next version of Juicebox-Pro but if you would like to be notified of new releases, please subscribe to our newsletter at the foot of our homepage or follow us on Twitter @JuiceboxGallery.
For anyone reading this thread, please note that this does not affect the functionality of the gallery and the code being referred to can be seen only by using developer tools in a browser (it cannot be seen by viewing the source of the web page).
Juicebox Support Forum → Juicebox-Pro Support → Adding Alt Tags for images
Powered by PunBB, supported by Informer Technologies, Inc.