Use The Image In A Blog Post In Search Results

  • Hi all. Trying to get the tag to use the images inside blog posts when searched. I've got the <perch:showall> tag on, but none of the ID's seem to have the image URL. How do I find this? Or if it doesn't exist, how do I create a place for an image that the search function can find and use?

  • Where to I put the show all tag? I've tried a few spots, but I don't see anything.


    What if I add an element CMS editors can add to a post that I reference specifically for the search thumbnail. Where would that new region need to go to get it under the search?

  • Where to I put the show all tag? I've tried a few spots, but I don't see anything.

    You would add it to your search results template.



    If you really need to make all the Blog post fields available in search result, there are workarounds. I'll go over one:


    Add conditional tags to separate the search results based on the source:



    Add a Perch Layout include and pass the result URL as a Layout variable:


    HTML
    1. <perch:if id="result_source" value="PerchBlog">
    2. <!--* Search result from the Blog app *-->
    3. <perch:layout path="blog_search_result" url="<perch:search id="result_url">">
    4. <perch:else>
    5. <!--* Everything else *-->
    6. </perch:if>


    Create /perch/templates/layouts/blog_search_result.php and filter the posts using the result URL:


    PHP
    1. <?php
    2. perch_blog_custom([
    3. 'template' => 'post_search_result',
    4. 'filter' => 'postURL',
    5. 'value' => perch_layout_var('url', true),
    6. ]);


    Create the template /perch/templates/blog/post_search_result.html and include any Blog post field you want.

  • I am missing something here. For the search page, here is the call for the results currently:

    PHP
    1. <?php
    2. $query = perch_get('q');
    3. perch_content_search($query, array(
    4. 'count'=>5,
    5. 'from-path'=>'/community',
    6. 'excerpt-chars'=>300,
    7. // 'template'=>'my_template.html'
    8. ));
    9. ?>

    So where do I add the "post_search_template" I've created? You're suggesting the "perch_blog_custom" element, I've got all the other pieces lined up, but I'm not sure how to do the filtering now. Does the above need to be combined with this below?

    PHP
    1. <?php
    2. perch_blog_custom([
    3. 'template' => 'post_search_result',
    4. 'filter' => 'postURL',
    5. 'value' => perch_layout_var('url', true),
    6. ]);
    7. ?>


    To confirm, I've made the "post_search_result.html" page in the templates/blog folder, which looks like this...

    And finally the "blog_search_result", which is in the templates/layouts/global folder looks like this:

  • My comment included the path for each template ^^!


    The function perch_content_search() uses the template templates/search/search-result.html by default. I'll assume you are using that.


    With the search-result.html template you output the HTML for regular search results. However, when the search result source is the Blog app you use a Perch Layout include to output the search result item. Perch Layouts are PHP files. So the following:


    HTML
    1. <perch:layout path="blog_search_result" url="<perch:search id="result_url">">


    Includes the PHP file templates/layouts/blog_search_result.php. Inside this file you use the function perch_blog_custom() to output the blog search result. This function renders another HTML template. The template you render with this function has to be placed in the directory templates/blog/ like all your other Blog app templates.



    In other words, if it's a regular search result:


    perch_content_search() -> templates/search/search-result.html


    If the search result source is the Blog app:


    perch_content_search() -> templates/search/search-result.html -> templates/layouts/blog_search_result.php (which uses perch_blog_custom()) -> templates/blog/post_search_result.html

  • Getting closer. Everything matches your notes, but the results still are not showing.


    1. What is the 'post_search_result.html' page supposed to look like? Just like the search-result.html?
    2. I'm limiting the search to /community (which we call our Blog) so all results all blog-only (which we want). But the results are showing in the regular layout from the search-result.html template. With some testing, I see it's pulling in the post_search_result.php layout, but it's stopping there.
    3. Using Perch Runway 2.8.29 ......does that mean I need ending slashes somewhere?


    My search-result.html page includes:


    My blog_search_result.php page:

    PHP
    1. <?php
    2. perch_blog_custom([
    3. 'template' => 'post_search_result',
    4. 'filter' => 'postURL',
    5. 'value' => perch_layout_var('url', true),
    6. ]);
    7. ?>


    My post_search_result.html page (with some yellow styling so I can see which is which):

  • What is the 'post_search_result.html' page supposed to look like? Just like the search-result.html?

    It should be used to output the search results of a single blog post.


    I'm limiting the search to /community (which we call our Blog) so all results all blog-only (which we want). But the results are showing in the regular layout from the search-result.html template. With some testing, I see it's pulling in the post_search_result.php layout, but it's stopping there.

    If you want to limit the search results to the Blog app, you would use the apps option:


    PHP
    1. perch_content_search(perch_get('q'), [
    2. 'apps' => ['PerchBlog'],
    3. ]);



    Using Perch Runway 2.8.29 ......does that mean I need ending slashes somewhere?


    Yes. Your template tags need to be self-closing />.

  • Ok. The Blog app filter works the same as the from-path, but I've switched it anyway.


    Got it on the self-closing now. Now the search-results.html has:

    ...but the results show like this (with blank spots where the post_search_result.html elements should be). Seems like the layout is not pulling in the right data.

    From the "background:yellow" style, I can see the layout surrounding HTML. But why isn't is showing any perch:search elements? This is the post_search_result.html layout, which is being called on the search-result.html page via the perch:layout, then the layout calls up the post_search_result template which looks like this:


    But as you can see at the top, the content is blank.

  • Thanks for that HTML correction. But the elements from the post_search_result.html page aren't connecting, they are still blank.


    This:

    Code
    1. <h2><a href="<perch:search id="result_url" />"><perch:search id="result_title" /></a></h2>
    2. <perch:if exists="result_excerpt" /><p class="excerpt">&hellip;<perch:search id="result_excerpt" encode="false" />&hellip;</p></perch:if>
    3. <p><a href="<perch:search id="result_url" />">
    4. <perch:if exists="result_pageNavText" />
    5. <perch:search id="result_pageNavText" />
    6. <perch:else />
    7. <perch:search id="result_url" />
    8. </perch:if>
    9. </a></p>

    Is resulting in this:

    Code
    1. <h2><a href=""></a></h2>
    2. <p><a href="">
    3. </a></p>
  • Your post_search_result.html template is like any other blog template. You need to use the perch:blog name space and you need to use the actual blog post fields. You are no longer in the context of the search there.


    So you would use:


    HTML
    1. <h2><a href="<perch:blog id="postURL" />"><perch:blog id="postTitle" /></a></h2>
  • Awesome!! That is was the missing piece. Because the "post_search_result.html" was part of the search, I assumed it was perch:search, not perch:blog. Now I can pull in anything from the post.html and similar template - sweet.


    I really appreciate your persistence in helping me Hussein. Thanks!