Bildbanner nebeneinander anzeigen

[Stevlon]

Hallo Zusammen,

ich mache gerade meine ersten Klimmzüge mit Code Anpassungen. Leider noch ziemlich undurchdringbar für mich.
Aber ich bin hier um von den Besten zu lernen.

Frage: Was muss ich in dem Code anpassen, dass 3 Banner nebeneinander in der gleichen Größe angezeigt werden ? Ich möchte die Lösung selbst erschaffen, wäre nett wenn Ihr mir ein paar erste Tipps geben könntet.

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}

{%- if section.settings.image_height == 'adapt' and section.settings.image != blank -%}
{%- style -%}
@media screen and (max-width: 500px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before,
#Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}

@media screen and (min-width: 500px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}

@media screen and (min-width: 500px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}

{%- endstyle -%}
{%- endif -%}

{%- style -%}
#Banner-{{ section.id }}::after {
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
}
{%- endstyle -%}

{%- liquid
assign full_width = '100vw'
assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'

if section.settings.image_behavior == 'ambient'
assign half_width = '60vw'
assign full_width = '120vw'
assign stacked_sizes = '(min-width: 750px) 60vw, 120vw'
assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
elsif section.settings.image_behavior == 'fixed'
assign half_width = '100vw'
assign stacked_sizes = '100vw'
else
assign half_width = '50vw'
assign stacked_sizes = '(min-width: 750px) 50vw, 100vw'
endif
-%}

<div
id="Banner-{{ section.id }}"
class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.image_height == 'adapt' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
>
{%- if section.settings.image != blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
{%- liquid
assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
if section.settings.image_2 != blank
assign image_class = 'banner__media-image-half'
endif
if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
assign sizes = stacked_sizes
elsif section.settings.image_2 != blank
assign sizes = half_width
else
assign sizes = full_width
endif
-%}
{{
section.settings.image
| image_url: width: 3840
| image_tag:
loading: 'lazy',
width: section.settings.image.width,
height: image_height,
class: image_class,
sizes: sizes,
widths: widths
}}
</div>
{%- elsif section.settings.image_2 == blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
{{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
{%- if section.settings.image_2 != blank -%}
<div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
{%- liquid
assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
if section.settings.image != blank
assign image_class_2 = 'banner__media-image-half'
endif
if section.settings.image != blank and section.settings.stack_images_on_mobile
assign sizes = stacked_sizes
elsif section.settings.image_2 != blank
assign sizes = half_width
else
assign sizes = full_width
endif
-%}
{{
section.settings.image_2
| image_url: width: 3840
| image_tag:
loading: 'lazy',
width: section.settings.image_2.width,
height: image_height_2,
class: image_class_2,
sizes: sizes,
widths: widths
}}
</div>
{%- endif -%}
<div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<h2
class="banner__heading inline-richtext {{ block.settings.heading_size }}"
{{ block.shopify_attributes }}
>
{{ block.settings.heading }}
</h2>
{%- when 'text' -%}
<div class="banner__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
<p>{{ block.settings.text }}</p>
</div>
{%- when 'buttons' -%}
<div
class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}"
{{ block.shopify_attributes }}
>
{%- if block.settings.button_label_1 != blank -%}
<a
{% if block.settings.button_link_1 == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.button_link_1 }}"
{% endif %}
class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}"
>
{{- block.settings.button_label_1 | escape -}}
</a>
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
<a
{% if block.settings.button_link_2 == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.button_link_2 }}"
{% endif %}
class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"
>
{{- block.settings.button_label_2 | escape -}}
</a>
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>

 

[AndreasB]

Hallo @Stevlon,

Die Template Engine die du verwendest, sieht mir sehr nach Liquid aus. Ist das korrekt?
Für mich ist es schwer, dir zu helfen, da ich durch die Template Blocks deinen Code nicht testen kann und auch nicht erkennen kann, welche Styles du angewendet hast.

Ich könnte dir zwar jetzt raten, Flexblocks oder Grid zu verwenden. Das ist aber auch abhängig von der Bildgröße, dem Layout der Seite und weiteren Faktoren.

Am Besten wäre es, wenn du einen Link zu der Seite postest, oder deinen Code auf das wesentliche reduzierst (ohne Template Blocks) und diesen dann hier in Codeblocks postest.

 

[Stevlon]

Hallo Zusammen,

besten dank @AndreasB und @Sclero2004 werde ich beherzigen.

Nun sieht es so aus. Ehmmm ja scheinbar habs ichs noch nicht gerafft :-) bitte Tipps

Liquid:
<div class=.fl-container page-width">
<div class="fl-item">
<img src ="https://cdn.shopify.com/s/files/1/0758/1964/7322/files/garantie.svg?v=1687898983" alt="">
<p>30 Tage Garantie</p>
</div>
<div class="fl-item">
<img src ="...="">
<p>Kostenloser Versand</p>
</div>
<div class="fl-item">
<img src ="..."">
<p>Sichere Bezahlung</p>
</div>
<div class="fl-item">
<img src =""">
<p>Mit Klarna später bezahlen</p>
</div>
</div>

CSS:
.fl-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: top;
margin-top: 0px;
}

.fl-item {
/*background-color: lightgrey;*/
width: 17%;
}


.fl-item p, img {
flex: 1;
text-align: center;
margin: auto;
display: block;
height: 30px;
}

.fl-item p{
flex: 1;
padding: 4px;
margin-top: 6px;
margin-bottom: 6px;
font-size: 10px;
}

.fl-item img {
flex: 1;
margin-top: 10px;
width: auto;
height: 16px;
}

@media only screen and (max-width: 600px) {
.fl-item {
background-color: white;
width: 50%;
}
}

Besten Dank

Grüße

Stevlon

 

[AndreasB]

@Stevlon
Danke für den Code.
Ich sehe in deinem Markup noch viele Dinge, die deinen Code so nicht funktionieren lassen.
zum Beispiel, fehlt in deinem ersten Tag <div class=.fl-container page-width"> das öffnende Anführungszeichen nach dem Gleichheitszeichen. Außerdem beginnt dort der Klassenname mit einem Punkt, was nicht erlaubt ist. Dadurch greift dein Style auch nicht.

Ist das dass Markup, was Liquid ausgibt?

Wenn ich diese Fehler korrigiere, bekomme ich die Items nebeneinander in der gleichen Größe angezeigt.
Was möchtest du jetzt genau verändern?

Wenn Du Flex benutzt, kannst Du auf eine Angabe der Breite mit width für die Items verzichten, sie wird dann durch Flex berechnet.

Das stimmt nicht ganz.
Wenn die flex-basis Eigenschaft den Wert auto hat (was der Default ist), dann wird zum Berechnen der Basis der Wert von width verwendet (oder [/ICODE]height, wenn die direction [ICODE]column ist).