Forums

Image with text band overlay

Permalink
Hi,
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
Thanks.

1 Attachment

anete
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi anete,

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?
anete replied on at Permalink Reply
anete
Thanks. I'm not strong with php but have an understanding of it. I would need some assistance to get me underway in making/modifying a block as I haven't really done that before but do also have a bit of an understanding of it.
MrKDilkington replied on at Permalink Reply
MrKDilkington
Actually, you could try this.
http://www.concrete5.org/marketplace/addons/designer-content/...

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.
https://css-tricks.com/design-considerations-text-images/...
anete replied on at Permalink Reply
anete
Thanks, yes I've used Designer Content before. I just wasn't sure how I would setup what I wanted to do. Would I set the overlay text with negative top padding? I guess I need to have a play!
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.
anete replied on at Permalink Reply
anete
Hi
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?
MrKDilkington replied on at Permalink Reply 1 Attachment
MrKDilkington
I attached a zip with the images, HTML, and CSS to create the example.

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.
<div class="product-container">
    <a href="<?php echo $productLink; ?>">
        <div class="overlay-wrapper">
            <h3 class="overlay-text overlay-gradient"><?php echo $overlayText; ?></h3>
        </div>
        <img class="product-image" src="<?php echo $productImage; ?>">
    </a>
</div>

- $productLink - page selector
- $overlayText - text input
- $productImage - image/file selector
anete replied on at Permalink Reply
anete
Thanks so much, I should be able to work with that, much appreciated.