DAWN: Add image to page results in site search

[CarlaReig]

Hi, 
I've been trying to figure out how to add a custom image to page results in site search (see image below). My desired outcome is to get a custom image as background for the page result instead of the default solid white. I tried to implement some inline CSS but I didn't get it to work. You can find my store at https://www.algodonblanco.es/

[CarlaReig]

I would be very thankful if you could help me with this!

[BlackUmbrella]

To implement this solution, you'll need to:

1. First, create a custom metafield for pages:
   • Go to Settings > Custom data > Metafields
   • Select "Pages" as the resource
   • Add a new metafield with:
     • Name:  Featured Image
     • Namespace and Key: (it will automatically generate to 'custom.feature_image')
     • Description: Featured Image
     • Type: file
2. Add images to your pages:
   • Edit each page
   • Scroll down to the Metafields section
   • Upload the desired featured image

The steps above will add the the option to add a feature image to pages.

1. Now, Modify your theme code:
   • Go to Online Store > Themes
   • Click "Actions" > "Edit code"
   • Find the main search page (usually in sections/main-search.liquid and comment the below code.

{% comment %}
                      {%- when 'page' -%}
                        <div class="article-card-wrapper card-wrapper underline-links-hover">
                          <div
                            class="card card--card card--text ratio color-{{ settings.blog_card_color_scheme }}"
                            style="--ratio-percent: 100%;"
                          >
                            <div class="card__content">
                              <div class="card__information">
                                <h3 class="card__heading">
                                  <a href="{{ item.url }}" class="full-unstyled-link">
                                    {{ item.title | truncate: 50 | escape }}
                                  </a>
                                </h3>
                              </div>
                              <div class="card__badge {{ settings.badge_position }}">
                                <span class="badge color-{{ settings.color_schemes | first }}">
                                  {{- 'templates.search.page' | t -}}
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      {% endcomment %}​

• Insert the code below, where the code above was, and save.

 {%- when 'page' -%}
<div class="article-card-wrapper card-wrapper underline-links-hover">
  <div class="card article-card card--standard{% if item.metafields.custom.featured_image %} card--media{% endif %}" style="--ratio-percent: 100%;">
    <div class="card__inner color-{{ settings.blog_card_color_scheme }} gradient ratio" style="--ratio-percent: 100%;">
      {% if item.metafields.custom.featured_image %}
        <div class="article-card__image-wrapper card__media">
          <div class="article-card__image media media--hover-effect">
            {%- assign image = item.metafields.custom.featured_image -%}
            <img
              srcset="{%- if image.width >= 165 -%}{{ image | image_url: width: 165 }} 165w,{%- endif -%}
                {%- if image.width >= 360 -%}{{ image | image_url: width: 360 }} 360w,{%- endif -%}
                {%- if image.width >= 533 -%}{{ image | image_url: width: 533 }} 533w,{%- endif -%}
                {%- if image.width >= 720 -%}{{ image | image_url: width: 720 }} 720w,{%- endif -%}
                {%- if image.width >= 1000 -%}{{ image | image_url: width: 1000 }} 1000w,{%- endif -%}
                {%- if image.width >= 1500 -%}{{ image | image_url: width: 1500 }} 1500w,{%- endif -%}
                {{ image | image_url }} {{ image.width }}w"
              src="{{ image | image_url: width: 533 }}"
              sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
              alt="{{ image.alt | escape }}"
              class="motion-reduce"
              loading="lazy"
              width="{{ image.width }}"
              height="{{ image.height }}"
            >
          </div>
        </div>
      {% endif %}
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading">
            <a href="{{ item.url }}" class="full-unstyled-link">
              {{ item.title | truncate: 50 | escape }}
            </a>
          </h3>
        </div>
        <div class="card__badge top right">
          <span class="badge color-{{ settings.color_schemes | first }}">
            {{- 'templates.search.page' | t -}}
          </span>
        </div>
      </div>
    </div>
    {% if item.metafields.custom.featured_image %}
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading">
            <a href="{{ item.url }}" class="full-unstyled-link">
              {{ item.title | truncate: 50 | escape }}
            </a>
          </h3>
        </div>
        <div class="card__badge top right">
          <span class="badge color-{{ settings.color_schemes | first }}">
            {{- 'templates.search.page' | t -}}
          </span>
        </div>
      </div>
    {% endif %}
  </div>
</div>

Let me know if that works for you.

[AudreyD]

Dear BlackUmbrella,

I have the same issue with Craft theme (no featured image associated to pages > no image but a solid color in search result). I implemented your modifications but it is not working. Instead the solid color for a specific page, the page becomes invisible (no text no image). 

Do you have an idea on how to add a featured image to pages in Craft Theme?

Thank you very much for your help,

Audrey 

[BlackUmbrella]

Hi @AudreyD. Solution for Craft Theme.
Remember to follow the metafields step from above. That will add an main image to your page.

Online Store > Themes > Edit Code > main-search.liquid.
Wrap the code below between {% comment %} and {% endcomment %}.

{%- when 'page' -%}
                        <div class="article-card-wrapper card-wrapper underline-links-hover">
                          <div
                            class="card card--card card--text ratio color-{{ settings.blog_card_color_scheme }}"
                            style="--ratio-percent: 100%;"
                          >
                            <div class="card__content">
                              <div class="card__information">
                                <h3 class="card__heading">
                                  <a href="{{ item.url }}" class="full-unstyled-link">
                                    {{ item.title | truncate: 50 | escape }}
                                  </a>
                                </h3>
                              </div>
                              <div class="card__badge {{ settings.badge_position }}">
                                <span class="badge color-{{ settings.color_schemes | first }}">
                                  {{- 'templates.search.page' | t -}}
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>

Insert the following code in place of the previous code, leaving the previous code commented out:

{%- when 'page' -%}
  <div class="article-card-wrapper card-wrapper underline-links-hover">
    <div class="card article-card card--{{ settings.blog_card_style }} {% if item.metafields.custom.featured_image %}card--media{% else %}card--text{% endif %} {% if settings.blog_card_style == 'card' %}color-{{ settings.blog_card_color_scheme }} gradient{% endif %}">
      <div class="card__inner ratio" style="--ratio-percent: 100%;">
        {%- if item.metafields.custom.featured_image -%}
          <div class="article-card__image-wrapper card__media">
            <div class="article-card__image media media--hover-effect">
              {{ item.metafields.custom.featured_image | image_url: width: 533 | image_tag: 
                loading: 'lazy',
                class: 'motion-reduce',
                width: 533,
                height: 533
              }}
            </div>
          </div>
        {%- endif -%}
        <div class="card__content">
          <div class="card__information">
            <h3 class="card__heading">
              <a href="{{ item.url }}" class="full-unstyled-link">
                {{ item.title | truncate: 50 | escape }}
              </a>
            </h3>
          </div>
          <div class="card__badge bottom left">
            <span class="badge color-scheme-1">Page</span>
          </div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading">
            <a href="{{ item.url }}" class="full-unstyled-link">
              {{ item.title | truncate: 50 | escape }}
            </a>
          </h3>
        </div>
      </div>
    </div>
  </div>

[AudreyD]

Hi @BlackUmbrella ,

Thank you very much for all your help!

Kind regards,

Audrey