TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 05:37:34 +03:00
Code Issues Projects Releases Wiki Activity

Fixed missing favicon layout in the Recommendations template (#18766)

Browse Source 
refs https://github.com/TryGhost/Product/issues/3940
- when a favicon url is null, don't render the img element at all
- when a favicon fails to load, hide the img element from the DOM
This commit is contained in:
Sag 2023-10-25 16:13:37 -03:00 committed by GitHub
parent 807e613386
commit 6db0deb58e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ghost/core/core/frontend/helpers/tpl/recommendations.hbs
View File

@ -3,7 +3,11 @@
{{#each recommendations as |rec|}} {{#each recommendations as |rec|}}
<li class="recommendation"> <li class="recommendation">
<a href="{{rec.url}}" data-recommendation="{{rec.id}}" target="_blank" rel="noopener"> <a href="{{rec.url}}" data-recommendation="{{rec.id}}" target="_blank" rel="noopener">
<img class="recommendation-favicon" src="{{rec.favicon}}" alt="{{rec.title}}" loading="lazy"> <div class="recommendation-favicon">
{{#if rec.favicon}}
<img src="{{rec.favicon}}" alt="{{rec.title}}" loading="lazy" onerror="this.style.display='none';">
{{/if}}
</div>
<h5 class="recommendation-title">{{rec.title}}</h5> <h5 class="recommendation-title">{{rec.title}}</h5>
<span class="recommendation-url">{{readable_url rec.url}}</span> <span class="recommendation-url">{{readable_url rec.url}}</span>
<p class="recommendation-description">{{rec.description}}</p> <p class="recommendation-description">{{rec.description}}</p>

22
ghost/core/test/unit/frontend/helpers/recommendations.test.js
View File

@ -67,11 +67,13 @@ describe('{{#recommendations}} helper', function () {
response.should.be.an.Object().with.property('string'); response.should.be.an.Object().with.property('string');
const expected = trimSpaces(html` const expected = html`
<ul class="recommendations"> <ul class="recommendations">
<li class="recommendation"> <li class="recommendation">
<a href="https://recommendations1.com" data-recommendation="1" target="_blank" rel="noopener"> <a href="https://recommendations1.com" data-recommendation="1" target="_blank" rel="noopener">
<img class="recommendation-favicon" src="https://recommendations1.com/favicon.ico" alt="Recommendation 1" loading="lazy"> <div class="recommendation-favicon">
<img src="https://recommendations1.com/favicon.ico" alt="Recommendation 1" loading="lazy" onerror="this.style.display='none';">
</div>
<h5 class="recommendation-title">Recommendation 1</h5> <h5 class="recommendation-title">Recommendation 1</h5>
<span class="recommendation-url">recommendations1.com</span> <span class="recommendation-url">recommendations1.com</span>
<p class="recommendation-description">Description 1</p> <p class="recommendation-description">Description 1</p>
@ -79,17 +81,25 @@ describe('{{#recommendations}} helper', function () {
</li> </li>
<li class="recommendation"> <li class="recommendation">
<a href="https://recommendations2.com" data-recommendation="2" target="_blank" rel="noopener"> <a href="https://recommendations2.com" data-recommendation="2" target="_blank" rel="noopener">
<img class="recommendation-favicon" src="https://recommendations2.com/favicon.ico" alt="Recommendation 2" loading="lazy"> <div class="recommendation-favicon">
<img src="https://recommendations2.com/favicon.ico" alt="Recommendation 2" loading="lazy" onerror="this.style.display='none';">
</div>
<h5 class="recommendation-title">Recommendation 2</h5> <h5 class="recommendation-title">Recommendation 2</h5>
<span class="recommendation-url">recommendations2.com</span> <span class="recommendation-url">recommendations2.com</span>
<p class="recommendation-description">Description 2</p> <p class="recommendation-description">Description 2</p>
</a> </a>
</li> </li>
</ul> </ul>
`); `;
const actual = trimSpaces(response.string); const actual = response.string;
actual.should.equal(expected); // Uncomment to debug
// console.log('Expected:');
// console.log(expected);
// console.log('Actual:');
// console.log(actual);
trimSpaces(actual).should.equal(trimSpaces(expected));
}); });
describe('when there are no recommendations', function () { describe('when there are no recommendations', function () {