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;">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.
<img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjTZ0Et7aPraVwk3A1SmjXpmZiHHRBg6xFK9jd1WDgf9BD1nvc_FPCPtq0zYZtyMMlMSDjKcvj7AAUuf91fqhFTPDTHLEekyJaxLPJsRKwQq_aMNYmk54Rt84VlIEkKzKL9-neOVanoV_T/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/AVvXsEjjTZ0Et7aPraVwk3A1SmjXpmZiHHRBg6xFK9jd1WDgf9BD1nvc_FPCPtq0zYZtyMMlMSDjKcvj7AAUuf91fqhFTPDTHLEekyJaxLPJsRKwQq_aMNYmk54Rt84VlIEkKzKL9-neOVanoV_T/s1600/ssv2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"
</a></div>
<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/AVvXsEjjTZ0Et7aPraVwk3A1SmjXpmZiHHRBg6xFK9jd1WDgf9BD1nvc_FPCPtq0zYZtyMMlMSDjKcvj7AAUuf91fqhFTPDTHLEekyJaxLPJsRKwQq_aMNYmk54Rt84VlIEkKzKL9-neOVanoV_T/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/AVvXsEjjTZ0Et7aPraVwk3A1SmjXpmZiHHRBg6xFK9jd1WDgf9BD1nvc_FPCPtq0zYZtyMMlMSDjKcvj7AAUuf91fqhFTPDTHLEekyJaxLPJsRKwQq_aMNYmk54Rt84VlIEkKzKL9-neOVanoV_T/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.
