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?

  • Quote from dosa

    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. ]);
    8. ?>


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

    Quote from dosa

    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.


    Quote from dosa

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



    Quote from dosa

    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>
    3. <p><a href="">
    7. </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!

    hi hus_hmd - I'm back on this search since I've migrated the site to a new server, now using Perch 3 Runway. And the key, I have moved the location and renamed from /community to /about/newsroom


    So now, of course using the same templates as above, I'm getting empty results. I imagine it's simply missing a connection somewhere with the rename, but I can't seem to find it. Hope you can help!


    Here's a summary:


    templates/search/search-results.html


    templates/layouts/blog_search_result.php

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


    templates/blog/post_search_result.html

    Code
    1. <div class="image"><a href="<perch:blog id="postURL" />"><img src="<perch:blog id="image" />" alt="<perch:blog id="postTitle" />"></a></div>
    2. <div class="content">
    3. <h2><a href="<perch:blog id="postURL" />"><perch:blog id="postTitle" /></a></h2>
    4. <perch:if exists="subtitle"><p><perch:blog id="subtitle" striptags="true" /></p></perch:if>
    5. </div>


    templates/search/search-form.html

    Code
    1. <perch:form id="search" method="get" role="search" action="/about/newsroom/search">
    2. <div>
    3. <perch:input type="search" id="q" placeholder="Search Newsroom" />
    4. <perch:input type="submit" value="Search" class="button button-small" />
    5. </div>
    6. </perch:form>


    The problem is when I search, the result is blank, as if it's not finding the PerchBlog source. However, the page still shows how many results, and an empty list of all the results.


    Also, FYI, in the CMS Settings panel, I have the "Blog post page path" set as /newsroom/{postSlug} ....this is intentional, my client wants the links this way. Could this be throwing off the connection to the search results? Everything else is working.

    Edited 2 times, last by dosa: Added a last piece of code that might help. ().

    I'd check things one by one until you find where it is not working.


    (1) Turn on debug mode and check for errors


    (2) Your search template is only set up to show results from the Blog app. If you get a result from another source it will output an empty <li></li>. Does the term test return any Blog results? You can restrict the search to the Blog app:


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



    (3) Check what you're getting what expect. Output the result_url and/or showall the available variables. Is it a blog post URL like you expect?


    HTML
    1. <perch:if id="result_source" value="PerchBlog">
    2. <perch:search id="result_url">
    3. <perch:showall>
    4. </perch:if>

    Everything seems to be working, the showall has all the data, but still the <li>'s are empty. Perhaps I have the syntax wrong? I was already filtering via the apps array, but it looks like my syntax is different. (neither work though, same results)


    PHP
    1. <?php
    2. $query = perch_get('q');
    3. perch_content_search($query, array(
    4. 'apps' => ['PerchBlog'],
    5. 'template'=>'search-result.html'
    6. ));
    7. ?>


    No errors are showing in the debug mode either. It confirms the template being used. And that code is on post_search_result.html:


    Code
    1. <div class="image"><a href="<perch:blog id="postURL" />"><img src="<perch:blog id="image" />" alt="<perch:blog id="postTitle" />"></a></div>
    2. <div class="content">
    3. <h2><a href="<perch:blog id="postURL" />"><perch:blog id="postTitle" /></a></h2>
    4. <perch:if exists="subtitle"><p><perch:blog id="subtitle" striptags="true" /></p></perch:if>
    5. </div>

    UPDATE: it's working, but because I hidden a variable in testing on the 'blog_search_result.php" page to this:

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