Bildhöhe beschränken

  • Hallo,


    ich möchte gern in meinem Wordpress-Blog die Höhe des Artikelbildes auf 350 Pixel begrenzen.

    Da ich von Webseitenerstellung nur sehr wenig verstehe, habe ich anderweitig um Rat gefragt und den Tipp bekommen, den Code Nr. 2 in das vorhandenen css (Nr.1) einzufügen.

    Leider war das erfolglos.



    Rahmenbedingungen
    Browser & Betriebssystem: Firefox, Windows10

    Editor: Phase5


    Problembeschreibung

    Fehlermeldung/-beschreibung: keine Fehlermeldung

    bisherige Lösungsversuche: falsche Stelle des Zusatzcodes?



    Code Nr. 1



    Der zusätzlich einzufügende Code Nr.2


    CSS
    .et_pb_blog_0 .et_pb_post .entry-featured-image-url img{
        max-height: 350px !important;
        width: auto !important;


    Mit dem vorhandenen css wird das Bild sogar noch vergrößert bzw. verzerrt. Das ist unschön.

    Siehe meine aktuelle Seite: https://silviadiessner.de/


    Über Hilfe würde ich mich freuen.

    Grüße

    Silvia

  • Editor: Phase5

    Das solltest du ändern. Phase5 ist nicht mehr zu gebrauchen: er kann kein UTF-8.


    Zitat

    Der zusätzlich einzufügende Code Nr.2


    CSS
    .et_pb_blog_0 .et_pb_post .entry-featured-image-url img{
        max-height: 350px !important;
        width: auto !important;

    Laut Entwicklerwerkzeug hast du den Code nicht bzw. an der falschen Stelle eingefügt, wenn man die Einstellungen (ohne !important, damit sollte man ohnehin sehr sparsam sein) von Hand einfügt wird das große Bild mit 350px Höhe dargestellt (und auch nicht verzerrt). Wo du das allerdings eingefügt hast, weiß ich nicht. (200kB minifiziertes CSS? Dein Ernst?)

  • Hallo tk1234,


    Danke für Deine Antwort.


    Phase5 kenne ich noch aus der Zeit, in der ich mich gelegentlich mit Programmierung beschäftigt habe. Ist aber lange her. Ich probiere auch gern ein vergleichbares kostenloses Programm aus. Nur sollte es für ahnungslose Gelegenheitsnutzer geeigenet sein.


    An welcher Stelle muss ich denn den Code einfügen? Dass es die falsche Stelle war (mehrere Zeilen ausprobiert), habe ich gemerkt, weil mein Online-Editor in Wordpress "gemeckert" hat (also rote Codezeilen).


    Generell zu meinem css: Ich nutze ein gekauftes Template für Wordpress. Wie gut oder schlecht das programmiert ist, kann ich nicht beurteilen. Bisher hat alles funktioniert. Nur eben mit der Bildhöhe gibt es Anpassungsbedarf.


    Grüße

    Silvia

  • Phase5 kenne ich noch aus der Zeit, in der ich mich gelegentlich mit Programmierung beschäftigt habe. Ist aber lange her. Ich probiere auch gern ein vergleichbares kostenloses Programm aus. Nur sollte es für ahnungslose Gelegenheitsnutzer geeigenet sein.

    Das ist aber schon sehr lange her :) Phase5 dürfte seine Blütezeit so vor ca. 20 Jahren gehabt haben … Kostenlose, gute Editoren gibt es wie Sand am Meer, aktuell sehr beliebt (und auch sehr mächtig) ist Visual Studio Code, dir reicht aber evtl. auch Bluefish.

    Zitat

    An welcher Stelle muss ich denn den Code einfügen? Dass es die falsche Stelle war (mehrere Zeilen ausprobiert), habe ich gemerkt, weil mein Online-Editor in Wordpress "gemeckert" hat (also rote Codezeilen).

    Prinzipiell sollte es reichen den Code am Ende anzuhängen - ich weiß allerdings nicht wieweit du die CSS-Dateien überhaupt bearbeiten kannst (v.a. so dass Änderungen nicht bei Updates o.ä. wieder überschrieben werden). Im Code habe ich allerdings eine (aktuell leere) CSS-Datei gesehen die für eigenen Code gedacht zu sein scheint - nach der solltest du mal suchen.

    Zitat

    Generell zu meinem css: Ich nutze ein gekauftes Template für Wordpress. Wie gut oder schlecht das programmiert ist, kann ich nicht beurteilen. Bisher hat alles funktioniert. Nur eben mit der Bildhöhe gibt es Anpassungsbedarf.

    Auf mich macht es keinen guten Eindruck, der Code (HTML und CSS) enthält Fehler, ohne Javascript fehlen Teile der Startseite und die Farben im Menü sind z.T. sehr ungünstig (wenig Kontrast). Aber wenn du es gekauft hast, wieso wendest du dich dann nicht an den Hersteller?

  • basti1012


    Eher nicht. Es ist wie gesagt ein fertig gekauftes Wordpress-Template.


    tk1234


    Dann fällt die Blütezeit von Phase5 mit meiner zusammen. ;)


    Der hier gepostete Code IST vom Hersteller. 8) Code 1 ist das Ursprungs-css und auf Nachfrage erhielt ich den Schnipsel 2 als Ergänzung mit dem Hinweis diesen (Wo?) in Code 1 einzufügen. Dann sollte es funktionieren. Am Ende einfügen habe ich bereits versucht. Das hatte keine Auswirkungen. Auch nicht bei gelöschtem Cache.


    Zu der leeren css-Datei: Es gibt vermutlich zwei davon. Einmal habe ich ein sogenanntes Basis-Template und dann mein eigentliches Template. Die css vom zweiten Template kann ich über den Editor in Wordpress bearbeiten. Code 1 ist die vollständige css.

  • Hinweis diesen (Wo?) in Code 1 einzufügen. Dann sollte es funktionieren. Am Ende einfügen habe ich bereits versucht. Das hatte keine Auswirkungen. Auch nicht bei gelöschtem Cache.

    Das da eine Klammer fehlt weißt du ja oder ?

    Falls du den Code ohne die Klammer an dem Ende der CSS kopiert hast wird es auch nicht klappen

  • tk1234


    Gestern war Freitag, also keine Antwort vor Montag.

    Wenn ich meine Frage in einem Forum poste, lerne ich vielleicht nebenbei noch was.

    Aber jetzt klappt es doch. Den zusätzlichen Code unten angefügt und auf der Startseite ist das Bild nur noch 350 Pixel hoch. Sieht gut aus. Allerdings wird es im Artikel selbst immer noch verzerrt und viel zu groß dargestellt, siehe https://silviadiessner.de/2020/08/05/gefallenenfriedhof/

    Gibt es eine Möglichkeit auch das zu ändern? Wäre schön.


    basti1012


    Nein, ich weiß nicht, dass eine Klammer fehlt. Ich kenne die Syntax einer style.css nicht.

    Im Editor sieht es allerdings fehlerfrei aus. Auch ohne Klammer ist keine Zeile rot, siehe Anhang.


    Danke und Grüße

  • Am ende des Css Schnipsel fehlt eine } bei deinen ersten Beitrag.

    In den jetzigen Bild fehlt die } auch am Ende des Css Codes.


    In den DEV Tools wird eine Klammer angezeigt.

    Vieleicht hat WP die Klammer da eingebaut beim speichern.


    Sieht gut aus. Allerdings wird es im Artikel selbst immer noch verzerrt und viel zu groß dargestellt, siehe https://silviadiessner.de/2020/08/05/gefallenenfriedhof/

    Gibt es eine Möglichkeit auch das zu ändern? Wäre schön.

    Die Css muß auf der Seite anders sein.

    Versuche mal das mit in der Css reinzukopieren, unter den anderen Css Code

    CSS
    .et_post_meta_wrapper > img {
        height: 350px !important;
        width: auto !important;
    }
  • basti1012


    Das hat leider nicht funktioniert.

    Deine erste Codezeile wird in meinem Editor rot angezeigt und die Bildgröße ist unverändert.

    Außerdem wird scheinbar eine andere Einstellung überschrieben. Der grüne Balken im Menü ist dann grau und die Links blau statt wie bisher fett grün.


    Nachtrag:


    Es geht!!

    Ich muss die Codezeilen nur als benutzerdefiniertes css eintragen statt direkt in der style.css.


    Dankeschön!!

  • Aber jetzt klappt es doch. Den zusätzlichen Code unten angefügt und auf der Startseite ist das Bild nur noch 350 Pixel hoch. Sieht gut aus. Allerdings wird es im Artikel selbst immer noch verzerrt und viel zu groß dargestellt, siehe https://silviadiessner.de/2020/08/05/gefallenenfriedhof/

    Gibt es eine Möglichkeit auch das zu ändern? Wäre schön.

    Bei mir wird es richtig angezeigt, ggf. ein Cacheproblem?

    Zitat

    Nein, ich weiß nicht, dass eine Klammer fehlt. Ich kenne die Syntax einer style.css nicht.

    Im Editor sieht es allerdings fehlerfrei aus. Auch ohne Klammer ist keine Zeile rot, siehe Anhang.


    Danke und Grüße

    Dann solltest du dich vielleicht zumindest mal mit den Grundlagen von CSS beschäftigen, zumindest so weit dass du weißt wie CSS grundsätzlich aufgebaut ist. Der Editor taugt nichts, wobei das ja auch nur eine Art Hilfskrücke ist um über das Webinterface am CSS was ändern zu können. Ich haben den Code (ohne das überflüssige important) mal in VS Code gesetzt:

    html-seminar.de/woltlab/attachment/2598/

    der bemängelt gleich die fehlende Klammer am Ende. Der Cursor steht über dem rot unterkringelten in Zeile 7, dann erscheint das Kästchen mit der Erklärung was falsch ist (die Leerzeilen sind nur dazu da damit das Kästchen max-height und width nicht verdeckt).

  • domeetr


    Danke für den Tipp. Der Hersteller hatte vermutlich denselben Gedanken und bietet das Template zweigeteilt an. Einmal das Basistheme und dann das Child-Theme. Die Änderungen finden ausschließlich im Child statt.


    Nun habe ich aber nach einem Bilderupload ein neuen Problem. Ich hatte für diese Artieklserie nochmal alle Bilder neu hochgeladen und in den zwei fertigen Artikeln verlinkt.

    Jetzt wird ein 350 Pixel hoher Ausschnitt des Bildes angezeigt.

    https://silviadiessner.de/2020/08/05/gefallenenfriedhof/


    Über erneute Hilfe würde ich mich freuen.

  • Bei neu eingestellten Artikeln funktioniert alles. Warum bei den geänderten nicht, ist mir unklar, aber jetzt bleibt es wie es ist.


    Nochmals Dankeschön an alle Helfer.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!