Nomadic Backpacker
  • Home
  • ABOUT
  • VISAS
    • Visa Sierra Leone
    • Visa Vietnam
  • CONTACT

How to get this awesome image caption overlay on Weebly

19/11/2019

 

Posted: November 19 2019

Tweet

​Personalise your Weebly blog with this awesome image caption overlay hack.
Picture
Add a little code to the Edit HTML/CSS on Weebly to achieve this awesome image caption overlay.

Firstly, I am using a heavily customised Cento - Blog theme:
Picture
I say 'heavily customised', all fonts have been altered at source, border and margins all tweaked in some way, which is hardly gonna throw a spanner in the works. The most technical hack is making the Blog Post Titles h1 instead of h2. Not that really matters now, as I am mostly back to using standard pages again.

I cannot vouch for this hack working on any other theme. But you can try. Make a copy of your site first and play around on the COPY SITE before you start customising the html.

I've built my website on desktop and have adjusted 'things' so that the site looks it's best on Android.

There are 2 parts to this hack.

Part 1:

Referring to the screen shot at the top of this post, each of the 6 images shown are actually slide show elements with only 1 image uploaded per slide show.

All I did was to drag the standard Weebly slideshow element to my page, 6 times, to create 2 rows of 3. In the slideshow editor, enter a caption as shown below:
Picture
Click SAVE on the image and SAVE top right. I also set the image aspect ratio as:
Picture
All images are resized on an Android Photo editing app to 4:3 ratio before uploading.
​

Part 2:

And now for the good bit. The code.
Picture
I happened upon this code having studied another hack on how to add image captions and some basic CSS coding techniques and put it all together. I adjusted all the variables 1 by 1, checking how the live version would look. And I think it looks pretty cool.

And the best part about it is that it looks cool on Mobile view too.  Naturally, the images appear in 1 column in mobile view (screenshot is from the Mobile View option in the Weebly Editor):
Picture

    Blogging with Weebly Post Stream


    • Awesome Image Caption Overlay

    • How to add Twitter Cards to your Weebly blog

    • My favourite apps on Weebly

    • The importance of adding Alt Text to your images

    • Time to update your Chrome Browsers again

    • Where to paste the verification codes for Google Search Console and Google Analytics on Weebly

    • How to customize the text of previous and next posts on Weebly

    • How to customize the read more break on Weebly

    • How to get Google to index your pages on Weebly

    • Weebly is no longer supported by Internet Explorer (IE11)

    • Is your browser up to date?

    • How to change Blog Post Titles to h1 tags on Weebly

    • How to add a h1 tag on Weebly

    • How to block someone from downloading your images on Weebly


    follow me on Twitter

Powered by Create your own unique website with customizable templates.
  • Home
  • ABOUT
  • VISAS
    • Visa Sierra Leone
    • Visa Vietnam
  • CONTACT