Home>Support>Searching images, with thumbnails?

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!

URL: http://www.phoenixtopsinc.com

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Hi 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.

  2. 9 years, 2 months ago phoenixtops

    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.

  3. 9 years, 2 months ago phoenixtops

    Oh, the first line of code was added just after

    <?php /* Start the Loop */ ?>
  4. 9 years, 2 months ago phoenixtops

    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

  5. 9 years, 2 months ago phoenixtops

    My mistake on the post above, but the code went after

      <?php while ( have_posts() ) : the_post(); ?> 

    for the search.php file.

  6. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    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.

  7. 9 years, 2 months ago phoenixtops

    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!

  8. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

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

  9. 9 years, 2 months ago phoenixtops

    Ok, thanks. I will play around with it, making sure to backup my website just in case. Thanks again for the info.

  10. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More