Mobile-friendly: making featured images clickable (but not entire result area)?

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Mobile-friendly: making featured images clickable (but not entire result area)?

This topic contains 2 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 5 years, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #9182
    trw226
    trw226
    Participant

    Hello,

    In an Isotopic Result configuration (or vertical result configuration), is it possible to make the featured image clickable (like the title), while leaving the post excerpt untouched? Currently, I have blog post excerpts with both external links and “read more” links, and they work just fine as long as I have the “HTML Tags exclude from stripping content” parameters properly configured. However, the only way I can see to make the featured image also link to the full post (like the title) is to flag the option under Layout Options>Results Behavior to “Make the whole result area clickable?”. However, this overrides everything in the results area, including all of my other the external and internal links in the excerpt text.

    Is there a way to
    a) make the featured image in the result link to the full post also, or
    b) shrink the recognized “results area” to include just the featured image (and/or title) so I can use the “HTML Tags exclude from stripping content” option?, or
    c) some other alternative?

    This is actually important from a mobile-friendly UI perspective. Most users will access websites mobile first, and they expect that when they click on the featured image, it will take them to the full post. As examples, you can try accessing major news sites like theguardian.com or cnn.com or nytimes.com from your mobile phone–in each case they use the featured images as a clickable links because it is harder to select the individual links on a touch screen with your thumb than it is to select the titles.

    I’m a big fan of Ajax Search Pro and want to feature it prominently, but just want to see if there is any way to get the displayed results just a bit more mobile-friendly.

    Thanks for your consideration,
    Tom

    #9557
    trw226
    trw226
    Participant

    I managed to fix this. Not sure if this is “optimal” for others, and I think it only works with static images (not background images) but posted here in case it is useful for others. Perhaps an “official” version will come out later.

    In the isotopic.php file (which should be put in your wp-content/themes/your-theme-name/asp/isotopic.php folder)

    you want to replace these lines:

    <div class='asp_item_img' imgsrc='<?php echo $r->image; ?>' style="background-image: url('<?php echo $r->image; ?>');">
                    <a>link; ?&gt;'&lt;?php echo ($s_options['results_click_blank'])?" target='_blank'":""; ?&gt;&gt;</a>
                &lt;/div&gt;  

    with these lines:

    &lt;div class='asp_item_img'&gt;
                    <a>link; ?&gt;'&lt;?php echo ($s_options['results_click_blank'])?" target='_blank'":""; ?&gt;&gt;<img />image; ?&gt;' /&gt;</a>
                &lt;/div&gt;
    • This reply was modified 5 years, 11 months ago by trw226 trw226.
    • This reply was modified 5 years, 11 months ago by trw226 trw226.
    #9600
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi!

    I’m pretty sure I have answered your ticket before, I’m afraid it might got lost a few weeks ago (there was a major server issue, I had to roll-back) Very sorry about that, I didn’t notice this reply got deleted as well.

    If I remember correctly I had a very similar fix as suggestion, and I have already noted this as a possible change in behavior in a future release, as it completely makes sense.

    Thank you for sharing your solution, and again, I’m sorry about the issue.

    Best,
    Ernest Marcinko

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


Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.