Skip Navigation

[Resolved] Adding an icon overlay to an image based on custom filed selection

This thread is resolved. Here is a description of the problem and solution.

Problem:

The issue here is that the user wanted to add an image overlay for their featured items.

Solution:

To add an overlay on your images I would recommend taking a look at the tutorial below.
http://www.korenlc.com/css-overlay-how-to-create-a-simple-css-overlay/

This should be able to guide you through the process.

This support ticket is created 5 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

This topic contains 4 replies, has 2 voices.

Last updated by lewisP 5 years, 8 months ago.

Assisted by: Shane.

Author
Posts
#1213693
Screenshot 2019-03-13 12.20.35.png

Hi, I am trying to add an icon overlay to an image. (Please see attached screenshot for an example of what I am trying to achieve) I have set up a custom field select option for various icons.
Here is the shortcode for the main image:
[types field='profile-picture' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='500' height='300' crop='false' crop_horizontal='right' crop_vertical='bottom' ][/types]
And the shortcode for one of the icons:
[wpv-conditional if="( $(wpcf-member-map-icon) eq 'stay' )"]<img src="hidden link" alt="Stay Icon" width="30" height="30" />[/wpv-conditional]

Many thanks in advance.

#1213747

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Lewis,

Thank you for contacting our support forum.

Its a little bit complex to add the overlay to the image itself.

I would suggest marking the entire div container with a border or something that is identifiable. This is because in order to add the overlay it must be a background image as according to the posts that i've been checking.
hidden link

Also in the screenshots it seems that the overlay is actually apart of the image itself which is normally what is done.

Please let me know what you think of this.
Thanks,
Shane

#1213806
Screenshot 2019-03-13 16.08.27.png

Hi Shane, many thanks for the pointer. I think I have now sorted it. Many thanks for your time.

#1213908

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Lewis,

Happy I was able to assist you with this.

If there are no further issues on this then we can mark this as resolved.

Thanks,
Shane

#1228563

My issue is resolved now. Thank you!