Search Results Page

[Cristina]

Hi Tom!

I would like to change the layout of the search results page to something like this:

There is any chance to do it using some class that I can edit with css?

• This topic was modified 7 years, 11 months ago by Cristina.

[Tom]

The URL to the image doesn’t seem to be working?

[Cristina]

Sorry! Maybe with the direct link? https://s32.postimg.org/a3di2uphh/Captura_de_pantalla_2016_05_05_a_las_21_41_11.png

[Tom]

Working now 🙂

The Blog add-on allows you to show your posts in columns like that in Customize > Blog > Columns.

Then you could set your post images to display above your title in Customize > Blog > Post Images.

Let me know if you need more info.

[Cristina]

Thank you! But how can I change the background and the margins to create that effect, like boxes, and change the size of the texts?

And, there’s any possibility that instead of see a fragment of the text, it appears the meta description?

[Tom]

Well if you have your content layout set to separate containers (Customize > Layout > Content Layout), the boxes will be separated by the background color you have set.

To place the images right up against the border, this might help: https://gist.github.com/generatepress/b252781fe296fe698b9e

Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

You can set a manual excerpt when adding your post by using the Excerpt metabox. If you don’t see it, click “Screen Options” at the top right of the edit page, and check the checkbox next to the “Excerpt” option.

[Cristina]

I didn’t realize that the excerpt existed because I have posts instead of pages. I installed a plugin to correct it, so now it’s done! Thank you very much!!

About the other question, I realized that if I set the columns option, I have problems with the customization I did for another pages (for example the no-results page). So I tried to set the blog page with no columns, but putting the featured image in the left of the header and the excerpt, instead of above or below the header, but it doesn’t work, maybe I’m doing it wrong. How can I do that?

Thank you so so much for your help.

[Tom]

You can set the columns to display in specific categories with some PHP if you’re interested. Although it shouldn’t do anything to the no results page as is.

As for your question, you should be able to do this in “Customize > Blog > Post Images”.

There’s alignment options in there as well as sizing options.

Let me know 🙂

[Cristina]

Don’t worry about the columns, I’ll do it without them, it’s ok 🙂

About the alignment, the problem that I have is that to be on the left I have to set some specific width and height, and when I use an iPad it appears above the header in the center (which is good) but with that same size. I tried to change that using this css, but doesn’t work 🙁

@media (max-width: 768px) {.post-image {width: auto !important; height: auto !important;}}

[Tom]

Ah, in that case, don’t use the image sizes in the Customizer, do this:

@media (min-width: 769px) {
    .post-image img {
        max-width: 300px;
    }
}

Adjust the width to whatever you need 🙂

[Cristina]

Thank you so so much Tom! 🙂

[Tom]

You’re welcome 🙂

[Author]

Posts