How to add a background to listing search

General HivePress
2

Hi @horizonbookings.com,

The search page doesn’t include a title/hero section by default, so this would require customisation. I previously implemented something similar myself, however, I’ve since reverted my customisations, as it pushed the search bar and page content below the fold in my scenario, which is bad for user experience.

Nevertheless, the HivePress AI suggests the following approach*:
*(I slightly tweaked it to make it easier for you)

Based on the training data, adding a featured hero image to the RentalHive search page requires a custom implementation. Here’s a snippet to help you get started:

PHP Snippet to Add Hero Image

Add this snippet using the Code Snippets plugin.

add_filter(
    'hivepress/v1/templates/listings_view_page',
    function($template) {
        return hivepress()->template->merge_blocks(
            $template,
            [
                'page_header' => [
                    'type'   => 'section',
                    'title'  => null,
                    '_order' => 5,
                    'blocks' => [
                        'hero_image' => [
                            'type'   => 'part',
                            'path'   => 'page/page-header-image',
                            '_order' => 10,
                        ],
                        'page_title' => [
                            'type'   => 'part',
                            'path'   => 'page/page-title',
                            '_order' => 20,
                        ],
                    ],
                ],
            ]
        );
    },
    1000
);

Create Custom Template Part

Create this file in your child theme:
/hivepress/page/page-header-image.php

<div class="header-hero header-hero--cover" style="background-image: url('YOUR-IMAGE-URL-HERE');">
    <div class="header-hero__content">
        <h1 class="header-hero__title">Search</h1>
    </div>
</div>

Add the following CSS via the backend of WordPress and visiting Appearance > Customise > Additional CSS

.header-hero__title {
    color: #ffffff;
    font-size: 3em;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    margin: 0;
    padding: 60px 20px;
}

.header-hero__content {
    max-width: 1200px;
    margin: 0 auto;
}

Important Notes:

  1. Replace YOUR-IMAGE-URL-HERE with your actual image URL from the Media Library
  2. This may require more CSS adjustments to match your design

If you need more complex customization, you may want to consider hiring a developer for a custom implementation, as this goes beyond the standard features.

Edit: Here’s my old topic where I asked for guidance on something similar. The answers may be of use to you, as well.

I hope this helps!

Cheers,
Chris :victory_hand:

1 Like