Docs

[mittavalley]

Hi the support team,

I have tried to set an image on promo setting and add text over the image like in the attached file “promo text over image”. Can I ask your help for the following issues?

1.) Remove border of the image
2.) Add text over the image with a transparent background over the image
3.) Reduce the image size

I used image shortcode to create the image as you seen in the attached file “promo text over image class try”.

Thank you very much.
Regards

[Prasant Rai]

Hello There,

Thanks for writing in!

Could you please provide us with your website URL so we can take a closer look?

Thanks.

[mittavalley]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for updating but it’s not accessible. When you are ready to go live, update us and we’ll surely assist you to get it sorted as it’s not possible right now without checking on site. You can proceed with your other development for now and update us when you are ready.

Cheers!

[mittavalley]

Thanks Rupok. It will be early of next month.

[Nico]

Let us know how it goes.

Feel free to ask us again.

Thanks.

[mittavalley]

Hi the support team,

There are a few following issues that need your help please?

1.) Remove border of the image
2.) Add text over the image with a transparent background over the image
3.) Reduce the image size to display around 329(w)x246(h) px

I used image shortcode to create the image. No text displayed over the image.
[image type=”thumbnail” src=”http://work.mittavalley.com.au/wp-content/uploads/2016/10/map.jpg” link=”true” href=”#example” alt=”Map”] [content_band bg_color="#ffba00" border="all"] [container] [custom_headline style="margin: 0;" type="center" level="h4" looks_like="h3" accent="true"]Check it out, I'm being contained both vertically and horizontally![/custom_headline] [/container] [/content_band][/image]

domain name is http://www.work.mittavalley.com.au.

Many thanks.
Regards,

[Rue Nel]

Hello There,

Thank you for the clarifications.

#1] The border seems to have been removed. You already added a custom css:

.x-promo {
    overflow: hidden;
    margin-bottom: 1.313em;
    border: 0px;
    box-shadow: none;
    border-radius: 0;
}

#2] To add text over the image with a transparent background over the image, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-promo {
    position: relative;
}

.x-promo .x-promo-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(255,255,255,0.75);
}

#3] To make sure that the image will not exceed the given dimension, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-promo .x-promo-image-wrap {
    max-height: 249px;
    overflow: hidden;
}

.x-promo .x-promo-image-wrap img {
    min-width: 50%;
    max-width: 329px;
    margin: 0 auto;
}

Hope this helps. Please let us know how it goes.

[mittavalley]

Hey,

You guys are brilliant!

Just a little one more thing. The transparent background is great but would it be possible to make its height narrower. We keep this ratio but just to make it smaller so it doesn’t take so much space of the image in the background. The image size is nice for us so we prefer to keep this size.

Last but not least, I am not sure we can make this that to make the image linkable. I have read many forums and think that it is unable to do so. But if you could make a magic to make it work that would be wonderful.

Many thanks for supporting us.
Regards,

[mittavalley]

Hi there,

Can I give another question please?

How to uniform all images that display in the exact same size on each page? The standard size we like to display is 329 (w) x 246 (w) and we’ve already set in css.

How to calculate the original image for loading? What dimension should it be? For example, from the attached files, the page “Live”, the right image “Business Directory” height was pushed slightly higer than the other two. However, the page “Community Services”, the height of middle one was pushed higher while the right one was much smaller.

Attached file – Community Service
left image – the original size: 488 x 275 px
middle image – the original size: 403 x 275 px
right image – the original size: 723 x 275 px
http://work.mittavalley.com.au/live

Attached file – Live
left image – the original size: 375 x 250 px
middle image – the original size: 750 x 500 px
right image – the original size: 338 x 231 px
http://work.mittavalley.com.au/the-community

Thanking you in advance.

Regards,

[mittavalley]

Hi there,

Sorry, the uniform images (last issue), I sorted it out. Set the same dimension ratio is a good way for me to get exact image sizes.

Many thanks.

[Paul R]

Glad you were able to sort it out. Have a great day! 🙂

[mittavalley]

Hi Paul,

Thanks you too. But can I know how to reduce the transapernt background smaller on the images?

Thank you.
Regards

[Rue Nel]

Hello There,

Thanks for updating in! To reduce the transparent background color on the images, please update the previously given css and use this:

.x-promo {
    position: relative;
}

.x-promo .x-promo-content {
    padding: 10px;
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(255,255,255,0.75);
}

Feel free to change the padding when needed.

[mittavalley]

HI Rue,

Brilliant…perfect.

Have a good weekend.

Thanks once again.

[Author]

Posts