Zeilenumbruch im Titel (Bildbanner)

[peyk]

Hallo zusammen,

auch wenn das Thema bereits einige Male im Forum vorkommt, habe ich bislang keine Lösung für mich gefunden.

Ich möchte im Dawn-Theme den Titel bzw. die Überschrift in einem Bildbanner in zwei Zeilen aufteilen. Wie kann ich am einfachsten vorgehen?

Danke!

[Ben310]

Du hast nicht mit uns geteilt welche Lösungen du ohne Erfolg ausprobiert hast. Hast du ein
Tag im

Titel Code ausprobiert? Ist der Titel des Bildbanners in einer Liquid-Variable gespeichert oder als statischer Text festgelegt? Du kannst den
-Tag in der banner__heading class definieren. Beispiel:

## 
  Taste the World.
Mit den Spices von Nural

Oder falls der Text dynamisch über eine Variable geladen wird (wie {{ product.title }}), kannst du auch einen Zeilenumbruch mit split und join in Liquid erstellen. Beispiel:

{% assign split_title = "Taste the World. Mit den Spices von Nural" | split: " " %}
## 
  {{ split_title[0] }} {{ split_title[1] }}
{{ split_title[2] }} {{ split_title[3] }} {{ split_title[4] }} {{ split_title[5] }}

Oder im image-banner.liquid suche die Stelle mit {{ block.settings.heading | escape }} und ersetze durch einen Code wie den folgenden:

{% assign headings = block.settings.heading | split: "|" %}
{% for heading in headings %}
  {{ heading | escape }}

{% endfor %}

Im Theme Editor füge im Titeltext das Zeichen | ein, um den gewünschten Zeilenumbruch zu markieren. Zum Beispiel: Taste the World | Mit den Spices von Nural. Das ermöglicht es, Zeilenumbrüche dynamisch über den Theme-Editor zu verwalten, ohne den HTML-Code direkt anpassen zu müssen​ (Shopify Community).

[peyk]

Den
Tag habe ich ausprobiert, dieser funktioniert aber nicht. Ich habe Deinen Code auch ausprobiert: Er zeigt es im Titel Code zumindest kurz an, übernimmt die Einstellungen aber nicht und gibt mir Fehlermeldungen.

Dynamische Titel habe ich nicht, der Code würde aber wohl wieder nicht funktionieren.

Deinen letzten Code konnte ich nicht ausprobieren, da ich in meiner image-banner.liquid nur folgende Stellen mit “escape” habe:

[Ben310]

Bist ein Schritt weiter! Wo ein Wille…

Und du machst das in einer Testumgebung? Kannst du mal in deinem Screenshot nach Tags

,

, oder

suchen, die möglicherweise den Text des Banners enthalten, und nach der headings definierung? Dann da meinen letzten Code oben einbauen und speichern, wie z. B.:

{% assign headings = block.settings.heading | split: "|" %}
{% for heading in headings %}
  {{ heading | escape }}

{% endfor %}

Wenn’s nicht funzt, ersetze das
-Tag durch ein \n (Zeilenumbruchzeichen):

## {{ block.settings.heading | replace: "|", "
" }}

Wenn du den
-Tag im HTML nicht nutzen kannst, kann es an den Escaping-Regeln oder einer anderen Konfiguration im Theme liegen. Dann probiere mal ein direktes Einfügen des statischen
-Tags im HTML:

## 
  Taste the World.
Mit den Spices von Nural

Weitere CSS snippets die du im benutzerdefinierten CSS Kästchen ausprobieren und selber tweaken kannst:

.banner__heading {
  white-space: pre-wrap; /* Ermöglicht die Darstellung von Zeilenumbrüchen */
}

.banner__heading::after {
  content: "Mit den Spices von Nural";
  display: block;
  margin-top: 5px; /* Optionaler Abstand */
}

.banner__heading {
  display: inline-block;
}

Oder

.banner__heading::after {
  content: "\A";
  white-space: pre;
}

Einfach an deine Liquid Classes anpassen - die findest du in der Dev Console.

[peyk]

Danke für Deine Hilfe! Deine Anweisungen gingen schon etwas über mein technisches Niveau heraus, es hat aber letzten Endes doch funktioniert. Hier möchte ich nochmal für Dich und ggf. andere Suchende mit dem selben Problem meine Lösung teilen:

Und du machst das in einer Testumgebung?

Zunächst hierzu nein Aber der Shop ist noch nicht online, insofern habe ich den bequemen Weg gewählt. Das dürfte ja in der Regel bei kleinen Änderungen unproblematisch sein?

Kannst du mal in deinem Screenshot nach Tags # , ## , oder ### suchen, die möglicherweise den Text des Banners enthalten, und nach der headings definierung? Dann da meinen letzten Code oben einbauen und speichern, wie z. B.:

---

Tasächlich gibt es nur eine in Frage kommende Stelle (Zeile 122 im image-banner.liquid beim Dawn-Theme):

{%- when 'heading' -%}
            ## 
              
              {{ block.settings.heading }}    
            

Dort habe ich Deinen Code eingesetzt - und es hat fast geklappt! Nur das ursprüngliche CSS wurde nicht übernommen. Letztendlich habe ich Deinen Code von ChatGPT (an die konkrete Stelle im Quellcode) anpassen lassen, und es funktioniert nun perfekt!

Ein kleines weiteres Problem war, dass Heading-Texte in Fett-Schrift wegen dem escape Filter nicht erkannt wurden, und im Text dann z.B. “…” stand. Mit ChatGPT konnten wir das aber auch mithilfe des raw Filters lösen.

Die Lösung sah am Ende so aus:

## 
                {% assign headings = block.settings.heading | split: "|" %}
                {% for heading in headings %}
                  {{ heading | raw }}

                {% endfor %}
              

Hier nochmal die Ansicht im Editor:

Weitere CSS snippets die du im benutzerdefinierten CSS Kästchen ausprobieren und selber tweaken kannst:

Die CSS-Codes hätten (eigentlich) auch funktioniert! In der direkten Shop-Bearbeitung als Eingabe im Themen-CSS zeigt er mir eigentlich beim ersten CSS-Code den Zeilenumbruch perfekt an.Der untere CSS-Code hat insoweit funktioniert, wenn ich anstelle von “\A” meinen Text der 2. Zeile eingebe. Nur lässt er mich im Themen-Editor beide CSS nicht speichern.

In der CSS-Datei im Code-Editor würde es zwar funktionieren, allerdings dann für alle Image-Banner, sodass es hinfällig wird (da der Text ja angepasst werden müsste, soweit ich verstehe).

Auf jeden Fall klappt es jetzt. Danke!

[Ben310]

Absolut Spitze!