Vom Generator zum individuellen Layout – b4um flexibel anpassen

Der b4um Generator liefert eine fertige Grundlage – aber das generierte Layout muss nicht das Endergebnis sein. In diesem Tutorial verwandeln wir eine allgemeine Product-Ansicht Schritt für Schritt in ein individuelles Produkt-Grid mit Hero-Bildern, Status-Badges, Galerie und Lightbox. Dabei bleiben die vorhandenen Funktionen und das responsive Verhalten erhalten.

1. Ausgangslage

Der b4um Generator liefert bewusst mehr als nur Models, Controller und einfache Views. Die generierten Oberflächen bringen bereits eine Struktur mit, die sich direkt verwenden lässt – und gleichzeitig als Ausgangspunkt für ein individuelles Design gedacht ist.

In diesem Tutorial schauen wir uns genau diese zweite Möglichkeit an.

Als Beispiel verwenden wir eine Product-Ressource. Unsere Produkte besitzen unter anderem einen Namen, eine Beschreibung, einen Preis und einen Status. Zusätzlich verwenden wir zwei unterschiedliche Attachments: ein einzelnes Produktbild und eine Galerie mit mehreren Bildern.

Die Ausgangsbasis wurde mit dem b4um Generator erstellt. Dadurch stehen uns bereits Funktionen wie das responsive Kartenlayout, Rich-Text-Ausgabe sowie die Bilddarstellung mit Lightbox zur Verfügung.

Der ursprüngliche, vom Generator erzeugte Zustand der Product-Übersicht.

Das Ergebnis funktioniert bereits. Für eine echte Produktübersicht ist die Darstellung aber noch sehr allgemein gehalten. Felder werden wie typische Resource-Daten ausgegeben, beispielsweise mit Bezeichnungen wie Name, Description, Price, Status oder Gallery.

Genau das ist gewollt: Der Generator kennt schließlich nicht den späteren Einsatzzweck unserer Ressource.

Unser Ziel ist deshalb nicht, die generierten Views wegzuwerfen und von vorne anzufangen. Stattdessen verwenden wir die vorhandene Struktur und entwickeln daraus Schritt für Schritt eine individuelle Produktdarstellung.

Am Ende soll aus der allgemeinen Resource-Ansicht eine Karte mit großem Produktbild, Status-Badge, Titel, Beschreibung, Preis, kleinen Galerie-Vorschaubildern und einem dezenten „Weiterlesen“-Link entstehen.

Dabei wollen wir drei Dinge erhalten: die bereits vorhandene Lightbox, das responsive Verhalten und eine ausführliche Produktansicht auf der show-Seite.

2. Vom Bento- zum Grid-Layout

Für unsere Product-Übersicht verwenden wir zunächst eine andere Darstellungsform des b4um Generators. Statt des ursprünglichen Bento-Layouts soll jedes Produkt den gleichen Platz erhalten. Dafür eignet sich das Grid-Layout.

Der Wechsel ist bewusst einfach gehalten. Wir müssen unsere Ressource dafür nicht neu erstellen und auch die vorhandenen Daten bleiben unverändert. Wir ändern lediglich die Darstellung der bereits vorhandenen Produkte.

Nach dem Wechsel erhalten wir ein gleichmäßiges Raster aus Produktkarten.

Die Product-Übersicht direkt nach dem Wechsel zum Grid-Layout

Zu diesem Zeitpunkt sieht die Übersicht noch bewusst generisch aus. Die einzelnen Felder werden weiterhin als normale Resource-Daten dargestellt: Name, Description, Price, Status, Gallery und Image. Auch der generierte Show-Button ist noch vorhanden.

Das ist für uns eine gute Ausgangsbasis. Die Struktur des Grids funktioniert bereits, und mehrere Produkte werden automatisch nebeneinander dargestellt. Auf kleineren Bildschirmen reduziert sich die Anzahl der Spalten entsprechend.

Wir müssen also kein eigenes Grid-System entwickeln. Stattdessen können wir uns jetzt auf das konzentrieren, was für unsere Anwendung tatsächlich individuell sein soll: den Inhalt und das Design der einzelnen Produktkarte.

Die vorhandene Partial weiterverwenden

Die Ausgabe eines einzelnen Produkts befindet sich in:

app/views/products/_product.html.erb

Diese Partial wollen wir nicht durch eine komplett neue Product-Card ersetzen. Sie wird später schließlich auch auf der Detailseite benötigt.

Stattdessen nutzen wir den bereits vorhandenen compact-Modus. In der Übersicht wird das Produkt mit:

<%= render product, compact: true %>

gerendert.

Auf der Detailseite lautet der Aufruf dagegen weiterhin:

<%= render @product %>

Damit haben wir bereits die entscheidende Grundlage für unsere Anpassung: Innerhalb derselben Partial können wir unterscheiden, ob ein Produkt als kompakte Karte im Grid oder als vollständige Detailansicht ausgegeben wird.

Im nächsten Schritt nutzen wir genau diese Unterscheidung und beginnen damit, aus der noch generischen Resource-Ausgabe eine richtige Produktkarte zu machen.

3. Aus der Resource wird eine Produktkarte

Das Grid steht. Jetzt können wir die Darstellung eines einzelnen Produkts anpassen.

Bisher behandelt die generierte Partial jedes Attribut weitgehend gleich: Feldbezeichnung, Wert und anschließend das nächste Feld. Für eine Verwaltungsansicht ist das sinnvoll. Bei einer Produktübersicht haben die Informationen aber unterschiedliche Aufgaben.

Das Produktbild soll beispielsweise nicht wie ein gewöhnliches Datenfeld aussehen. Es soll die Karte visuell eröffnen. Der Produktname wird zur Überschrift, die Beschreibung zum kurzen Teaser und der Preis soll ohne zusätzliche Feldbezeichnung lesbar sein.

Das Produktbild nach oben holen

Unser einzelnes Attachment image verwenden wir deshalb als großes Hero-Bild am Anfang der Karte.

Dabei werfen wir die vom Generator bereitgestellte Lightbox nicht weg. Wir ändern lediglich das Markup um das Bild herum und verwenden weiterhin den vorhandenen image-lightbox-Controller.

Der obere Bereich von

app/views/products/_product.html.erb

beginnt nun beispielsweise so:

<div id="<%= dom_id product %>" class="resource product-card">
  <% if product.image.attached? %>
    <div
      class="b4um-card__media"
      data-controller="image-lightbox"
      data-action="keydown->image-lightbox#keydown"
    >
      <button
        type="button"
        class="product-card-image__button"
        data-image-lightbox-target="item"
        data-image-lightbox-url="<%= url_for(product.image) %>"
        data-image-lightbox-alt="<%= product.image.filename.to_s %>"
        data-action="click->image-lightbox#open"
      >
        <%= image_tag product.image,
                      class: "b4um-card__image",
                      alt: product.image.filename.to_s %>
      </button>

      <!-- vorhandenes Lightbox-Markup -->
    </div>
  <% end %>

Damit übernimmt das Bild eine völlig andere Rolle, ohne dass wir die vorhandene Funktionalität neu programmieren müssen.

Das Hero-Bild in die Karte einpassen

Nachdem das Produktbild an den Anfang der Karte verschoben wurde, passen wir noch seine Darstellung an. Der Button selbst soll die komplette verfügbare Breite nutzen und keine eigene Button-Optik mitbringen:

.product-card-image__button {
  display: block;
  width: 100%;
  padding: 0;

  border: 0;

  background: transparent;
  cursor: zoom-in;
}

Da das Bild weiterhin die vorhandene Klasse b4um-card__image verwendet, können wir außerdem einen dezenten Hover-Effekt ergänzen:

.product-card .b4um-card__image {
  transition: transform 0.35s ease;
}

.b4um-card:hover .product-card .b4um-card__image {
  transform: scale(1.04);
}

Das Produktbild bleibt damit Bestandteil der vorhandenen Kartenstruktur, wirkt aber nun wie das Hero-Bild einer Produktkarte. Der Mauszeiger signalisiert gleichzeitig, dass sich das Bild über die bereits vorhandene Lightbox vergrößern lässt.

Der leichte Zoom beim Überfahren der Karte ist nur eine optische Ergänzung. Die eigentliche Bildgröße und das Zuschneiden übernimmt weiterhin das vorhandene Styling von b4um-card__image.

Name und Beschreibung vereinfachen

Auch der Name benötigt in einer Produktkarte kein zusätzliches Name: mehr. Er wird direkt zur Überschrift:

<h2 class="b4um-card__title">
  <%= product.name %>
</h2>

Bei der Beschreibung nutzen wir im kompakten Modus weiterhin die bereits vorhandene Rich-Text-Vorschau:

<% if local_assigns[:compact] %>
  <div class="b4um-card__text">
    <%= b4um_rich_text_preview(
      product.description,
      length: local_assigns.fetch(:preview_length, 160),
    ) %>
  </div>
<% else %>
  <!-- vollständige Beschreibung der Detailansicht -->
<% end %>

Das ist ein wichtiger Unterschied: Wir kürzen nicht einfach überall die Beschreibung. Nur die Grid-Karte erhält die Vorschau. Auf der show-Seite kann weiterhin der vollständige Rich Text erscheinen.

Auch der Preis wird kompakter

Dasselbe Prinzip verwenden wir beim Preis:

<% if local_assigns[:compact] %>
  <p class="product-card__price">
    <%= number_with_precision(
      product.price,
      precision: 2,
      delimiter: ".",
      separator: ",",
    ) %>
    €
  </p>
<% else %>
  <!-- ausführliche Ausgabe der Detailansicht -->
<% end %>

Aus einer technischen Resource-Ausgabe wie

Price: 1.199,00

wird damit die für eine Produktkarte natürlichere Darstellung:

1.199,00 €

Der Zwischenstand, bei dem das Produktbild bereits als großes Bild oben in der Karte erscheint und Name, Beschreibung und Preis nicht mehr wie gewöhnliche Resource-Felder aussehen.

An diesem Punkt erkennt man bereits deutlich, wohin sich das Layout entwickelt. Das Grid selbst haben wir nicht neu gebaut. Wir haben lediglich entschieden, wie die vorhandenen Daten innerhalb der generierten Struktur präsentiert werden sollen.

Im nächsten Schritt kümmern wir uns um die Details: Status-Badge, kleine Galerie-Vorschaubilder und den Wechsel vom generischen Show-Button zu Weiterlesen.

4. Status, Galerie und Navigation verfeinern

Die grundlegende Produktkarte steht. Jetzt fehlen noch einige Details, die aus einer funktionierenden Karte eine aufgeräumte Produktdarstellung machen.

Dabei ändern wir erneut keine Funktionen des Generators. Status, Galerie und Navigation sind bereits vorhanden – wir passen lediglich ihre Präsentation an.

Aus dem Status wird ein Badge

In der ursprünglichen Resource-Ansicht wurde der Status als normales Feld dargestellt. Für unsere Produktkarte reicht dagegen die Information selbst.

Im kompakten Layout geben wir den Status deshalb ohne zusätzliches Status: aus:

<p class="product-card__status">
  <%= product.status %>
</p>

Mit etwas CSS entsteht daraus ein dezenter Pill-Badge:

.product-card__status {
  display: inline-block;

  width: fit-content;
  margin: 0 0 12px;
  padding: 5px 10px;

  border: 1px solid color-mix(
    in srgb,
    var(--b4um-primary) 30%,
    transparent
  );
  border-radius: 999px;

  color: var(--b4um-primary);
  background-color: color-mix(
    in srgb,
    var(--b4um-primary) 10%,
    transparent
  );

  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

Dadurch bleibt der Status sichtbar, tritt aber gegenüber Produktname und Beschreibung deutlich in den Hintergrund.

Die Galerie wird zur Vorschauleiste

Unsere gallery ist ein Multiple Attachment. In der ursprünglichen Ansicht dürfen die Bilder entsprechend mehr Platz einnehmen. Innerhalb einer kompakten Produktkarte würden große Galeriebilder jedoch zu viel Raum beanspruchen.

Deshalb verwenden wir im compact-Modus kleinere Vorschaubilder:

<div
  class="<%= local_assigns[:compact] ? 'product-card__gallery-images' : 'resource-images' %>"
  data-controller="image-lightbox"
  data-action="keydown->image-lightbox#keydown"
>
  <% product.gallery.each do |image| %>
    <button
      type="button"
      class="<%= local_assigns[:compact] ? 'product-card__gallery-button' : 'resource-images__button' %>"
      data-image-lightbox-target="item"
      data-image-lightbox-url="<%= url_for(image) %>"
      data-image-lightbox-alt="<%= image.filename.to_s %>"
      data-action="click->image-lightbox#open"
    >
      <%= image_tag image,
                    class: local_assigns[:compact] ?
                      "product-card__gallery-image" :
                      "resource-images__image",
                    alt: image.filename.to_s %>
    </button>
  <% end %>

  <!-- vorhandenes Lightbox-Markup -->
</div>

Die dazugehörigen Vorschaubilder bleiben bewusst klein:

.product-card__gallery-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-card__gallery-button {
  width: 52px;
  height: 52px;
  padding: 0;

  overflow: hidden;

  border: 1px solid var(--b4um-border-light);
  border-radius: 8px;

  background: transparent;
  cursor: zoom-in;
}

.product-card__gallery-image {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
}

Entscheidend ist hier nicht nur die optische Veränderung. Die vorhandene Lightbox bleibt erhalten. Ein Klick auf eines der kleinen Vorschaubilder öffnet weiterhin die große Bildansicht.

Wir haben also eine vorhandene Generator-Funktion wiederverwendet, anstatt für die Produktkarte eine zweite Galerie zu entwickeln.

Aus „Show“ wird „Weiterlesen“

Auch die Navigation können wir an den neuen Charakter der Karte anpassen.

app/views/products/_bento.html.erb

hatten wir ursprünglich einen klassischen Button:

<%= link_to "Show",
            product,
            class: "button button--secondary" %>

Für unsere Produktkarten soll die Navigation etwas zurückhaltender sein. Deshalb ersetzen wir ihn durch:

<%= link_to "Weiterlesen",
            product,
            class: "product-card__link" %>

Dazu reicht ein kleines Styling:

.product-card__link {
  color: var(--b4um-primary);

  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.product-card__link:hover {
  text-decoration: underline;
}

Damit wirkt der Link als Bestandteil der Karte und nicht mehr wie eine primäre Aktion.

Gleiche Kartenhöhen

Bei unterschiedlich langen Beschreibungen oder vorhandenen Galerien können die Inhalte der Karten unterschiedlich viel Platz benötigen. Der Aktionsbereich soll trotzdem innerhalb einer Reihe auf einer gemeinsamen Linie enden.

Dafür lassen wir den bereits vorhandenen Flex-Aufbau der Karte arbeiten und schieben den Aktionsbereich nach unten:

.product-card-grid .b4um-card__actions {
  margin-top: auto;
  padding-top: 22px;
}

So bleiben die Karten trotz unterschiedlicher Inhalte optisch ruhig und die Weiterlesen-Links bilden einen sauberen Abschluss.

Die fertige Desktop-Ansicht mit den Produktkarten: Hero-Bilder, Status-Badges, Beschreibung, Preis, Galerie-Thumbnails und Weiterlesen-Link.

Damit ist aus der ursprünglich allgemeinen Resource-Ausgabe unsere individuelle Product-Übersicht geworden.

Im nächsten Abschnitt kümmern wir uns noch um zwei Dinge, die man bei einer solchen Anpassung leicht vergessen kann: Hover-Effekt und Responsive-Verhalten.

5. Responsive Darstellung

Unsere Produktkarten sind für die Desktop-Ansicht angepasst. Dabei wollen wir aber nicht für jedes Gerät eine eigene Version der Product-Ansicht entwickeln.

Das ist auch nicht notwendig. Die Karten verwenden weiterhin das responsive Grid des b4um Generators. Unsere individuellen Anpassungen verändern hauptsächlich den Inhalt innerhalb der Karten, während das vorhandene Grid für deren Anordnung verantwortlich bleibt.

Auf kleineren Displays reduziert das Grid automatisch die Anzahl der Spalten. Auf dem Smartphone werden die Produkte schließlich untereinander dargestellt.

Dadurch bleiben auch unsere Anpassungen erhalten: Das Hero-Bild nutzt die verfügbare Breite, der Status-Badge bleibt kompakt, Beschreibung und Preis ordnen sich darunter an und die Galerie-Thumbnails können bei Bedarf umbrechen.

Die fertige Product-Übersicht auf einem Smartphone.

Für die Galerie haben wir bereits:

.product-card__gallery-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

Durch flex-wrap: wrap können die kleinen Vorschaubilder automatisch in eine weitere Zeile wechseln, wenn nicht genügend Platz vorhanden ist.

Auch für die eigentliche Kartenanordnung brauchen wir keine neue Product-spezifische Media Query. Das vorhandene b4um-card-grid übernimmt diese Aufgabe bereits.

Das ist ein wichtiger Vorteil unserer Anpassung: Wir ersetzen nicht das responsive System des Generators, sondern bauen darauf auf.

So bleibt die individuelle Produktdarstellung auch auf kleineren Displays übersichtlich, ohne dass wir eine zweite mobile Version der View pflegen müssen.

6. Eine Partial – zwei Darstellungen

Unsere Product-Partial wird nicht nur in der Übersicht verwendet. Auch die Detailseite greift auf dieselbe Datei zurück.

app/views/products/show.html.erb

wird das Produkt mit:

<%= render @product %>

gerendert.

Der entscheidende Unterschied zur Übersicht besteht darin, dass hier kein compact: true übergeben wird.

Im Grid verwenden wir dagegen:

<%= render product, compact: true %>

Diese kleine Unterscheidung ermöglicht uns, innerhalb von

app/views/products/_product.html.erb

unterschiedliche Darstellungen zu erzeugen.

Kompakte Ausgabe im Grid

An mehreren Stellen prüfen wir:

<% if local_assigns[:compact] %>

Für die Produktübersicht können wir dadurch beispielsweise nur eine Vorschau der Beschreibung anzeigen:

<% if local_assigns[:compact] %>
  <div class="b4um-card__text">
    <%= b4um_rich_text_preview(
      product.description,
      length: local_assigns.fetch(:preview_length, 160),
    ) %>
  </div>
<% else %>
  <!-- vollständige Beschreibung -->
<% end %>

Dasselbe Prinzip verwenden wir beim Preis und bei der Galerie.

Die Übersicht bleibt dadurch kompakt, obwohl die Product-Ressource wesentlich mehr Informationen enthalten kann.

Vollständige Ausgabe auf der Detailseite

Auf der show-Seite ist compact nicht gesetzt. Dort können wir deshalb die vollständige Beschreibung, eine größere Galerie und weitere Informationen anzeigen.

Auch unsere Navigation bleibt erhalten:

<div class="b4um-card__actions">
  <% if logged_in? %>
    <%= link_to "Edit",
                edit_product_path(@product),
                class: "button button--secondary" %>
  <% end %>

  <%= link_to "Back",
              products_path,
              class: "button button--secondary" %>

  <% if logged_in? %>
    <%= button_to "Destroy",
                  @product,
                  method: :delete,
                  class: "button button--danger",
                  form: {
                    data: {
                      turbo_confirm: "Are you sure?"
                    }
                  } %>
  <% end %>
</div>

Die Anpassung unserer Übersicht zwingt uns also nicht dazu, eine zweite vollständige Product-Partial anzulegen.

Die vollständige Detailansicht eines Produkts mit Hero-Bild, Status, vollständiger Beschreibung, Preis, Galerie und den vorhandenen Aktionen.

Damit haben wir zwei deutlich unterschiedliche Darstellungen derselben Ressource:

Product
   │
   ├── Grid
   │    └── _product.html.erb + compact: true
   │
   └── Show
        └── _product.html.erb

Die Logik und die vorhandenen Funktionen bleiben gemeinsam nutzbar, während wir die Darstellung an den jeweiligen Kontext anpassen.

Fazit

Aus einer generierten Resource-Ansicht ist Schritt für Schritt eine individuelle Produktübersicht geworden.

Dafür mussten wir weder das vorhandene Grid ersetzen noch Lightbox, Rich-Text-Unterstützung oder Responsive-Verhalten neu entwickeln. Stattdessen haben wir die vom b4um Generator bereitgestellten Bausteine weiterverwendet und nur dort angepasst, wo unser konkreter Anwendungsfall eine andere Darstellung benötigt.

Genau darin liegt die eigentliche Stärke dieses Ansatzes: Der generierte Code ist ein Ausgangspunkt und keine gestalterische Grenze.

Ob Produktübersicht, Portfolio, App-Verzeichnis oder eine ganz andere Ressource – die vorhandene Struktur lässt sich an das eigene Projekt anpassen, während die bereits generierte Funktionalität erhalten bleibt.

Meld dich an und schreibe ein Kommentar