wonderfulfrog/wonderfulfrog.com
1
0
Fork 0
Code Issues Pull requests Activity Actions

feat: add placeholder for images with invalid src

Browse source
This commit is contained in:
Devin Haska 2024-03-22 16:27:45 -07:00
parent 2baba97451
commit 0e3ef370c7
3 changed files with 30 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/css/blocks/image-placeholder.css Normal file
View file

@ -0,0 +1,13 @@
.image-placeholder {
background-color: var(--color-surface);
border-radius: var(--spacing-1);
width: 100%;
height: 100%;
font-size: 0.8em;
line-height: 1.125em;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-1);
text-align: center;
}

12
src/now.html
View file

@ -19,8 +19,11 @@ title: /now
<a href="{{ album.url }}"
target="_blank"
rel="external noreferrer noopener">
<p class="[ visually-hidden ]">{{ album.artist }} - {{ album.album }}</p>
{% image album.imageUrl, "" %}
{% set textContent %}
{{ album.artist }} - {{ album.album }}
{% endset %}
<p class="[ visually-hidden ]">{{ textContent }}</p>
{% image album.imageUrl, "", "", "", textContent %}
</a>
</li>
{% endfor %}
@ -32,8 +35,11 @@ title: /now
<a href="{{ movie.url }}"
target="_blank"
rel="external noreferrer noopener">
{% set textContent %}
{{ movie.title }}
{% endset %}
<p class="[ visually-hidden ]">{{ movie.title }}</p>
{% image movie.imgSrc, "" %}
{% image movie.imgSrc, "", "", "" , textContent %}
</a>
</li>
{% endfor %}