Show search results with Justified Image Grid? - Justified Image Grid

There would be three types of search:

Live searching in a JIG gallery much like filtering (with JavaScript). This is not yet possible.
Creating galleries based on pre-defined search terms that you set up in the shortcode. This is possible with NextGEN search or Flickr search. This lets you create galleries based on a search.
Connecting a user's search query to JIG, instead of pre-defining it. This lets users search for things and display the results with JIG. It's considered advanced use, but can learn it from this tutorial.

The anatomy of search.php file of the theme

What complicates things is that the file, such as /wp-content/themes/Avada/search.php contains lots of extra code: for sidebars, different search layouts, displaying content (posts) so it's not possible to precisely predict what you need to modify and where. Therefore, some PHP and WordPress knowledge is needed to know what your theme's code does and where should you inject custom search code.

Furthermore, the search.php is universal, it's used for your general site search, but also for any other search type.

WordPress Media Library image search on the frontend

WordPress has no way to search the Media Library on the frontend. However there is a free plugin that helps you do just that.

Install Media Search Enhanced.
Add this shortcode to place the plugin's media search box (in a sidebar widget, for example). It'll point to the WordPress search page with a specialized setup.
[$mse-search-form]

Wherever you see a search form in the code, it means to give a chance to refine search when undesirable or no results are found. Change it to the media search box, else it'll revert search to normal WP posts, confusing the visitor. For example, in Avada you'll need the following. The form is the original code, and the customization is wrapped around it:

<?php
    if($wp_query->query_vars['post_type'] !== 'attachment'){
?>
    <form class="searchform seach-form" role="search" method="get" action="<?php echo home_url( '/' ); ?>">
        <div class="search-table">
            <div class="search-field">
                <input type="text" value="" name="s" class="s" placeholder="<?php _e( 'Search ...', 'Avada' ); ?>"/>
            </div>
            <div class="search-button">
                <input type="submit" class="searchsubmit" value="&#xf002;" />
            </div>
        </div>
    </form>
<?php
    } else{
        echo do_shortcode('[<a class=emptyShortcodeLink href=#>$</a>mse-search-form]');
    }
?>

<?php

if($wp_query->query_vars['post_type'] !== 'attachment'){

</div>

</div>

</form>

<?php

} else{

echo do_shortcode('[$mse-search-form]');

}

Add the actual JIG display right before the theme begins to show posts. In Avada, it's in a div with the posts-container class. The snippet attempts to use CSS to hide results that display without JIG.

<?php
    global $wp_query;
    if($wp_query->post_count !== 0 && $wp_query->query_vars['post_type'] == 'attachment'){
        $ids_for_JIG = array();
        foreach ($wp_query->posts as $entry) {
            $ids_for_JIG[] = $entry->ID;
        }
        $ids_for_JIG = implode(',',$ids_for_JIG);
        get_jig(array('ids' => $ids_for_JIG));
        echo '<style type="text/css">
            .post{
                display:none;
            }
            </style>';
    }
?>

<?php

global $wp_query;

if($wp_query->post_count !== 0 && $wp_query->query_vars['post_type'] == 'attachment'){

$ids_for_JIG = array();

foreach ($wp_query->posts as $entry) {

$ids_for_JIG[] = $entry->ID;

}

$ids_for_JIG = implode(',',$ids_for_JIG);

get_jig(array('ids' => $ids_for_JIG));

echo '<style type="text/css">

.post{

display:none;

}

</style>';

}

If results are duplicated below JIG using the style of the theme, you'll need a little extra code. Find where the loop begins with:
while(have_posts()): the_post();
1
while(have_posts()): the_post();
Then add this immediately after that:
if($wp_query->query_vars['post_type'] == 'attachment'){ continue; }
1
2
3
if($wp_query->query_vars['post_type'] == 'attachment'){
continue;
}

Please note that there is a possible limitation of this search when using WPML Media. The Media Search Enhanced plugin may show duplicates in the results due to the different language versions.

Search NextGEN Gallery or Flickr from the frontend

It's a little bit tricky, but here is how to do it:

Create the ability to use the search page for something custom, it's done with a shortcode of the search box. Locate the functions.php file of your theme or the child theme, and add this:

function jig_custom_search_form($atts, $content = "") {
    if(empty($atts['source'])){
        return "Please specify the source.";
    }
    $form = get_search_form(false);
    $form = preg_replace( "/placeholder=\"(.\S)*\"/", 'placeholder="Search '.ucfirst($atts['source']).'..."', $form );
    $form = str_replace( '</form>', '<input type="hidden" name="jig_custom_search" value="'.$atts['source'].'" /></form>', $form );
    return $form;
}
add_shortcode( 'jig_custom_search_form', 'jig_custom_search_form' );

