Searching images, with thumbnails?
We own a countertop business and I have uploaded over 1000 images to our website. I was wondering if there was a way to search for specific images/attachments in the search bar and maybe view the thumbnail/full image in the search results.
I also wanted to say that I love the theme, we’ve been using it for over 6 months. I have searched for ages and can’t find a plugin so I figured there was some way to modify the theme/search file. I don’t have a great grip on coding (Pagebuilder is a great help!)
Thanks in advance!
This is our free support forum. Replies can take several days.
Need fast email support? Get SiteOrigin Premium
Replies
10Hi Phoenixtops
Thanks for your support. Apologies for not replying sooner.
Vantage does indeed have a theme file that determines the layout of the search results page. Page Builder isn’t applicable in this instance. It’s, unfortunately, a custom development task to modify the search results page theme file. If you’re interested in investigating this as a custom development job, we recommend the guys over at https://codeable.io.
I also looked for a plugin now but couldn’t find one. Sorry we don’t have a direct solution on this one.
Anyway, I figured out a partial fix. Still working on it thought but I figured it might help others in the future and maybe someone can add to it.
I used the Relevanci plugin to index all of my images in my foogallery. Then I installed the (Get the image) plugin. After scouring the web I found and modified the following code in the search.php. (i’m still working on this)
<div class="results"> <div class="thumbs"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php if ( function_exists( 'get_the_image' ) ) { get_the_image ('width=150&height=150&image_scan=true&default_image=http://yoursite.com/default.jpg' ); } ?></a></div> <div class="blogposts"> <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <?php the_time('F jS, Y') ?> by <?php the_author_posts_link(); ?> <p class="postmetadata">Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> </div> </div>Then I modified the style.ccs to add these lines
.results { clear: both; margin-bottom: 20px;} .thumbs { float: left; width: 150px; height: 150px; margin: 0 10px 10px 0; }The good news, I have an image on my search results. The bad news, only “an” image. I’m still working on this, but if I figure it out completely i’ll post it.
Oh, the first line of code was added just after
Last post, I fixed it. Using the following method I was able to get the full images to show!
Posting the code above after [code} [/code]BASE64_ENCODED:IGZpeGVkIHRoZSBpc3N1ZS4gIA0KDQpNeSBmaW5hbCBDb2RlIGlucHV0IGludG8gc2VhcmNoLnBocCB3YXMgdGhpczoNCiBbY29kZV08ZGl2IGNsYXNzPSJyZXN1bHRzIj48ZGl2IGNsYXNzPSJ0aHVtYnMiPjxhIGhyZWY9Ijw/cGhwIHRoZV9wZXJtYWxpbmsoKSA/PiIgdGl0bGU9Ijw/cGhwIHRoZV90aXRsZSgpOyA/PiI+PD9waHAgaWYgKCBmdW5jdGlvbl9leGlzdHMoICdnZXRfdGhlX2ltYWdlJyApICkgeyBnZXRfdGhlX2ltYWdlDQoNCignd2lkdGg9ZmFsc2UmaW1hZ2Vfc2Nhbj10cnVlJmRlZmF1bHRfaW1hZ2U9aHR0cDovL3lvdXJzaXRlLmNvbS9kZWZhdWx0LmpwZycgKTsgfSA/PjwvYT48L2Rpdj4NCjxkaXYgY2xhc3M9ImJsb2dwb3N0cyI+DQo8aDI+PGEgaHJlZj0iPD9waHAgdGhlX3Blcm1hbGluaygpID8+IiByZWw9ImJvb2ttYXJrIiB0aXRsZT0iUGVybWFuZW50IExpbmsgdG8gPD9waHAgdGhlX3RpdGxlX2F0dHJpYnV0ZSgpOyA/PiI+PD9waHAgdGhlX3RpdGxlKCk7ID8+PC9hPjwvaDI+DQo8YnIgLz4NCiA8P3BocCBlZGl0X3Bvc3RfbGluaygnRWRpdCcsICcnLCAnIHwgJyk7ID8+ICA8L3A+DQo8L2Rpdj4NCjwvZGl2Pg==[/code]
So using Relevanssi, and Get the image plugin, it IS possible with a little work. I hope this will help someone in the future.
A full list of functions for the “get the image” plugin can be found here: https://github.com/justintadlock/get-the-image/blob/master/readme.md
My mistake on the post above, but the code went after
for the search.php file.
Awesome :) Really glad to hear you’re making progress on this. Thanks for sharing your process.
All WordPress.org themes completely overwrite their own folder during theme updates so don’t forget to use a child theme to store your newly edited files. If you need a hand with that let me know.
Ok, glad you mentioned that. I saved a backup copy of the items, but can you link me to some documentation on the child theme? I’m getting back into coding (after 10 years or so), so I need a refresher. Thanks!
Pretty simple stuff. You run your child theme from Appearance > Themes. WordPress knows it’s the child of a parent you also have in your themes folder. Any files in the child theme take precedence over the same file in the parent theme.
Here is a starter child theme:
https://siteorigin.com/wp-content/uploads/2015/03/vantage-child-starter.zip
Download ZIP to desktop.
Un-zip.
Copy your modified theme file into the child theme folder.
Either re-zip and install from Appearance > Themes > Add New: Upload Theme
OR
Upload folder to /wp-content/themes/ on your server.
Activating a child theme will unfortunately reset Appearance > Menu locations settings and reset Appearance > Customize > Theme Design settings. No way around this that I know of. If you have used a lot of the settings at Appearance > Customize > Theme Design then open that in a tab and activate the child theme in a new tab. That way you can manually copy settings across.
Some background on child themes:
https://codex.wordpress.org/Child_Themes
(It’s easier to add any Custom CSS you might have to Appearance > Custom CSS. Easier location to manage. Appearance > Custom CSS is update safe.)
Ok, thanks. I will play around with it, making sure to backup my website just in case. Thanks again for the info.
For sure :)
Replies on this thread are closed.
Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.