Support Forums

Support Forums Forums Search & Filter Pro Customizing Results

This topic is: resolved

This topic contains 4 replies, has 2 voices, and was last updated by  Sarah B Gregg 4 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Sarah B Gregg
    #219384

    Hello
    I have a successful Search & Filter form and results set up on a website. It showcases various Colors and displays Posts, filterable by category and tag.
    Now, I want to create a second gallery to display Projects. These will show Images (not posts with featured image). I’m having trouble getting it to display properly. I believe I need to customize the results templates.However, I’m having all sorts of trouble figuring out this code. Can you help me?
    Here is the page I’m trying to customize: https://nbgqa.com/project-gallery/.
    Its trying to display the featured image and post title. But I want it to display the medium sized image from the gallery, link to the full size image, and then show the Caption and Description.
    Here is the existing template code:

    <?php
    /**
    * Search & Filter Pro
    *
    * Sample Results Template
    *
    * @package Search_Filter
    * @author Ross Morsali
    * @link http://www.designsandcode.com/
    * @copyright 2015 Designs & Code
    *
    * Note: these templates are not full page templates, rather
    * just an encaspulation of the your results loop which should
    * be inserted in to other pages by using a shortcode – think
    * of it as a template part
    *
    * This template is an absolute base example showing you what
    * you can do, for more customisation see the WordPress docs
    * and using template tags –
    *
    * http://codex.wordpress.org/Template_Tags
    *
    */

    if ( $query->have_posts() )
    {
    ?>

    <div class=”pagination”>

    <div class=”nav-previous”><?php next_posts_link( ‘Older posts’, $query->max_num_pages ); ?></div>
    <div class=”nav-next”><?php previous_posts_link( ‘Newer posts’ ); ?></div>
    <?php
    /* example code for using the wp_pagenavi plugin */
    if (function_exists(‘wp_pagenavi’))
    {
    echo “<br />”;
    wp_pagenavi( array( ‘query’ => $query ) );
    }
    ?>
    </div>

    <div class=”results-container”>
    <?php
    while ($query->have_posts())
    {
    $query->the_post();

    ?>
    <div class=”result-box”>
    “>
    <?php
    if ( has_post_thumbnail() ) {
    echo ‘<p>’;
    the_post_thumbnail(“small”);
    echo ‘</p>’;
    }
    ?>

    <h2>“><?php the_title(); ?></h2>

    </div>

    <?php
    }
    ?>
    </div>

    <div class=”pagination”>

    <div class=”nav-previous”><?php next_posts_link( ‘Older posts’, $query->max_num_pages ); ?></div>
    <div class=”nav-next”><?php previous_posts_link( ‘Newer posts’ ); ?></div>
    <?php
    /* example code for using the wp_pagenavi plugin */
    if (function_exists(‘wp_pagenavi’))
    {
    echo “<br />”;
    wp_pagenavi( array( ‘query’ => $query ) );
    }
    ?>
    </div>
    <?php
    }
    else
    {
    echo “No Results Found”;
    }
    ?>

    Many many thanks in advance for your help!
    Sarah

    Trevor Moderator
    #219404

    Here is the Codex for the_post_thumbnail:

    https://developer.wordpress.org/reference/functions/the_post_thumbnail/

    You need to change "small" to "medium"

    In the standard results.php, see lines 56-62 (yours may now be different):

    <?php 
    if ( has_post_thumbnail() ) {
      echo '<p>';
      the_post_thumbnail("small");
      echo '</p>';
    }
    ?>

    They need the link adding (with an alt to show the caption as a title), like this:

    <?php
    if ( has_post_thumbnail() ) { ?>
      <a alt="<?php esc_html(get_the_post_thumbnail_caption());?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail("medium");?></a>
    <?php	} ?>

    I *think* that is right. I do not think that esc_html(get_the_post_thumbnail_caption()); needs to be used with echo.

    You can use the same to put the caption on the page, like this:

    <h3 class="image-caption"><?php esc_html(get_the_post_thumbnail_caption());?></h3>

    and to get the description, I think some thing like this:

    <div class="image-description>
    <?php echo get_post(get_post_thumbnail_id())->post_excerpt;?>
    </div>

    You might need paragraph tags around the actual description, inside the div, like this:

    <div class="image-description><p>
    <?php echo get_post(get_post_thumbnail_id())->post_excerpt;?>
    </p></div>

    Let me know if that helps, or doesn’t work?

    Sarah B Gregg
    #219644

    Thank you, Trevor. Some of it worked, but some of it didn’t. I was trying to create the gallery using just media, but it seems now, easier to set up a post for each project. This way the descriptions/excerpts can show.
    My best regards,
    Sarah

    Trevor Moderator
    #219648

    Can I close this thread then?

    Sarah B Gregg
    #219650

    Yes

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

The topic ‘Customizing Results’ is closed to new replies.