Developing (v7+)

Image with text band overlay

Permalink June 04, 2015 at 7:44 PM

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

MrKDilkington replied on Jun 4, 2015 at 11:47 pm Permalink Reply

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 Jun 5, 2015 at 12:33 am Permalink Reply

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 Jun 5, 2015 at 12:59 am Permalink Reply

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 Jun 5, 2015 at 1:39 am Permalink Reply

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 Jun 7, 2015 at 6:28 pm Permalink Reply

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 Jun 8, 2015 at 12:54 am Permalink Reply 1 Attachment

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 Jun 8, 2015 at 4:22 am Permalink Reply

Thanks so much, I should be able to work with that, much appreciated.

Forums

Developing (v7+)

Image with text band overlay

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?