Я достиг строки адаптивного изображения для нашей редакционной временной шкалы, и теперь она выглядит следующим образом: http://prntscr.com/qokpcu
Чего я хочу добиться, так это добавить значок пользователя в левом нижнем углу каждого изображения и добавьте текст под ним, например: http://prntscr.com/qok629
Я попробовал все, что мог, но, похоже, я что-то делаю не так. Я не могу выровнять каждый текст по соответствующим изображениям. Кто-нибудь может помочь?
Вот код, который у меня сейчас есть. Я использую желоба, чтобы сделать его отзывчивым.
{%- assign gutter_width = 0 -%}
{%- assign aspect_total = 0 -%}
{% if block.settings.enable_gutter %}
{%- assign gutter_width = 1 -%}
{% endif %}
{%- assign gutter_total = gutter_width -%}
{% capture image_count %}{% if block.settings.image_1 %}+{% endif %}{% if block.settings.image_2 %}+{% endif %}{% if block.settings.image_3 %}+{% endif %}{% if block.settings.image_4 %}+{% endif %}{% endcapture %}
{%- assign image_index = 0 -%}
<div
data-subsection
data-section-id="{{ block.id }}"
{% if block.settings.enable_zoom %}data-section-type="photoswipe"{% endif %}>
<div class="image-row{% if block.settings.enable_gutter %} image-row--gutters{% endif %}">
{% if block.settings.image_1 == blank and block.settings.image_2 == blank and block.settings.image_3 == blank and block.settings.image_4 == blank and block.settings.image_5 == blank %}
<div class="image-row__placeholder">
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
<div class="image-row__placeholder">
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
<div class="image-row__placeholder">
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% endif %}
{% if block.settings.image_1 %}
{%- assign image_index = image_index | plus: 1 -%}
<div data-aos="row-of-{{ image_count | size }}">
<div class="image-row__image image-row-{{ block.id }}--1 image-wrap">
{%- assign img_url = block.settings.image_1 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% assign aspect_total = aspect_total | plus: block.settings.image_1.aspect_ratio %}
{% assign gutter_total = gutter_total | plus: gutter_width %}
<img class="lazyload photoswipe__image"
data-index="{{ image_index }}"
data-photoswipe-src="{{ block.settings.image_1.src | img_url: '1600x1600' }}"
data-photoswipe-width="{{ block.settings.image_1.width }}"
data-photoswipe-height="{{ block.settings.image_1.height }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1500]"
data-aspectratio="{{ block.settings.image_1.aspect_ratio }}"
data-sizes="auto"
alt="{{ block.settings.image_1.alt }}">
</div>
</div>
{% endif %}
{% if block.settings.image_2 %}
{%- assign image_index = image_index | plus: 1 -%}
<div data-aos="row-of-{{ image_count | size }}">
<div class="image-row__image image-row-{{ block.id }}--2 image-wrap">
{%- assign img_url = block.settings.image_2 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% assign aspect_total = aspect_total | plus: block.settings.image_2.aspect_ratio %}
{% assign gutter_total = gutter_total | plus: gutter_width %}
<img class="lazyload photoswipe__image"
data-index="{{ image_index }}"
data-photoswipe-src="{{ block.settings.image_2.src | img_url: '1600x1600' }}"
data-photoswipe-width="{{ block.settings.image_2.width }}"
data-photoswipe-height="{{ block.settings.image_2.height }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080]"
data-aspectratio="{{ block.settings.image_2.aspect_ratio }}"
data-sizes="auto"
alt="{{ block.settings.image_2.alt }}">
</div>
</div>
{% endif %}
{% if block.settings.image_3 %}
{%- assign image_index = image_index | plus: 1 -%}
<div data-aos="row-of-{{ image_count | size }}">
<div class="image-row__image image-row-{{ block.id }}--3 image-wrap">
{%- assign img_url = block.settings.image_3 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% assign aspect_total = aspect_total | plus: block.settings.image_3.aspect_ratio %}
{% assign gutter_total = gutter_total | plus: gutter_width %}
<img class="lazyload photoswipe__image"
data-index="{{ image_index }}"
data-photoswipe-src="{{ block.settings.image_3.src | img_url: '1600x1600' }}"
data-photoswipe-width="{{ block.settings.image_3.width }}"
data-photoswipe-height="{{ block.settings.image_3.height }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080]"
data-aspectratio="{{ block.settings.image_3.aspect_ratio }}"
data-sizes="auto"
alt="{{ block.settings.image_3.alt }}">
</div>
</div>
{% endif %}
{% if block.settings.image_4 %}
{%- assign image_index = image_index | plus: 1 -%}
<div data-aos="row-of-{{ image_count | size }}">
<div class="image-row__image image-row-{{ block.id }}--4">
{%- assign img_url = block.settings.image_4 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% assign aspect_total = aspect_total | plus: block.settings.image_4.aspect_ratio %}
{% assign gutter_total = gutter_total | plus: gutter_width %}
<img class="lazyload photoswipe__image"
data-index="{{ image_index }}"
data-photoswipe-src="{{ block.settings.image_4.src | img_url: '1600x1600' }}"
data-photoswipe-width="{{ block.settings.image_4.width }}"
data-photoswipe-height="{{ block.settings.image_4.height }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080]"
data-aspectratio="{{ block.settings.image_4.aspect_ratio }}"
data-sizes="auto"
alt="{{ block.settings.image_4.alt }}">
</div>
</div>
{% endif %}
{% if block.settings.image_5 %}
{%- assign image_index = image_index | plus: 1 -%}
<div data-aos="row-of-{{ image_count | size }}">
<div class="image-row__image image-row-{{ block.id }}--5">
{%- assign img_url = block.settings.image_5 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% assign aspect_total = aspect_total | plus: block.settings.image_5.aspect_ratio %}
{% assign gutter_total = gutter_total | plus: gutter_width %}
<img class="lazyload photoswipe__image"
data-index="{{ image_index }}"
data-photoswipe-src="{{ block.settings.image_5.src | img_url: '1600x1600' }}"
data-photoswipe-width="{{ block.settings.image_5.width }}"
data-photoswipe-height="{{ block.settings.image_5.height }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080]"
data-aspectratio="{{ block.settings.image_5.aspect_ratio }}"
data-sizes="auto"
alt="{{ block.settings.image_5.alt }}">
</div>
</div>
{% endif %}
</div>
</div>
{%- assign images_width = 100.0 | minus: gutter_total -%}
<style>
.image-row-{{ block.id }}--1 {
margin: 0 0 {{ gutter_width }}% {{ gutter_width }}%;
width: {{ block.settings.image_1.aspect_ratio | divided_by: aspect_total | times: images_width }}% !important;
}
.image-row-{{ block.id }}--1:after {
padding-bottom: {{ 100 | divided_by: block.settings.image_1.aspect_ratio }}%;
}
.image-row-{{ block.id }}--2 {
margin: 0 0 {{ gutter_width }}% {{ gutter_width }}%;
width: {{ block.settings.image_2.aspect_ratio | divided_by: aspect_total | times: images_width }}% !important;
}
.image-row-{{ block.id }}--2:after {
padding-bottom: {{ 100 | divided_by: block.settings.image_2.aspect_ratio }}%;
}
.image-row-{{ block.id }}--3 {
margin: 0 0 {{ gutter_width }}% {{ gutter_width }}%;
width: {{ block.settings.image_3.aspect_ratio | divided_by: aspect_total | times: images_width }}% !important;
}
.image-row-{{ block.id }}--3:after {
padding-bottom: {{ 100 | divided_by: block.settings.image_3.aspect_ratio }}%;
}
.image-row-{{ block.id }}--4 {
margin: 0 0 {{ gutter_width }}% {{ gutter_width }}%;
width: {{ block.settings.image_4.aspect_ratio | divided_by: aspect_total | times: images_width }}% !important;
}
.image-row-{{ block.id }}--4:after {
padding-bottom: {{ 100 | divided_by: block.settings.image_4.aspect_ratio }}%;
}
.image-row-{{ block.id }}--5 {
margin: 0 0 {{ gutter_width }}% {{ gutter_width }}%;
width: {{ block.settings.image_5.aspect_ratio | divided_by: aspect_total | times: images_width }}% !important;
}
.image-row-{{ block.id }}--5:after {
padding-bottom: {{ 100 | divided_by: block.settings.image_5.aspect_ratio }}%;
}
</style>
Я просто хочу добавить текст ниже и наложение значка пользователя на каждое изображение. Заранее спасибо!