Overlays on Top of Featured Image Previews

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Overlays on Top of Featured Image Previews

This topic contains 16 replies, has 2 voices, and was last updated by

 
Participant
2 years, 1 month ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #23164

    Participant

    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

    #23169

    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 :)


    #23176

    Participant

    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 2 years, 7 months ago by  donlange.
    #23185

    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 :)


    #23196

    Participant

    OK, thanks Ernest…

    I’ll look into it this weekend.

    Will I be notified when my support nears expiration?

    Regards,
    Don

    #23199

    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 :)


    #25082

    Participant

    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

    #25095

    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 :)


    #25116

    Participant

    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 2 years, 1 month ago by  donlange.
    • This reply was modified 2 years, 1 month ago by  donlange.
    • This reply was modified 2 years, 1 month ago by  donlange.
    • This reply was modified 2 years, 1 month ago by  donlange.
    #25123

    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 :)


    #25130

    Participant

    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

    #25132

    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 :)


    #25133

    Participant

    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 2 years, 1 month ago by  donlange.
    #25135

    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 :)


    #25136

    Participant

    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

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.