div” container and hyperlinked so that clicking on them starts a slideshow of the page’s images. Captioned images are wrapped in a table. The user doesn’t need to know any of this since it’s done for them behind the scenes.
Good practice dictates that images have “alt” attributes assigned to them. The “alt” attribute is used in HTML and XHTML documents to specify alternative text (a.k.a. alt text) that is to be rendered when the element to which it is applied cannot be rendered. It is also used by “screen reader” software so that a person who is listening to the content of a webpage (for instance, a person who is blind) can interact with this element. Another attribute commonly used is “title.” Assigning this attribute allows for a pop-over to appear when the mouse pointer is hovering over an image. This can be useful way to provide supplemental information or context about the image that the author feels isn’t important enough to include as a caption.
You should immediately see the title text appearing in an unformatted manner after your images providing you had set title attributes in the images’ properties.
Enable the gadget for mobile users
We want this gadget just for mobile users, but ironically, the gadget is probably disabled in the mobile template. We can fix this by first ensuring the mobile template is enabled. Go to the “Template” link as shown below.
Click on the gear icon under the mobile template. Choose “Yes. Show mobile template on mobile devices.” and click the “Save” button. Click on the “Edit HTML” button for the main template. This will show you the raw HTML code for the template. Don’t be scared! Scroll down all this gobbledygook to the bottom and look for the gadget by scanning for the “Mobile Image Captions” title you gave the gadget.
mobile='yes'into the tag:
Click “Save template” and then “Back.” This will enable the gadget for both templates.
Format the caption
We now need to edit the template’s style sheet to format the caption. Click on the Template link (shown in the image above) and click on the “Customize” button. Click on “Advanced” and “Add CSS” on the Blogger Template Designer:
Scroll to the bottom of the “Add custom CSS” window (assuming there’s something there already) and copy and paste the following:
This will not only format the caption, but it will also hide it for the non-mobile users. You can see what mobile browsers will display by adding
?m=1to the url of a blog entry in the browser window.
Only use the gadget on mobile template
This final step is optional, but you can go back into the raw template HTML and change the mobile parameter to
mobile='only'to enable the gadget only for the mobile template:
mobile='only'parameter is switched back to
I’m including this information for reference in case anyone wants to better understand how this works. Images inserted through the Blogger rich text web interface are automatically wrapped in a
<div>block and hyperlink:
Images with a caption are wrapped in a table:
captionizeImages()finds all of the images on the page and adds a caption providing the following conditions are met:
- It’s wrapped in a
<div>block whose class is “separator” or in a table whose class is “tr-caption-container.”
- It has a “title” attribute that contains at least one non-whitespace character.
The title text is appended below the image in nested
<div>blocks. A check is made to ensure the caption blocks are added after the hyperlink and not inside. It’s possible that a user might dig into the HTML source to remove the hyperlink if he or she wishes to add an image, but does not desire for it to be part of a click-able slideshow. The script will accommodate this choice.