mozilla
/
foundation.mozilla.org
зеркало из https://github.com/MozillaFoundation/foundation.mozilla.org.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Add image wrappe with background and aspect ratio 

The wrapper ensure that the correct space for the image is already
reserved. This avoids a layout shift when the image is rendering.

To signify the location of the image, a gray background is used on the
wrapper.
This commit is contained in:
Tibor Leupold 2023-01-19 16:52:42 -08:00
Родитель 3978abd391
Коммит 3522d98cb9
1 изменённых файлов: 30 добавлений и 28 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

58
network-api/networkapi/templates/fragments/blocks/card_grid_block.html
Просмотреть файл

@ -8,36 +8,38 @@
<div class="tw-px-4 small:tw-w-full {% if count > 2 %} large:tw-w-1/3 medium:tw-w-1/2 {% else %} medium:tw-w-1/2 {% endif %} tw-mb-5">
<div class="card-regular tw-h-full tw-flex tw-flex-col">
<picture>
{% comment %}
Because of the card layout, the image size is not increasing consistently with the device size.
The image sizes are based on the layout on a banner page with wide layout.
The designed image aspect ratio is 16:9.
<div class="tw-w-full tw-aspect-video tw-bg-gray-05">
<picture>
{% comment %}
Because of the card layout, the image size is not increasing consistently with the device size.
The image sizes are based on the layout on a banner page with wide layout.
The designed image aspect ratio is 16:9.
Screen sizes:
small: "576px"
medium: "768px"
large: "992px"
xlarge: "1200px"
"2xl": "1400px"
Screen sizes:
small: "576px"
medium: "768px"
large: "992px"
xlarge: "1200px"
"2xl": "1400px"
The picture element will use the first source with a matching media query.
Using min-media queries, we need to list the breakpoints in decending order, otherwise larger screens will always use the first listed (because that min-width query would be fulfilled).
{% endcomment %}
{% image card.image fill-512x288 as img_small %}
{% image card.image fill-1024x576 as img_small_2x %}
{% image card.image fill-336x189 as img_medium %}
{% image card.image fill-672x378 as img_medium_2x %}
{% image card.image fill-448x252 as img_large %}
{% image card.image fill-896x504 as img_large_2x %}
{% image card.image fill-592x333 as img_xlarge %}
{% image card.image fill-1184x666 as img_xlarge_2x %}
<source media="(min-width: 1200px)" srcset="{{ img_xlarge.url }}, {{ img_xlarge_2x.url }} 2x" />
<source media="(min-width: 992px)" srcset="{{ img_large.url }}, {{ img_large_2x.url }} 2x" />
<source media="(min-width: 768px)" srcset="{{ img_medium.url }}, {{ img_medium_2x.url }} 2x" />
<source media="(max-width: 767px)" srcset="{{ img_small.url }}, {{ img_small_2x.url }} 2x" />
<img class="tw-w-full" src="{{ img_small.url }}" alt="{{ img_small.alt_text }}" />
</picture>
The picture element will use the first source with a matching media query.
Using min-media queries, we need to list the breakpoints in decending order, otherwise larger screens will always use the first listed (because that min-width query would be fulfilled).
{% endcomment %}
{% image card.image fill-512x288 as img_small %}
{% image card.image fill-1024x576 as img_small_2x %}
{% image card.image fill-336x189 as img_medium %}
{% image card.image fill-672x378 as img_medium_2x %}
{% image card.image fill-448x252 as img_large %}
{% image card.image fill-896x504 as img_large_2x %}
{% image card.image fill-592x333 as img_xlarge %}
{% image card.image fill-1184x666 as img_xlarge_2x %}
<source media="(min-width: 1200px)" srcset="{{ img_xlarge.url }}, {{ img_xlarge_2x.url }} 2x" />
<source media="(min-width: 992px)" srcset="{{ img_large.url }}, {{ img_large_2x.url }} 2x" />
<source media="(min-width: 768px)" srcset="{{ img_medium.url }}, {{ img_medium_2x.url }} 2x" />
<source media="(max-width: 767px)" srcset="{{ img_small.url }}, {{ img_small_2x.url }} 2x" />
<img class="tw-w-full tw-h-full tw-object-cover" src="{{ img_small.url }}" alt="{{ img_small.alt_text }}" />
</picture>
</div>
<div class="tw-flex tw-flex-1">
<div class="tw-border-b-4 tw-border-gray-05 tw--mt-5 tw-bg-white tw-relative tw-mx-2 medium:tw-mx-4 tw-p-4 tw-w-full tw-flex tw-flex-col">