I have cloned Search Result Module of my Blog site to customize it but The clone module doesn’t show any feature Image. when i enable the default Search Result Featured images are showing perfectly, but when i use the clone version the Feature Images aren’t displaying. Please see the Screenshot:
Below is the code of Site Search Result module:
Module. HTML (HTML + HubL)
<div class=“hs-search-results”>
<template class=“hs-search-results__template”>
<li>
{% if module.display_featured_images %}
<div class=“hs-search-results__featured-image”>
<img src=“”>
</div>
{% endif %}
<a href=“#” class=“hs-search-results__title”>Content Title</a>
<p class=“hs-search-results__description”>Description</p>
</li>
</template>
<ul id=“hsresults” class=“hs-search-results__listing”></ul>
<div class=“hs-search-results__pagination” data-search-path=“{{ site_settings.content_search_results_page_path }}”>
<a href=“” class=“hs-search-results__prev-page”></a>
<a href=“” class=“hs-search-results__next-page”></a>
</div>
</div>
=========================================
Module.css
=========================================
.hs-search-results__listing {
margin: 0;
padding: 0;
list-style: none;
}
.hs-search-results__listing li {
margin: 0;
padding: 0;
}
.hs-search-highlight {
font-weight: bold;
}
.hs-search-results__prev-page {
float: left;
}
.hs-search-results__next-page {
float: right;
}
========================================
module.js
========================================
var hsResultsPage = function(_resultsClass) {
function buildResultsPage(_instance) {
var resultTemplate = _instance.querySelector(
‘.hs-search-results__template’
),
resultsSection = _instance.querySelector(‘.hs-search-results__listing’),
searchPath = _instance
.querySelector(‘.hs-search-results__pagination’)
.getAttribute(‘data-search-path’),
prevLink = _instance.querySelector(‘.hs-search-results__prev-page’),
nextLink = _instance.querySelector(‘.hs-search-results__next-page’);
var searchParams = new URLSearchParams(window.location.search.slice(1));
function getTerm() {
return searchParams.get(‘term’) || ‘’;
}
function getOffset() {
return parseInt(searchParams.get(‘offset’)) || 0;
}
function getLimit() {
return parseInt(searchParams.get(‘limit’));
}
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;
}
resultsSection.appendChild(newResult);
}
function fillResults(results) {
results.results.forEach(function(result, i) {
addResult(
result.title,
result.url,
result.description,
result.featuredImageUrl
);
});
}
function emptyPagination() {
prevLink.innerHTML = ‘’;
nextLink.innerHTML = ‘’;
}
function emptyResults(searchedTerm) {
resultsSection.innerHTML =
‘<div class=“hs-search__no-results”><p>Sorry. There are no results for "’ +
searchedTerm +
‘"</p>’ +
‘<p>Try rewording your query, or browse through our site.</p></div>’;
}
function setSearchBarDefault(searchedTerm) {
var searchBars = document.querySelectorAll(‘.hs-search-field__input’);
Array.prototype.forEach.call(searchBars, function(el) {
el.value = searchedTerm;
});
}
function httpRequest(term, offset) {
var SEARCH_URL = ‘/_hcms/search?’,
requestUrl = SEARCH_URL + searchParams + ‘&analytics=true’,
request = new XMLHttpRequest();
request.open(‘GET’, requestUrl, true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
var data = JSON.parse(request.responseText);
setSearchBarDefault(data.searchTerm);
if (data.total > 0) {
fillResults(data);
paginate(data);
} else {
emptyResults(data.searchTerm);
emptyPagination();
}
} else {
console.error(‘Server reached, error retrieving results.’);
}
};
request.onerror = function() {
console.error(‘Could not reach the server.’);
};
request.send();
}
function paginate(results) {
var updatedLimit = getLimit() || results.limit;
function hasPreviousPage() {
return results.page > 0;
}
function hasNextPage() {
return results.offset <= results.total - updatedLimit;
}
if (hasPreviousPage()) {
var prevParams = new URLSearchParams(searchParams.toString());
prevParams.set(
‘offset’,
results.page * updatedLimit - parseInt(updatedLimit)
);
prevLink.href = ‘/’ + searchPath + ‘?’ + prevParams;
prevLink.innerHTML = ‘< Previous page’;
} else {
prevLink.parentNode.removeChild(prevLink);
}
if (hasNextPage()) {
var nextParams = new URLSearchParams(searchParams.toString());
nextParams.set(
‘offset’,
results.page * updatedLimit + parseInt(updatedLimit)
);
nextLink.href = ‘/’ + searchPath + ‘?’ + nextParams;
nextLink.innerHTML = ‘Next page >’;
} else {
nextLink.parentNode.removeChild(nextLink);
}
}
var getResults = (function() {
if (getTerm()) {
httpRequest(getTerm(), getOffset());
} else {
emptyPagination();
}
})();
}
(function() {
var searchResults = document.querySelectorAll(_resultsClass);
Array.prototype.forEach.call(searchResults, function(el) {
buildResultsPage(el);
});
})();
};
if (
document.attachEvent
? document.readyState === ‘complete’
: document.readyState !== ‘loading’
) {
var resultsPages = hsResultsPage(‘div.hs-search-results’);
} else {
document.addEventListener(‘DOMContentLoaded’, function() {
var resultsPages = hsResultsPage(‘div.hs-search-results’);
});
}
========================================
Hi @Sohail1, sorry for my late reply, I was on vacations and didn’t see @dennisedson’s mention.
Checking your code, seems like the issue might be on the Javascript part since there is where you add the image src atribute. In this case I would recommend you debugging your code, maybe try to print using console.log the values of some variables like featuredImage in order to see where the code is not working as it should.
Hi!
Same issue. Featured image not showing up in the blog results.
I have cloned the search_results module, turned the display featured image module ON, relinked the new search_restults module in the result listings template and it’s still not showing up.
All that is showing up in the webpage inspect is and emply DIV: div class=“hs-search-results__featured-image”></div>
Should it paste some .src featured-image into the div?
Thank you! Appreciated.
Cristian