function add_jig_custom_search_query_var($vars) {
    $vars[] = 'jig_custom_search';
    return $vars;
}
add_filter('query_vars', 'add_jig_custom_search_query_var');

function jig_custom_search_form($atts, $content = "") {

if(empty($atts['source'])){

return "Please specify the source.";

}

$form = get_search_form(false);

$form = preg_replace( "/placeholder=\"(.\S)*\"/", 'placeholder="Search '.ucfirst($atts['source']).'..."', $form );

$form = str_replace( '</form>', '<input type="hidden" name="jig_custom_search" value="'.$atts['source'].'" /></form>', $form );

return $form;

}

add_shortcode( 'jig_custom_search_form', 'jig_custom_search_form' );

function add_jig_custom_search_query_var($vars) {

$vars[] = 'jig_custom_search';

return $vars;

}

add_filter('query_vars', 'add_jig_custom_search_query_var');

Add one of the following shortcodes to a widget or similar to place the search box. It'll initiate a specialized search in the specified source:
[$jig_custom_search_form source=nextgen]
[$jig_custom_search_form source=flickr]

Add the following code to your theme's search.php file, after the line where the content wrapper div starts, before any result gets shown with a loop. For your information, the JIG shortcodes will do the following:

NextGEN: searches for images in the NextGEN Gallery, whererever it matches any part of the filename, title, description, tags.
Flickr: searches for photos in a specific Flickr user and show up to 200 results (just a feasible limit).

<?php
    global $wp_query, $query_string;
    
    if(!empty($wp_query->query_vars['jig_custom_search'])){
        $jig_custom_search = $wp_query->query_vars['jig_custom_search'];
        $search_value = $wp_query->query_vars['s'];
        echo do_shortcode("If you didn't find what you were looking for, try a new search!<br/><br/>[<a class=emptyShortcodeLink href=#>$</a>jig_custom_search_form source=".$jig_custom_search."]<br/><br/>");
        switch ($jig_custom_search) {
            case 'nextgen':
                get_jig(array('ng_search_query' => $search_value));
                break;

            case 'flickr':
                get_jig(array('limit' => '200', 'flickr_search_text' => $search_value, 'flickr_search_user' => '9563763@N08'));
                break;

            default:
                break;
        }

        echo '<style type="text/css">
                .post-content {
                    display: none;
                }
            </style>
            <script type="text/javascript">
                jQuery(".jigErrorMessage").text("No content found.")
            </script>';

        $wp_query = new WP_Query();
        $query_string = '';
    }
?>

<?php

global $wp_query, $query_string;

if(!empty($wp_query->query_vars['jig_custom_search'])){

$jig_custom_search = $wp_query->query_vars['jig_custom_search'];

$search_value = $wp_query->query_vars['s'];

echo do_shortcode("If you didn't find what you were looking for, try a new search!<br/><br/>[$jig_custom_search_form source=".$jig_custom_search."]<br/><br/>");

switch ($jig_custom_search) {

case 'nextgen':

get_jig(array('ng_search_query' => $search_value));

break;

case 'flickr':

get_jig(array('limit' => '200', 'flickr_search_text' => $search_value, 'flickr_search_user' => '9563763@N08'));

break;

default:

break;

}

echo '<style type="text/css">

.post-content {

display: none;

}

</style>

jQuery(".jigErrorMessage").text("No content found.")

</script>';

$wp_query = new WP_Query();

$query_string = '';

}

Fine tune this. The switch has 3 sources that can be searched. First, comment out the lines that you don't need. Put double slashes in front of the line like this:
get_jig(array('ng_search_query' => $search_value)); //get_jig(array('ng_search_query' => $search_value));
1
2
get_jig(array('ng_search_query' => $search_value));
//get_jig(array('ng_search_query' => $search_value));
Generate your shortcode in the Shortcode Editor then export as a template tag. You must create yours to allow search in your profiles, but follow the examples closely. For security, do not use this to search the entire Flickr, only content in your own profile! Check out how pre-defined search works to get an idea: NextGEN search or Flickr search. This is the same thing but we are replacing the pre-defined value with an user-submitted one. Make sure the value is dynamic for any of the ng_search_query, flickr_search_text, flickr_search_tags settings:
// Bad, pre-defined get_jig(array('ng_search_query' => 'bunnies')); // Good, user submitted search query get_jig(array('ng_search_query' => $search_value));
1
2
3
4
5
// Bad, pre-defined
get_jig(array('ng_search_query' => 'bunnies'));

// Good, user submitted search query
get_jig(array('ng_search_query' => $search_value));
The snippet attempts to hide and prevent the theme's original search (among posts), but you should verify that nothing shows below JIG on the search results page. The custom CSS hides the area that has the post-content class, but if your theme is not Avada, this is likely different.