Image with text band overlay
I'm wanting to create some image blocks with a text overlay that has a band of gradient colour behind the text. See the attachment. I could easily create the images with the band and text but I want it so that it is easy for my client to update/change etc, so would like the image to be separate to the text and gradient band. Is there an add-on that does this or can someone share the code if they have done something similar within a block. I'm using the latest version of 5.6
You could modify the image block (add an extra text field for the overlay text) and create a custom template for it.
Are you comfortable with making/modifying blocks?
You need an image selector, an input for the image alt attribute, and an input for the image overlay text.
This page has code examples that you should be able to adapt to your needs.
Thanks for the other link, I actually saved that the other day when I was searching for answers, just didn't know how to set it up for clients to modify in C5 easily, Thanks for your help.
I'm still struggling with this as the text and gradient needs to overlay on a background image and I can't work out how to get that into a block for easy updating for clients. Any more ideas or does someone have a block available?
This is the HTML for setting up the product image, text, and overlay.
<div class="product-container"> <a href="#"> <div class="overlay-wrapper"> <h3 class="overlay-text overlay-gradient">DINING</h3> </div> <img class="product-image" src="images/table.jpg"> </a> </div>
Here is the above code with the content replaced with example variable names.
- $productLink - page selector
- $overlayText - text input
- $productImage - image/file selector