This is a bug that still exists in the new editor. It is yet to be fixed. In the updated editor, when a caption is added to an image using the 'Add Caption' feature, the image will not be clickable, or linked. The bug is so obvious with the way it is coded. Few lines are misplaced. There's a quick fix to this, rearrange three lines from the image's HTML.
Check out the following two images. Both of them have captions added. The first one is the default setting, without the fix, so the image is not clickable. The second one has the fix applied, so it is clickable.
 |
| Caption added, not fixed, cant click. |
 |
| Caption added, fixed, clickable. |
When you have uploaded an image using compose mode, when you click on Edit HTML, this is how the image's HTML would look like. I will use the above image's example.
But of course, it'd be a pain in the neck to do this one by one if you have lots of images. Well, just hope so that Blogger team will fix this bug soon.
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"> <img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijySHC4ZbB1lfgg_nePc9RiN2aFbsyQQqCEn9jghK8BgPTvL-FU37UHY5MockbusJTzqhAL4XIe2pOr0jm02yYK-ojS-D9dWoNXfhgSGCzaa-bm91vxZi4TPS34Pai-fKl1IOp0L7Bo8dv/s320/ssv2.jpg" style="margin-left: auto; margin-right: auto;" width="320" /></td></tr> <tr><td class="tr-caption" style="text-align: center;">Caption added, fixed, clickable.</td></tr></tbody></table> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijySHC4ZbB1lfgg_nePc9RiN2aFbsyQQqCEn9jghK8BgPTvL-FU37UHY5MockbusJTzqhAL4XIe2pOr0jm02yYK-ojS-D9dWoNXfhgSGCzaa-bm91vxZi4TPS34Pai-fKl1IOp0L7Bo8dv/s1600/ssv2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" </a></div>What you have to do is, reposition the last four tags, which is <div ...> <a href ..> </a> </div>. I have highlighted these misplaced lines in the above code, namely lines 4, 5, and 6. See below to have a look at the fixed code. I have highlighted the new position of the misplaced lines, you can see them at lines 2, 3 and 5. Reposition them and you're good to go.
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijySHC4ZbB1lfgg_nePc9RiN2aFbsyQQqCEn9jghK8BgPTvL-FU37UHY5MockbusJTzqhAL4XIe2pOr0jm02yYK-ojS-D9dWoNXfhgSGCzaa-bm91vxZi4TPS34Pai-fKl1IOp0L7Bo8dv/s1600/ssv2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijySHC4ZbB1lfgg_nePc9RiN2aFbsyQQqCEn9jghK8BgPTvL-FU37UHY5MockbusJTzqhAL4XIe2pOr0jm02yYK-ojS-D9dWoNXfhgSGCzaa-bm91vxZi4TPS34Pai-fKl1IOp0L7Bo8dv/s320/ssv2.jpg" style="margin-left: auto; margin-right: auto;" width="320" /> </a></div> </td></tr> <tr><td class="tr-caption" style="text-align: center;">Caption added, fixed, clickable.</td></tr> </tbody></table>
But of course, it'd be a pain in the neck to do this one by one if you have lots of images. Well, just hope so that Blogger team will fix this bug soon.
Hi there,
ReplyDeleteHow do I NOT allow my photos on my blog to be clickable which opens in a seperate window enlarged, how do i stop that?
Please and thank you.
Also.. here is my blog, thesearethegoldendays.blogspot.ca I'd like to get rid of that boarder that has my "A note from me to you" and put that on the left hand side of the blog instead of the top. I want it to be clean and simple looking. I also want to get social icons up, such as instagram, twitter, pinterest but i will try one of your tutorial for that one, and i'd like some advice on how to get a contact form, and to approve comments before posted as well. Thanks so much
ReplyDeleteYou can use custom scripts to prevent right clicks. As these are third party scripts, I can't single out any one source that will work for you. I suggest you Google for 'No Right Click Blogger' or something along that line to find for the script. You'll find plenty, see which one works for your template.
DeleteAs for your navigation links, I suggest you head over to your Template Designer - Layout, and choose a layout that has a left sidebar. Next, go to your Layout page, and drag your Pages gadget to your left sidebar.