Overlays on Top of Featured Image Previews

[donlangeParticipant]

Hello Ernest,

How would one go about placing overlays on top of Featured Image thumbnails in the “Horizontal Results”? I need to add announcement type banners, for example SOLD! and PRICE REDUCED!, in these overlays, opposed to actually placing a graphic in a layer on top of the Featured Images in Photoshop.

Thank you,
Don

[Ernest MarcinkoKeymaster]

Hi Don,

Well, the easiest way to display something there, is usually using custom CSS, something like this:

a.asp_res_image_url::after {
    display: block;
    content: "Hey!";
    color: red;
    background: white;
    padding: 2px 12px;
    position: absolute;
    top: 0;
    right: 0;
}

This will result in this: https://i.imgur.com/eqUUv7q.png

But you will still have to make some sort of changes to the horizontal.php results template file, to include a CSS class on items where you want to display a specific banner, then construct the CSS rules based on those classes.
For the templating, you can check this tutorial.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[donlangeParticipant]

Thank you Ernest…

And can I insert PHP logic in these template copies to configure each taxonomy term in the horizontal results with a different overlay? In other words, I have one taxonomy term which inserts particular properties (CPT) into the horizontal results and other taxonomy terms associated to each search result (property) that may require different overlays. For example, the taxonomy term updated inserts the properties into the horizontal search results and SOLD and PRICE REDUCED are taxonomy terms that require different overlays for the updated properties. Forgive me for not having time to study your article this morning – I must be off to a meeting.

Thank you for the link and explanation.

Regards,
Don

• This reply was modified 5 years, 2 months ago by  donlange.

[Ernest MarcinkoKeymaster]

Hi,

Yes, I think so. You can get the taxonomy terms by the post ID via PHP, then maybe add a class name to the result container conditionally. Based on that, you could make different custom CSS rules.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[donlangeParticipant]

OK, thanks Ernest…

I’ll look into it this weekend.

Will I be notified when my support nears expiration?

Regards,
Don

[Ernest MarcinkoKeymaster]

Hi,

I believe codecanony.net will send you a notification message, as far as I know – or at least it used to be like that.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[donlangeParticipant]

Hi Ernest,

I need to revisit this topic. Sorry it took me 6 months to actually make an attempt at placing overlays on featured images in the horizontal results.

I copied horizontal.php to my child theme, made a simple modification and without PHP logic, overlays are indeed placed on top of the featured images. The problem is, the template file does not recognize the is_tax() WordPress function.

Sample code:

<div class=’asp_image<?php echo $s_options[‘image_display_mode’] == “contain” ? ” asp_image_auto” : “”; ?>’
style=”background-image: url(‘<?php echo $r->image; ?>’);”>
<?php if ( is_tax(‘status’, ‘Under Contract’) ) { ?>
<div class=’void’>
<h1 style=”color:#ff0; text-shadow:0.08em 0.08em 0.13em rgba(0,0,0,0.5); padding-left:0.3em;”>
Under Contract
</h1>
</div>
<?php } ?>
</div>

What do I need to do?

Thank you,
Don

[Ernest MarcinkoKeymaster]

Hi Don,

That will not work there, as that is not within a wordpress post loop. If you want to check the taxonomy, you can use this:

<?php if ( isset($r->taxonomy) && $r->taxonomy == 'status' ) { ?>

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[donlangeParticipant]

Ernest,

I’m sorry but that didn’t work either. Besides, I need to check that a specific taxonomy term is associated to the property; e.g, ‘status’ = ‘under-contract’.

I also tried just:

if ( isset($r->taxonomy) ) { …

and that didn’t print anything either.

Whereas, commenting out the PHP decision statement altogether does in fact print “Under Contact” to the browser.

Thanks,
Don

• This reply was modified 4 years, 8 months ago by  donlange.
• This reply was modified 4 years, 8 months ago by  donlange.
• This reply was modified 4 years, 8 months ago by  donlange.
• This reply was modified 4 years, 8 months ago by  donlange.

[Ernest MarcinkoKeymaster]

Hi Don,

Okay, so the results are actually properties and not taxonomy terms? In that case that won’t work. I thought you are trying to check if the current result (as a taxonomy term) is within a given taxonomy, as that is what is_tax is for.
Are you trying to check if the current item belongs to a given taxonomy term?

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[donlangeParticipant]

Hi Ernest,

I have used is_tax() in a filter to modify page titles from the functions.php file; however, in this case I’m trying to check if an item (real estate property) in the ASP horizontal results belongs to a given taxonomy term and then print the term over the featured image.

Thank you,
Don

[Ernest MarcinkoKeymaster]

Hi,

In that case, the has_term() function is the way to go:

<?php if ( isset($r->post_type) && has_term('Under Contract', 'status', $r->id) ) { ?>

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[donlangeParticipant]

Hi Ernest,

Wow, that worked! I’m impressed.

What is contained in $r and how does it output all the members of the custom taxonomy considering we’re not even working inside the Loop?

Thank you very much,
Don

• This reply was modified 4 years, 8 months ago by  donlange.

[Ernest MarcinkoKeymaster]

Hi,

The $r variable is basically the current result. I phrased it a bit incorrectly: It is within a loop of results, but not within the classing wordpress Loop, as these results can be mixed (users, taxonomy terms etc..). Within a classic wordpress “Loop” you can use functions like the_title() or the_content(), whereas here those won’t work here, as this is just a regular programmatical loop.
In the code above, I checked if the $r->post_type property exists, if so, then the current result is a post or post type, then the check proceeds runnig the has_term(..) function.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[donlangeParticipant]

So $r is a PHP object containing posts (or custom post types) found during the search and has_term() is checking each post for the taxonomy term of the indicated taxonomy?

Thank you,
Don

[Author]

Posts