Headergrafik im Stripe Responsive Layout

  • Hallo zusammen,

    ich verwenden das Stripp Response Layout und habe eine Kopfgrafik eingefügt. Nun bekomme ich es allerdings nicht gebacken, dass ich die Grafik deutlich kleiner mache..

    Kann mir jemand evtl sagen wie breit bzw hoch die optimale Größe sein müsste? Meine Grafik deckt momentan quasi den kompletten Bildschirm ab und ist etwas verpixelt.


    Für Hilfe wäre ich sehr dankbar!!

  • Hallo Yvonne,


    gehe mal auf "Layout" und dort in den Bereich "Kopfgrafik". Dort sind Höhe und Breite für das Bild angegeben.


    Jetzt hast Du 2 Möglichkeiten:


    1. Du schneidest dann das Bild mit einem externen Tool wie beispielsweise irfanview auf die entsprechenden Maße zu, entfernst die ursprüngliche Kopfgrafik und fügst dann das neue, beschnittene Bild ein.


    2. Du passt die Maße im Layout so an, dass sie den Originalmaßen des Bildes entsprechen, musst aber trotzdem die ursprüngliche Grafik entfernen und neu einlesen.

  • Guten Morgen,


    besten Dank für die schnelle Rückmeldung.

    Wenn ich das geänderte Bild einfüge tut sich nichts (auch nichts mit "aktualisieren"). Ich vermute es liegt daran, dass ich die Grafik vorher nicht komplett gelöscht bekomme. Sollte ich hier das komplette Header Element löschen?


  • Guten Tag,

    ich verwende ebenfallst das Layout Stripe Responsive. Die aktuelle verwendte Zeta Producer Version ist 14.3.1.0 (Business).

    Nunmehr im Wissen darum (siehe Zitat Stefan S), dass es in Layouts [wie zum Beispiel beim Layout Flat Responsive] so ist, dass "ab einer bestimmten Bildschirmbreite (640px) die Headerbilder nicht mehr verkleinert werden, sondern im Viewport zentriert dargestellt werden, damit die Bilder nicht zu klein werden" haben ich den Tipp übernommen, dann (den im Quellcode-Kasten benannten Code) in das Feld "CSS" kopiert und auch die weiteren Arbeitsgänge (inkl. erneutem Veröffentlichen der kompletten Website) erledigt. Leider ohne die erhoffte Wirkung.

    Nach wie vor, wird die Kopfgrafik meiner Website im Smartphone beidseitig 'beschnitten' dargestellt.
    Bezieht sich die o. e. Lösung nur auf das Layout Flat Responsive?

    Danke für eine kleine Hilfestellung vorab.

  • Ah ja, dann muss ich für meine Website wohl (wieder einmal) das Layout ändern.
    So kann man seine Kunden auch 'beschäftigen' ...

    Es bietet mir einen Grund mehr, warum ich - entgegen der Bitte des ZP-Freelancers für Online Marketing - im Footer meiner "äußerst gelungenen und interessanten" Website ... den werblichen Hinweis "Website erstellt mit Zeta Producer" auch weiterhin nicht freischalten werde.

    Sollte ich darüberhinaus - nach der Änderung auf ein anderes Layout - bei einem erneuten Versions-Update feststellen, dass auch dort bestimmte Funktionalitäten (z. B. Widgets) plötzlich nicht mehr gegeben sind, so dass meinerseits stundenlange Nacharbeiten notwendig sind, so werde ich diese - auf fachanwaltliches Anraten - zukünftig genau dokumentieren und für den Mehraufwand die Zeta Software GmbH ggf. in Regreß zu nehmen wissen.

  • Das Layout "Producer Responsive" bietet z.B. in den Layout-Einstellungen einen Schalter um die Header-Darstellung entsprechend einzustellen. Im Layout Stripe passt sich die Kopfgrafik allerdings auch automatisch an die Textmenge an (was es in anderen Layouts nicht tut), daher ist es da nicht so einfach umzustellen.


    Warum Sie plötzlich so verärgert sind, kann anhand der 4 Beiträge, die Sie hier bisher verfasst haben, nicht nachvollziehen.

  • Hallo nochmal,


    da Sie in den Headern ja keinerlei Text nutzen, sollte es möglich sein, auch in Stripe Responsive die Header-Darstellung per CSS so zu ändern, dass das Bild immer Skaliert (statt zentriert wird). Folgendes sollte funktionieren:

    • Klicken Sie im Menü Website auf "Einstellungen"
    • Klicken Sie auf CSS
    • Fügen Sie folgende Textzeilen (ohne Überschrift und ohne Zeilennummern – am besten über das Dokumente-Icon rechts oben im Quellcode-Kasten kopieren) in das Feld "CSS" ein und schließen Sie den Dialog dann mit Klick auf "OK"
    CSS
    1. <style>
    2. #header{
    3. min-height: 0;
    4. }
    5. .flexslider .slides>li{
    6. padding-bottom: <$= #val(header-image-height) / #val(header-image-width) $>%;
    7. min-height: 0;
    8. }
    9. </style>


    Anschließend müssen Sie evtl. Ihre Seiten neu erstellen (Erweitert > Erstellen > Alle Seiten erstellen) und ggf. veröffentlichen.

  • Hallo,


    ich benutze Zeta 13 und das Layout Stripe Responsive.


    Sobald ich die Kopfgrafik ändere bzw die größe um auch nur 1% verändere wird das ganze Bild sehr verpixelt. Auch wenn ich andere Bilder einfüge wird das neue Bild auch verpixelt. Wenn ich auf Bearbeiten klicke ist das Bild dort auch sehr sehr klein. Ich vermute da stimmt etwas mit dem Format nicht. Wenn ich im Layout unter Kopfgrafik>Bild dort die Werte ändere, passiert einfach garnichts.

    Sobald ich den Text "ich bin dann mal weg" lösche verschwindet auch das komplette Bild.


    Ich würde nämlich gerne bei dem Bild (mit der Tasche und der Landstraße) mit Photoshop noch ein Text an der seite einfügen. Wenn ich dieses dann wieder einfüge in Zeta ist es wie gesasgt sehr verpixelt.


    Dass CSS oben funktioniert nicht, da sobald ich den text entferne die komplette kopfgrafik verschwindet.

  • Mir ist nicht ganz klar, wie Sie zum Ändern der Größe genau vorgegangen sind. Ich beschreibe daher einfach mal, wie es gemacht werden sollte:


    Wenn Sie die Größe der Header-Bilder ändern wollen, so passen Sie dies zunächst in den Layout-Einstellungen entsprechend an. Dann beachten Sie bitte folgendes:


    Änderungen an Layout-Einstellungen bzgl. Logo oder Kopfgrafiken wirken sich nicht auf bereits vorhandene Bilder aus, sondern nur auf neu zu importierende. Wenn in einem Projekt bereits Header-Bilder vorhanden sind und dann nachträglich in den Layout-Einstellungen die Dimensionen für Header-Bilder verändert werden, empfiehlt es sich alle vorhandenen Header-Bilder wir folgt zu bearbeiten:

    1. Header-Artikel zum Bearbeiten öffnen
    2. Bild Thumbnail anklicken um das Bild auszuwählen (Schritte ab hier dann für alle im Header enthaltenen Bilder wiederholen)
    3. Klick auf die größere Voransicht und Wahl der Option "Bearbeiten"
    4. Klick auf den Button "Zurücksetzen"
    5. Klick auf "Zuschneiden" und Bild wie gewünscht verschieben
    6. Schritte 2 bis 5 für alle Header-Bilder wiederholen
    7. Klick auf OK
  • Ich kann mit dieser Beschreibung leider nicht nachvollziehen, wie Sie genau vorgegangen sind und welche Schritte Sie durchgeführt haben. Bitte genauer beschreiben und gerne auch mit Screenshots verdeutlichen.