How to Add a Customized Caption Overlay to Images on Weebly
November 27 2020
I found a way to add a customized caption overlay to images on my Weebly blog.
By default, standard images using the 'image' element do not have a caption overlay. The only option is to have the caption below the image:
By default, standard images using the 'image' element do not have a caption overlay. The only option is to have the caption below the image:
Caption only possible underneath the image
When using the 'gallery' element, you have the option to use a caption overlay but you can only set the columns to a minimum of 2:
Looks OK-ish on desktop but when viewed on mobile device, the images are not stacked on top of each other but side by side and the caption overlay covers most of the image. Not very aesthetically pleasing:
So my little hack I would like to show you is how I add my caption overlay, like this:
I am in fact using 3 'slideshow' elements, included as standard on the Weebly editor, side by side. Each time, uploading just a single image.
Using this method, you are over-riding the 'minimum number of columns' when using the 'gallery' element as the single 'slideshow' images are, when viewed on mobile devices, stacked on top of each other like this (when viewed on desk top the 3 images in the above example are side by side):
Using this method, you are over-riding the 'minimum number of columns' when using the 'gallery' element as the single 'slideshow' images are, when viewed on mobile devices, stacked on top of each other like this (when viewed on desk top the 3 images in the above example are side by side):
And you are getting rid of the issue with the caption overlay completely covering the thumbnail as noticed when using the gallery element.
Also, by default, the caption on the slideshow is either above or below the image, not as an overlay:
Also, by default, the caption on the slideshow is either above or below the image, not as an overlay:
Making sure to edit each image like this, including a link, caption and ALT-TXT:
And now for the code that I made which makes the hack complete.
.wslide-caption-text {
position: relative;
z-index: 2;
padding: .7em 1em !important;
line-height: 1.6em;
font-size:20px;
text-align: center!important;
text-shadow: 0 0 5px #000;
}
I inserted the code above into the 'Edit HTML CSS' under 'main.less'. You can tweak the code if you so wish.
.wslide-caption-text {
position: relative;
z-index: 2;
padding: .7em 1em !important;
line-height: 1.6em;
font-size:20px;
text-align: center!important;
text-shadow: 0 0 5px #000;
}
I inserted the code above into the 'Edit HTML CSS' under 'main.less'. You can tweak the code if you so wish.
Be aware that making any adjustments to the HTML CSS code will render your site 'customized' and Weebly are no longer in a position to help you and as for other Weebly members trouble shooting your attempts, this is simply not an option, therefore the only way to extract yourself from any mess you made, will be to switch back to the original theme.
If you like this little hack, show your appreciation, donations are possible via PayPal or Ko-fi.
If you like this little hack, show your appreciation, donations are possible via PayPal or Ko-fi.
More Weebly tips: Weebly Hacks
