Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • July 23, 2022 at 11:19 am #1359280
    95mc

    Hi,
    I would like change the search results layout.
    Here I send you a screenshots.

    View post on imgur.com


    I would like remove the number and the metadata and add the image.
    Could you help me?
    Thanks advance,

    BR,

    Antonio.

    July 23, 2022 at 2:18 pm #1359284
    Mike

    Hey Antonio,
    Thanks for your question, I tested this solution and found that it still works.
    I used this css to hide the metadata and to make the featured image 300px x 215px square:

    #top.search-results .search-result-counter {
    padding: 0;
}
#top.search-results .search-result-counter img {
  border-radius: 0;
  height: 100%;
}
#top.search-results .search-result-counter {
    height: 215px;
    width: 300px;
    background: transparent;
}
#top.search-results .template-search.content .entry-content-wrapper {
    height: 215px;
}
#top.search-results #main .post-meta-infos {
   display: none;
}
#top.search-results .entry-content,
#top.search-results .post-title {
margin-left: 280px;
}
#top.search-results .post-entry {
    padding-bottom: 20px;
}

    here was my results:
    2022-07-23_001.jpg

    Best regards,
    Mike

    August 4, 2022 at 12:52 pm #1360608
    95mc

    Hi Mike,

    Works perfect! Many thanks.

    Only two questions:
    – It´s possible save the loop-search.php file in enfold-child for the later updates?

    – Could remove the pagination in the search?

    Thanks advance,

    BR,

    Antonio.

    August 4, 2022 at 1:16 pm #1360614
    Mike

    Hi,
    To add the loop-search.php file to your child theme create a new folder called “includes” in the child theme directory and create a copy of the “loop-search.php” file inside of it.
    to hide the pagination please try this css:

    .template-search .pagination {
	display: none;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    August 4, 2022 at 1:34 pm #1360622
    95mc

    Hi Mike,

    Works perfect! Many thanks.

    I find a problem with the new search layout in mobile version.
    Maybe in mobile we have to change the text under the image and limited the text only in the container.
    Could you help me?
    Thanks advance.

    BR

    Antonio.

    August 4, 2022 at 2:07 pm #1360629
    95mc

    Hi Mike,

    I have include:

    .entry-content-wrapper.clearfix.standard-content {
    overflow: hidden;
    }

    For the overflow text and works.
    Could you help me to change the text under the image only in mobile versión?

    Thanks advance!

    BR,

    Antonio

    August 4, 2022 at 2:44 pm #1360637
    Yigit

    Hey Antonio,

    Could you please post a screenshot and show the changes you would like to make so we can make sure that we are on the same page? You can upload your screenshots on imgur.com and post the links here :)

    Regards,
    Yigit

    August 4, 2022 at 4:17 pm #1360652
    Guenni007

    the only thing i would change is the check – if there is a post thumbnail:

    so change ismaels code by surrounding it with an if clause:

    $searchthumb = get_the_post_thumbnail( $the_id, 'large' );
if( ! empty( $searchthumb ) ) {
	echo "<span class='search-result-counter {$counterclass}'>{$searchthumb}</span>";
}

    _____________________________________________________________________________________________

    i prefer to have the link on the image too and use square images : so i insert on that area instead:

    $searchthumb = get_the_post_thumbnail( $the_id, 'square' );
if( ! empty( $searchthumb ) ) {
	echo "<a class='slide-image search_image' href='".get_permalink()."'><span class='search-result-image'>{$searchthumb}</span></a>";
}

    my solution needs this in quick css:

    .search-result-image {
    display: block;
}
.search-result-image img {
    width: 120px;
    border: 1px solid #aaa
}
a.slide-image.search_image {
  overflow: visible !important;
}
a.search_image .image-overlay.overlay-type-extern {
  left: 0 !important
}

    see what it looks like on: https://webers-testseite.de/?s=portfolio

    August 4, 2022 at 4:29 pm #1360658
    95mc

    Hi Yigit,
    The image is in the previous post.

    Hi Guenni007,
    The problem is with the image the text is unreadable.
    Maybe remove the image only for mobile?

    Many thanks both,

    BR,

    Antonio

    August 4, 2022 at 4:51 pm #1360663
    Guenni007

    the text inside that image ?
    then just take the full image as before

    August 4, 2022 at 6:51 pm #1360674
    95mc

    Hi Guenni007,

    I mean the text behind the image.
    I got it! Attach the after-before
    Many thanks.

    Only one thing I remove the pagination but I would like that all the results apear in the same page.
    Could you help me?
    Thanks advance,

    BR,

    Antonio.

    August 4, 2022 at 7:05 pm #1360675
    Guenni007

    if your search results does not show too many results – you can easily increase the number of results to a high enough value – so there will be no pagination:

    function enfold_search_results_per_page( $wp_query ) {
	if ( is_search() ) {
		$wp_query->query_vars["posts_per_page"] = 999;
	}
}
add_filter( 'pre_get_posts', 'enfold_search_results_per_page' );
    August 4, 2022 at 7:31 pm #1360677
    95mc

    Hi Guenni007,

    Works perfect!
    Many thanks,

    BR

    Antonio.

    August 4, 2022 at 7:43 pm #1360681
    Yigit

    Hi,

    We are happy that @Guenni007 could help you out!
    Let us know if you have any other questions and enjoy the rest of your day :)


    @Guenni007     Thanks for your help :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘change layout search results’ is closed to new replies.