Search Results Default Featured Image

[LSeth]

I am setting a search results based on the Search Results Module that I have cloned. I am bringing in featured images, is there a way that I can set an image that would be the featured image if the post/page in the results has no featured image? Thanks.

[piersg]

@LSeth Haha classic, we've all been there

[piersg · Accepted solution]

@LSeth in the Hubspot search results module that you've cloned, there's this function addResult. You need to add an else statement to the bit that sets the featured image if it's undefined.

function addResult(title, url, description, featuredImage) {
      var newResult = document.importNode(resultTemplate.content, true);
      function isFeaturedImageEnabled() {
        if (
          newResult.querySelector('.hs-search-results__featured-image > img')
        ) {
          return true;
        }
      }
      newResult.querySelector('.hs-search-results__title').innerHTML = title;
      newResult.querySelector('.hs-search-results__title').href = url;
      newResult.querySelector(
        '.hs-search-results__description'
      ).innerHTML = description;
      if (typeof featuredImage !== 'undefined' && isFeaturedImageEnabled()) {
        newResult.querySelector(
          '.hs-search-results__featured-image > img'
        ).src=featuredImage;
      } else {
        // add else statement to set featured image to placeholder if there is no featured image
        newResult.querySelector(
          '.hs-search-results__featured-image > img'
        ).src='[url of placeholder image]';
      }
      resultsSection.appendChild(newResult);
    }

[ThemeMajer]

.........

function addResult(title, url, description, featuredImage) {
      var newResult = document.importNode(resultTemplate.content, true);
      function isFeaturedImageEnabled() {
        if (
          newResult.querySelector('.hs-search-results__featured-image > img')
        ) {
          return true;
        }
      }
      newResult.querySelector('.hs-search-results__title').innerHTML = title;
      newResult.querySelector('.hs-search-results__title').href = url;
      newResult.querySelector(
        '.hs-search-results__description'
      ).innerHTML = description;
      if (typeof featuredImage !== 'undefined' && isFeaturedImageEnabled()) {
        newResult.querySelector(
          '.hs-search-results__featured-image > img'
        ).src=featuredImage;
      } else {
        // add else statement to set featured image to placeholder if there is no featured image
        newResult.querySelector(
          '.hs-search-results__featured-image > img'
        ).src='[url of placeholder image]';
      }
      resultsSection.appendChild(newResult);
    }

Why....?

      newResult.querySelector('.hs-search-results__title').innerHTML = title;
      newResult.querySelector('.hs-search-results__title').href = url;
    

Redundant....

      function isFeaturedImageEnabled() {
        if (
          newResult.querySelector('.hs-search-results__featured-image > img')
        ) {
          return true;
        }
      }
    

Why...?

      function isFeaturedImageEnabled() {
        if (newResult.querySelector('.hs-search-results__featured-image > img') {
          return true;
        }
      }
       ... 
        newResult.querySelector(
          '.hs-search-results__featured-image > img'
        ).src=featuredImage;
       ...
          newResult.querySelector(
          '.hs-search-results__featured-image > img'
        ).src='[url of placeholder image]';
     

I could keep going. Bad code samples are not helpful. They only proliferate bad code and standards.

[piersg]

Hi @ThemeMajer, I merely edited the code from current default Hubspot search results module, that the OP said they were using. I did it this way to make it easy for the OP to understand; I only added three lines, where I put the comment "add else statement...", I didn't write the whole function.

[ThemeMajer]

@piersg No worries. Should've been explicit rather than dumping code. Was just musing at the quality of a core module used on X production websites etc was.

And sure minification blah blah blah, but people rely *way* too much on automated processes for everything (webpack, etc).

These have their place, but shaking processes and minification are still subject to the authors artistry. And we're the author to have taken greater care you'd see significantly improved minification etc even in some of the largest open source projects there are.

I was turning my nose up at something I considered.... Lacking and view as being far too prolific in code everywhere 

[GrantCarlile]

Nicely done adding the code snippet to make it clear. Streamlined solution too.

Grant CarlileGrant Carlile, RevOps Developer

RevPartners is an unmatched team of operators who design and execute revenue engines to supercharge your growth. 

[LSeth]

@piersg Sorry your code does work. I typed it in incorrectly. Thanks for the assist.

[LSeth]

@piersg I tried your else statement and it does not work. It's almost like the if statement is always true regardless of whether there is a featured image or not and does not get to the else statement you provided.

[dennisedson]

@LSeth 

Mind posting the code that you have so far?  What you will want is an if statement checking to see if there is a featured image.  If not, display a default image.

[LSeth]

@dennisedson The code is the Hubspot search module. I just cloned it so I can make the needed modifications.

[GrantCarlile]

Hi LSeth, this is Grant,

You can set featured images through HubL. The featured image and the alt text. Once you've found the posts without through your search module, the featured image varibale needs a URL to the featured image you want to use. Set it and forget it : ) 

Also, you can reference previous, as well as next post's featured image.

Hope this helps!

Onward,

Grant

Grant Carlile

Grant Carlile, RevOps Developer

RevPartners is an unmatched team of operators who design and execute revenue engines to supercharge your growth.