Created
June 30, 2026 08:49
-
-
Save purpleturtle1988/819aa6aa6b1582e6480680241c030f94 to your computer and use it in GitHub Desktop.
WP Rocket Fix – Bilder Galerie eineprisesalz.ch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Bilder-Fix – eineprisesalz.ch</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.19.0/dist/tabler-icons.min.css"> | |
| <style> | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; | |
| font-size: 15px; | |
| line-height: 1.6; | |
| color: #1a1a18; | |
| background: #f5f4f0; | |
| padding: 2rem 1rem 4rem; | |
| } | |
| .wrap { | |
| max-width: 680px; | |
| margin: 0 auto; | |
| } | |
| .hero { | |
| background: #ffffff; | |
| border-radius: 14px; | |
| border: 1px solid #e5e4de; | |
| padding: 1.75rem 2rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .badge { | |
| display: inline-block; | |
| background: #FAECE7; | |
| color: #993C1D; | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| padding: 3px 10px; | |
| border-radius: 6px; | |
| margin-bottom: 0.875rem; | |
| } | |
| .hero h1 { | |
| font-size: 21px; | |
| font-weight: 600; | |
| color: #111110; | |
| margin-bottom: 0.5rem; | |
| } | |
| .hero p { | |
| font-size: 14px; | |
| color: #6b6b68; | |
| line-height: 1.65; | |
| } | |
| .section-label { | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: #9b9b97; | |
| margin: 1.75rem 0 0.875rem; | |
| } | |
| .explain-card { | |
| background: #ffffff; | |
| border: 1px solid #e5e4de; | |
| border-radius: 12px; | |
| padding: 1.125rem 1.375rem; | |
| margin-bottom: 0.75rem; | |
| display: flex; | |
| gap: 14px; | |
| align-items: flex-start; | |
| } | |
| .explain-icon { | |
| width: 38px; | |
| height: 38px; | |
| border-radius: 9px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| font-size: 19px; | |
| } | |
| .explain-icon.prob { background: #FAECE7; color: #993C1D; } | |
| .explain-icon.sol { background: #E1F5EE; color: #0F6E56; } | |
| .explain-card h3 { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: #111110; | |
| margin-bottom: 4px; | |
| } | |
| .explain-card p { | |
| font-size: 13px; | |
| color: #6b6b68; | |
| line-height: 1.6; | |
| } | |
| hr.divider { | |
| border: none; | |
| border-top: 1px solid #e5e4de; | |
| margin: 1.5rem 0; | |
| } | |
| .step { | |
| display: flex; | |
| gap: 14px; | |
| margin-bottom: 1.25rem; | |
| } | |
| .step-num { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| background: #E6F1FB; | |
| color: #185FA5; | |
| font-size: 13px; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| margin-top: 1px; | |
| } | |
| .step-body h3 { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: #111110; | |
| margin-bottom: 4px; | |
| } | |
| .step-body p { | |
| font-size: 13px; | |
| color: #6b6b68; | |
| line-height: 1.6; | |
| margin-bottom: 8px; | |
| } | |
| .step-body p:last-child { margin-bottom: 0; } | |
| .mockup { | |
| background: #f9f8f5; | |
| border: 1px solid #e5e4de; | |
| border-radius: 9px; | |
| padding: 12px 15px; | |
| margin-top: 8px; | |
| } | |
| .nav-path { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 12px; | |
| color: #9b9b97; | |
| margin-bottom: 10px; | |
| flex-wrap: wrap; | |
| } | |
| .nav-path strong { color: #111110; } | |
| .tab-row { | |
| display: flex; | |
| border-bottom: 1px solid #e5e4de; | |
| margin-bottom: 12px; | |
| gap: 0; | |
| overflow-x: auto; | |
| } | |
| .tab { | |
| font-size: 11px; | |
| padding: 5px 10px; | |
| color: #9b9b97; | |
| border-bottom: 2px solid transparent; | |
| white-space: nowrap; | |
| margin-bottom: -1px; | |
| } | |
| .tab.active { | |
| color: #185FA5; | |
| border-color: #185FA5; | |
| font-weight: 600; | |
| } | |
| .field-row { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .field-label { | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: #3d3d3a; | |
| } | |
| .field-desc { | |
| font-size: 11px; | |
| color: #9b9b97; | |
| margin-bottom: 4px; | |
| } | |
| .code-box { | |
| display: inline-block; | |
| background: #f0efe9; | |
| border: 1px solid #d8d7d0; | |
| border-radius: 6px; | |
| padding: 7px 13px; | |
| font-family: "SF Mono", "Menlo", "Consolas", monospace; | |
| font-size: 14px; | |
| color: #185FA5; | |
| letter-spacing: 0.01em; | |
| margin: 6px 0; | |
| } | |
| .field-hint { | |
| font-size: 11px; | |
| color: #9b9b97; | |
| margin-top: 4px; | |
| } | |
| .tip { | |
| background: #E1F5EE; | |
| border-left: 3px solid #1D9E75; | |
| border-radius: 0 9px 9px 0; | |
| padding: 12px 16px; | |
| margin-top: 1.25rem; | |
| } | |
| .tip p { | |
| font-size: 13px; | |
| color: #0F6E56; | |
| line-height: 1.6; | |
| } | |
| .tip strong { color: #085041; } | |
| @media (max-width: 500px) { | |
| .hero, .explain-card { padding: 1.125rem 1.25rem; } | |
| .hero h1 { font-size: 18px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <div class="hero"> | |
| <div class="badge">Webseitenproblem</div> | |
| <h1>Bilder in der Galerie erscheinen durcheinander</h1> | |
| <p>Auf den Blogbeitraegen stapeln sich die Fotos uebereinander, statt ordentlich nebeneinander angezeigt zu werden. Dieses Problem laesst sich mit zwei Klicks beheben, ohne dass etwas kaputt gehen kann.</p> | |
| </div> | |
| <div class="section-label">Was passiert und warum</div> | |
| <div class="explain-card"> | |
| <div class="explain-icon prob"><i class="ti ti-photo-off" aria-hidden="true"></i></div> | |
| <div> | |
| <h3>Das Problem</h3> | |
| <p>Die Website hat zwei Plugins, die sich gegenseitig in die Quere kommen. Das Performance-Plugin <strong>WP Rocket</strong> laedt die Bilder bewusst verzoegert (Lazy Load), damit die Seite schneller wirkt. Das Galerie-Plugin <strong>UABB</strong> versucht aber schon beim Seitenaufbau die Positionen der Bilder zu berechnen, findet dabei nur leere Platzhalter vor und ordnet alles falsch an.</p> | |
| </div> | |
| </div> | |
| <div class="explain-card"> | |
| <div class="explain-icon sol"><i class="ti ti-photo-check" aria-hidden="true"></i></div> | |
| <div> | |
| <h3>Die Loesung</h3> | |
| <p>WP Rocket soll die Galeriebilder von der verzoegerten Ladung ausnehmen, damit das Galerie-Plugin die Bilder von Anfang an korrekt anordnen kann. Dazu traegt man eine einzige Zeile in den WP Rocket Einstellungen ein.</p> | |
| </div> | |
| </div> | |
| <hr class="divider"> | |
| <div class="section-label">Schritt-fuer-Schritt Anleitung</div> | |
| <div class="step"> | |
| <div class="step-num">1</div> | |
| <div class="step-body"> | |
| <h3>WordPress-Verwaltung oeffnen</h3> | |
| <p>Im Browser aufrufen: <strong>eineprisesalz.ch/wp-admin</strong> und mit den normalen Zugangsdaten einloggen.</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-num">2</div> | |
| <div class="step-body"> | |
| <h3>WP Rocket Einstellungen oeffnen</h3> | |
| <p>Im linken Menue auf "Einstellungen" klicken, dann "WP Rocket" auswaehlen.</p> | |
| <div class="mockup"> | |
| <div class="nav-path"> | |
| <i class="ti ti-settings" style="font-size:14px" aria-hidden="true"></i> | |
| <strong>Einstellungen</strong> | |
| <span>›</span> | |
| <strong>WP Rocket</strong> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-num">3</div> | |
| <div class="step-body"> | |
| <h3>Zum Tab "Medien" wechseln</h3> | |
| <p>Am oberen Rand der WP Rocket Seite gibt es mehrere Tabs. Auf <strong>Medien</strong> klicken.</p> | |
| <div class="mockup"> | |
| <div class="tab-row"> | |
| <div class="tab">Dashboard</div> | |
| <div class="tab">Cache</div> | |
| <div class="tab">Datei-Optimierung</div> | |
| <div class="tab active">Medien</div> | |
| <div class="tab">Vorabladen</div> | |
| <div class="tab">...</div> | |
| </div> | |
| <p style="font-size:11px; color:#9b9b97; padding: 0 2px;">Dieser Tab enthaelt alle Einstellungen zum Lazy Load.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-num">4</div> | |
| <div class="step-body"> | |
| <h3>Feld "Ausgeschlossene Bilder" ausfindig machen</h3> | |
| <p>Im Tab "Medien" nach unten scrollen, bis der Abschnitt <strong>LazyLoad</strong> erscheint. Dort gibt es ein Feld mit dem Titel "Ausgeschlossene Bilder oder iFrames" (auf Englisch: "Excluded images or iframes").</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-num">5</div> | |
| <div class="step-body"> | |
| <h3>Diesen Text eintragen und speichern</h3> | |
| <p>In das Eingabefeld genau diesen Text eintippen oder kopieren:</p> | |
| <div class="code-box">.uabb-gallery-img</div> | |
| <div class="mockup" style="margin-top: 10px;"> | |
| <div class="field-row"> | |
| <div class="field-label">Ausgeschlossene Bilder oder iFrames</div> | |
| <div class="field-desc">Einen Eintrag pro Zeile</div> | |
| <div class="code-box" style="font-size:13px; background:#fff;">.uabb-gallery-img</div> | |
| <div class="field-hint">Das ist der interne Name der Galeriebilder. WP Rocket erkennt dadurch, welche Bilder ausgenommen werden sollen.</div> | |
| </div> | |
| </div> | |
| <p style="margin-top: 10px;">Anschliessend auf den blauen Knopf <strong>"Aenderungen speichern"</strong> klicken.</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-num">6</div> | |
| <div class="step-body"> | |
| <h3>Cache leeren und Ergebnis pruefen</h3> | |
| <p>Oben in der schwarzen WordPress-Leiste erscheint nach dem Speichern ein WP Rocket Symbol. Darauf klicken und <strong>"Cache leeren"</strong> auswaehlen. Danach einen Blogbeitrag im Browser aufrufen und pruefen, ob die Bilder korrekt dargestellt werden.</p> | |
| </div> | |
| </div> | |
| <div class="tip"> | |
| <p><strong>Fertig.</strong> Es muessen keine weiteren Einstellungen veraendert werden. Alle anderen Lazy-Load-Optimierungen von WP Rocket bleiben aktiv, nur die Galeriebilder werden davon ausgenommen.</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment