[Support request] Display Search Results on same page without page refresh

[bluebit]

This is my homepage with a search box

When you search for “animal” the results should look like this website: https://demos.wolfthemes.com/retine/?s=&post_type=attachment

search results should appear in masonry photo style and when you scroll down the page more photos should load.

My Question: What’s the best way to go about creating this? Which plugins, snippets, css code?

I’d like it that when someone presses Enter, the page doesn’t refresh, search results are shown below. Also, there should already be masonry grid of photos being shown even before someone uses the search box, you can see underneath the search box there are tags, i plan to make these clickable and the results after click should be shown on the same page,no page refresh.

[bluebit]

I found this https://infinite-scroll.com/demo/masonry/

but don’t know how i can incorporate it into generatpress theme with search results, each image in the masonry layout would be linked to its product page.

[Tom]

GeneratePress has masonry within GPP if you enable columns: Customize > Layout > Blog

However, you’d need something custom built to have the hover/lightbox effects.

Have you looked into plugins that may offer this kind of functionality?

[bluebit]

I actually don’t need a lightbox effect, just show the images in the masonry layout and when image is clicked on goes to the product page

So could i make this work with Generatepress columns masonry and search?

The masonry images would only be needed on the homepage for search results underneath the search box.

I currently have the search box configured to show only “tags” so if you search for animal it shows all images tagged with “animal”. Just need to someone show a masonry style layout on the homepage, and clicking on each image sends the user to its product page, like here:

[bluebit]

I found plugins, but they all show lightbox effect which i dont need, i just need images linked to the product page.

What I found
https://www.wordpress-extra.gallery/showcase/fullwidth-mosaic-with-zoom-effect-and-overlay/

https://www.final-tiles-gallery.com/infinite-scroll

Maybe this one?
https://www.contentviewspro.com/

My main concern is how to show the search results on the home page without a page refresh and images load with ajax.

[Tom]

You should be able to achieve that with the options then. Have you tried enabling columns and masonry in “Customize > Layout > Blog”?

[bluebit]

Just enabled it, but it looks like this:

how to make it look like this: https://infinite-scroll.com/demo/masonry/

– Remove Title: Search Results for: animal
– Remove Image Titles
– padding of images/image sizes

[Tom]

Give this CSS a shot:

.search-results .page-header,
.search-results .entry-header,
.search-results .entry-summary {
    display: none;
}

.search-results .inside-article {
    padding: 10px;
}

.post-image {
    margin-top: 0;
}

[bluebit]

Take a look and on mobile:

I also made the “animal” tag underneath the searchbox clickable 🙂

I think i found a problem with padding on the rows below the first row have extra top padding that needs to be removed. How I do this?

[Tom]

I just made an adjustment to the CSS above. Let me know if it fixes it 🙂

[bluebit]

I don’t think it worked, take a look:

between 1st and 2nd row there is a big of white space between the images.

Also, currently on mobile it’s showing only 2 columns of images, how can i change mobile to show 3 columns of images?

[Tom]

One last change made to the code above.

Try this for the columns:

@media (max-width: 1024px) and (min-width: 768px) {
    .generate-columns {
        width:33.33333%
    }
}

[bluebit]

we almost got it, take a look:

I tried the code and tweaked it a little

.search-results .page-header,
.search-results .entry-header,
.search-results .entry-summary {
display: none;
}

.search-results .inside-article {
padding-top: 0px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 0px;

}

.post-image {
margin-top: 0px;
}

what i dont understand is how there is still padding when top is 0px and margin top is 0px, where is the white space coming from in the second column of images? There should be 0 padding/margin in the second between the second column of images, they should be kissing each other.

the code for the making 3 columns on mobile didnt work look:

[Tom]

Try this to remove the rest of the spacing:

.search-results .inside-article {
    padding: 0;
}

Try this for the mobile columns:

@media (max-width: 1024px) and (min-width: 768px) {
    .generate-columns,
    .grid-sizer {
        width:33.33333%
    }
}

[bluebit]

sweeet that mobile code worked and looks awesome!!!

The first code worked partially, this is how it looks now, i switched it from 4 to 3 pics in a column:

Do you know how i can add padding or margin only to the top 3 images that are touching the header? I know we removed that white space, but if I add white space to those top 3 images it also adds it to the images below which i dont want.

[Author]

Posts