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

[trw226Participant]

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

[trw226Participant]

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:

<div class='asp_item_img'>
                <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 7 years, 4 months ago by  trw226.
• This reply was modified 7 years, 4 months ago by  trw226.

[Ernest MarcinkoKeymaster]

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

[Author]

Posts