Skip to content

Commit

Permalink
Use responsive images / sourceset for Youtube thumbnails?
Browse files Browse the repository at this point in the history 
Fixes #297
  • Loading branch information
@KarelJanVanHaute
KarelJanVanHaute committed Apr 18, 2024
1 parent 199b9f9 commit 9525950
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 6 deletions.
7 changes: 4 additions & 3 deletions templates/_site/_snippet/_content/_blocks/_textVideo.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,20 @@
<picture>
{% if craft.imageOptimize.serverSupportsWebP() and image.extension != 'svg' and image.extension != 'gif' %}
<source srcset="{{ optimizedImage.srcsetWebP() }}"
sizes="(max-width: 479px) 95vw, (min-width: 480px) and (max-width: 639px) 100vw, (min-width: 640px) and (max-width: 767px) 100vw, (min-width: 768px) and (max-width: 1023px) 496px, (min-width: 1024px) and (max-width: 1279px) 624px, (min-width: 1280px) 736px"
sizes="(max-width: 479px) 100vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 378px, (min-width: 980px) and (max-width: 1199px) 458px, (min-width: 1200px) 568px"
type="image/webp"/>
{% endif %}
<img src="{{ optimizedImage.placeholderBox() }}"
srcset="{{ optimizedImage.srcset() }}"
sizes="(max-width: 479px) 95vw, (min-width: 480px) and (max-width: 639px) 100vw, (min-width: 640px) and (max-width: 767px) 100vw, (min-width: 768px) and (max-width: 1023px) 496px, (min-width: 1024px) and (max-width: 1279px) 624px, (min-width: 1280px) 736px"
sizes="(max-width: 479px) 100vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 378px, (min-width: 980px) and (max-width: 1199px) 458px, (min-width: 1200px) 568px"
width="{{optimizedImage.placeholderWidth}}" height="{{optimizedImage.placeholderHeight}}"
alt=""
class="js-bg-src" loading="lazy"/>
</picture>
{% else %}
{% if embed.type == "youtube" %}
<img src="https://i.ytimg.com/vi/{{embed.id}}/hqdefault.jpg" alt="" class="js-bg-src"/>
<img src="https://i.ytimg.com/vi/{{embed.id}}/hqdefault.jpg" alt="" class="js-bg-src" srcset="https://i.ytimg.com/vi/{{embed.id}}/maxresdefault.jpg 1280w, https://i.ytimg.com/vi/{{embed.id}}/sddefault.jpg 640w, https://i.ytimg.com/vi/{{embed.id}}/hqdefault.jpg 480w, https://i.ytimg.com/vi/{{embed.id}}/mqdefault.jpg 320w"
sizes="(max-width: 479px) 100vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 378px, (min-width: 980px) and (max-width: 1199px) 458px, (min-width: 1200px) 568px"/>
{% endif %}
{% if embed.type == "vimeo" %}
<img src="https://vumbnail.com/{{embed.id}}.jpg" alt="" class="js-bg-src"/>
Expand Down
7 changes: 4 additions & 3 deletions templates/_site/_snippet/_content/_blocks/_video.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,20 @@
<picture>
{% if craft.imageOptimize.serverSupportsWebP() and image.extension != 'svg' and image.extension != 'gif' %}
<source srcset="{{ optimizedImage.srcsetWebP() }}"
sizes="(max-width: 479px) 95vw, (min-width: 480px) and (max-width: 639px) 448px, (min-width: 640px) and (max-width: 767px) 608px, (min-width: 768px) and (max-width: 1023px) 736px, (min-width: 1024px) and (max-width: 1279px) 662px, (min-width: 1280px) 832px"
sizes="(max-width: 479px) 100vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 526px, (min-width: 980px) and (max-width: 1199px) 632px, (min-width: 1200px) 779px"
type="image/webp"/>
{% endif %}
<img src="{{ optimizedImage.placeholderBox() }}"
srcset="{{ optimizedImage.srcset() }}"
sizes="(max-width: 479px) 95vw, (min-width: 480px) and (max-width: 639px) 448px, (min-width: 640px) and (max-width: 767px) 608px, (min-width: 768px) and (max-width: 1023px) 736px, (min-width: 1024px) and (max-width: 1279px) 662px, (min-width: 1280px) 832px"
sizes="(max-width: 479px) 100vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 526px, (min-width: 980px) and (max-width: 1199px) 632px, (min-width: 1200px) 779px"
width="{{optimizedImage.placeholderWidth}}" height="{{optimizedImage.placeholderHeight}}"
alt=""
class="js-bg-src" loading="lazy"/>
</picture>
{% else %}
{% if embed.type == "youtube" %}
<img src="https://i.ytimg.com/vi/{{embed.id}}/hqdefault.jpg" alt="" class="js-bg-src"/>
<img src="https://i.ytimg.com/vi/{{embed.id}}/maxresdefault.jpg" alt="" class="js-bg-src" srcset="https://i.ytimg.com/vi/{{embed.id}}/maxresdefault.jpg 1280w, https://i.ytimg.com/vi/{{embed.id}}/sddefault.jpg 640w, https://i.ytimg.com/vi/{{embed.id}}/hqdefault.jpg 480w, https://i.ytimg.com/vi/{{embed.id}}/mqdefault.jpg 320w"
sizes="(max-width: 479px) 100vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 526px, (min-width: 980px) and (max-width: 1199px) 632px, (min-width: 1200px) 779px"/>
{% endif %}
{% if embed.type == "vimeo" %}
<img src="https://vumbnail.com/{{embed.id}}.jpg" alt="" class="js-bg-src"/>
Expand Down

0 comments on commit 9525950

Please sign in to comment.