Einsteiger: Bildausschnitte je nach Orientation / Bildgrößen unter XAMPP

    Hallo zusammen,

    ich mache gerade meine ersten Schritte mit WordPress. Dazu habe ich mir Version 6.2 ohne weitere Anpassungen einmal lokal unter XAMPP (Windows) und einmal bei meinem Webhoster installiert.

    Zwei Fragen:

    1. Ich würde bei einigen Bildern gern den Ausschnitt je nach Orientation des Bildschirms bestimmen. Wie man das mit Photoshop und CSS erledigt, weiß ich. Geht das in WordPress vielleicht einfacher, mit einem Plugin zum Beispiel?

    2. Ich hatte im Vorfeld gelesen, dass WordPress optimale Bildgrößen je nach Bildschirmgröße ausliefert. In meiner Online-Version funktioniert das, nicht aber unter XAMPP. Der Quellcode eines Bildes sieht dann so aus:

    <img decoding="async" width="4000" height="2657" src="http://localhost/wordpress/wp-c…04/testbild.jpg" alt="" class="wp-image-5">

    Woran könnte das liegen?

    Vielen Dank fürs Lesen und Grüße
    Felix

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Zitat von Failix


    2. Ich hatte im Vorfeld gelesen, dass WordPress optimale Bildgrößen je nach Bildschirmgröße ausliefert. In meiner Online-Version funktioniert das, nicht aber unter XAMPP. Der Quellcode eines Bildes sieht dann so aus:

    <img decoding="async" width="4000" height="2657" src="http://localhost/wordpress/wp-c…04/testbild.jpg" alt="" class="wp-

    mit welcher Raketenwissenschaft hast du WordPress auf localhost die Bildgröße 4000 beigebracht? Die maximale Bildgröße von WordPress ist 2560 px. Vermutlich verhindert dieses Plugin oder dieser PHP code die WordPress übliche Darstellung von Bildern:

    Code
    <figure class="wp-block-image size-large"><a href="https://static2.r23.de/2023/04/arbeitsbelastung-scaled.webp" class="fancybox image" rel="gallery"><img decoding="async" loading="lazy" src="https://static2.r23.de/2023/04/arbeitsbelastung-1937x1291.webp" alt="Tipps, wie man die Arbeitsbelastung beim Bloggen reduziert" class="wp-image-36206" srcset="https://static2.r23.de/2023/04/arbeitsbelastung-1937x1291.webp 1937w, https://static2.r23.de/2023/04/arbeitsbelastung-936x624.webp 936w, https://static2.r23.de/2023/04/arbeitsbelastung-1536x1024.webp 1536w, https://static2.r23.de/2023/04/arbeitsbelastung-2048x1365.webp 2048w, https://static2.r23.de/2023/04/arbeitsbelastung-360x240.webp 360w, https://static2.r23.de/2023/04/arbeitsbelastung-720x480.webp 720w, https://static2.r23.de/2023/04/arbeitsbelastung-1200x800.webp 1200w, https://static2.r23.de/2023/04/arbeitsbelastung-1320x880.webp 1320w, https://static2.r23.de/2023/04/arbeitsbelastung-100x67.webp 100w, https://static2.r23.de/2023/04/arbeitsbelastung-800x533.webp 800w, https://static2.r23.de/2023/04/arbeitsbelastung-720x480@2x.webp 1440w, https://static2.r23.de/2023/04/arbeitsbelastung-100x67@2x.webp 200w, https://static2.r23.de/2023/04/arbeitsbelastung-800x533@2x.webp 1600w" sizes="(max-width: 1937px) 100vw, 1937px" title="Wie viel Zeit kostet das Bloggen? Zeitmanagement-Tipps für erfolgreiche Blogger! 2" width="1937" height="1291"></a></figure>

    ^- Code aus meinem Blog.
    Mein Blog legt Bilder auf eine Subdomain ab.
    Mein Blog erzeugt über ein Plugin @2 Variationen.

    1. das Bild wird mit <figure> Tag ausgeliefert.
    2. wenn das Bild größer als 2560 px erstellt WordPress eine *-scaled* Version.
    3. verwende webp. JPG ist mega out im Web.

    Damit WordPress unterschiedliche Bildgrößen erstellen kann muss die gd-lib auf Xamp aktiv sein. in der~...\xampp\php\php.ini die gd.lib aktiv sein.
    in der php.ini Semikolon ; vor

    Code
    extension=gd


    löschen

    Änderungen an der PHP.ini sind nur nach dem Neustart vom Apache Server erst aktiv.

    es ist besser, wenn man das PHP Modul imagick verwendet.
    Die Installation ist allerdings nicht so einfach ... für deine Google Suche: php modul imagick xampp

    Mit offenen Augen träumen

    3 Mal editiert, zuletzt von r23 (9. April 2023 um 13:37)

    Vielen Dank für Deine Antwort!

    Zitat von r23

    mit welcher Raketenwissenschaft hast du WordPress auf localhost die Bildgröße 4000 beigebracht? Die maximale Bildgröße von WordPress ist 2560 px.

    Ich habe bewusst so ein großes Bild benutzt, um zu sehen, was WordPress online daraus macht. Für meinen Notebook-Bildschirm liefert es ein Bild von 1536 Pixeln Breite aus.

    Bei meinem XAMPP habe ich in der php.ini das Semikolon wie beschrieben entfernt und den Apache neu gestartet, aber ohne anderes Ergebnis bei der Bildausgabe. Nicht so schlimm, ist ja nur lokal zum Testen.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden