Support » WooCommerce » unscharfe Vorschaubilder

  • Gelöst bios2000one

    (@bios2000one)


    Hallo und guten Abend,

    ich habe mir jetzt schon verschiedene Seiten und Anleitungen angeschaut, aber nicht auf die Lösung gekommen.

    Das Hauptbild wird sauber angezeigt, aber die Vorschaubilder sind alle unscharf.

    Im Customizer habe die Hauptbildbreite und Vorschaubildbreite auf 600px gesetzt. Ebenfalls habe ich in WooCommerce neue Vorschaubilder generiert. Alle hochgeladenen Bilder haben eine Breite 1920px.

    Die Seite ist bisher nicht online und daher habe ich leider keinen Link zur Seite für euch.

    Vielen Dank

    `
    ### wp-core ###
    
    version: 6.5.2
    site_language: de_DE
    user_language: de_DE
    timezone: Europe/Berlin
    permalink: /%postname%/
    https_status: true
    multisite: false
    user_registration: 0
    blog_public: 1
    default_comment_status: open
    environment_type: production
    user_count: 1
    dotorg_communication: true
    
    ### wp-paths-sizes ###
    
    wordpress_path: /var/www/virtual/vnv-urbex.de/store_astgefluester_de/htdocs/wordpress
    wordpress_size: 1,94 GB (2082440867 bytes)
    uploads_path: /var/www/virtual/vnv-urbex.de/store_astgefluester_de/htdocs/wordpress/wp-content/uploads
    uploads_size: 140,42 MB (147245971 bytes)
    themes_path: /var/www/virtual/vnv-urbex.de/store_astgefluester_de/htdocs/wordpress/wp-content/themes
    themes_size: 12,46 MB (13064090 bytes)
    plugins_path: /var/www/virtual/vnv-urbex.de/store_astgefluester_de/htdocs/wordpress/wp-content/plugins
    plugins_size: 212,27 MB (222581350 bytes)
    database_size: 14,81 MB (15532032 bytes)
    total_size: 2,31 GB (2480864310 bytes)
    
    ### wp-active-theme ###
    
    name: Hello Elementor (hello-elementor)
    version: 3.0.1
    author: Elementor Team
    author_website: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
    parent_theme: none
    theme_features: core-block-patterns, widgets-block-editor, post-thumbnails, menus, automatic-feed-links, title-tag, html5, custom-logo, editor-style, align-wide, woocommerce, wc-product-gallery-zoom, wc-product-gallery-lightbox, wc-product-gallery-slider
    theme_path: /var/www/virtual/vnv-urbex.de/store_astgefluester_de/htdocs/wordpress/wp-content/themes/hello-elementor
    auto_update: Deaktiviert
    
    ### wp-themes-inactive (3) ###
    
    Twenty Twenty-Four: version: 1.1, author: Das WordPress-Team, Automatische Aktualisierungen deaktiviert
    Twenty Twenty-Three: version: 1.4, author: Das WordPress-Team, Automatische Aktualisierungen deaktiviert
    Twenty Twenty-Two: version: 1.7, author: Das WordPress-Team, Automatische Aktualisierungen deaktiviert
    
    ### wp-plugins-active (14) ###
    
    Code Snippets: version: 3.6.4, author: Code Snippets Pro, Automatische Aktualisierungen deaktiviert
    Duplicator: version: 1.5.8.1, author: Duplicator, Automatische Aktualisierungen deaktiviert
    Elementor: version: 3.21.0, author: Elementor.com, Automatische Aktualisierungen deaktiviert
    Elementor Pro: version: 3.21.0, author: Elementor.com, Automatische Aktualisierungen deaktiviert
    EWWW Image Optimizer: version: 7.5.0, author: Exactly WWW, Automatische Aktualisierungen deaktiviert
    Germanized for WooCommerce: version: 3.16.3, author: vendidero, Automatische Aktualisierungen deaktiviert
    Real Cookie Banner (Free): version: 4.7.3, author: devowl.io, Automatische Aktualisierungen deaktiviert
    Real Media Library (Free): version: 4.22.12, author: devowl.io, Automatische Aktualisierungen deaktiviert
    WooCommerce: version: 8.7.0, author: Automattic, Automatische Aktualisierungen deaktiviert
    WooCommerce PayPal Payments: version: 2.6.1, author: WooCommerce, Automatische Aktualisierungen deaktiviert
    WooPayments: version: 7.4.0, author: Automattic, Automatische Aktualisierungen deaktiviert
    WP-Sweep: version: 1.1.8, author: Lester 'GaMerZ' Chan, Automatische Aktualisierungen deaktiviert
    WPForms Lite: version: 1.8.7.2, author: WPForms, Automatische Aktualisierungen deaktiviert
    Yoast Duplicate Post: version: 4.5, author: Enrico Battocchi & Team Yoast, Automatische Aktualisierungen deaktiviert
    
    ### wp-plugins-inactive (2) ###
    
    Akismet Anti-spam: Spam Protection: version: 5.3.2, author: Automattic - Anti-spam Team, Automatische Aktualisierungen deaktiviert
    All-in-One WP Migration: version: 7.81, author: ServMask, Automatische Aktualisierungen deaktiviert
    
    ### code-snippets (3) ###
    
    snippet-5: name: Woo Kategorien Produktzahl ausblenden, scope: global, modified: 2024-04-01 17:03:56, tags: [Woo]
    snippet-6: name: Woo Produktsortierung in Kategorie ausblenden, scope: global, modified: 2024-04-01 17:22:39
    snippet-7: name: WooCommerce Kurzbeschreibung in Übersicht anzeigen, scope: global, modified: 2024-04-14 14:25:12
    
    ### wp-media ###
    
    image_editor: EWWWIO_Imagick_Editor
    imagick_module_version: 1691
    imagemagick_version: ImageMagick 6.9.11-60 Q16 x86_64 2021-01-25 https://imagemagick.org
    imagick_version: 3.4.4
    file_uploads: 1
    post_max_size: 32M
    upload_max_filesize: 32M
    max_effective_size: 32 MB
    max_file_uploads: 20
    gd_version: bundled (2.1.0 compatible)
    gd_formats: GIF, JPEG, PNG, WebP, BMP, XPM
    ghostscript_version: not available
    
    ### wp-server ###
    
    server_architecture: Linux 5.10.0-28-amd64 x86_64
    httpd_software: Apache
    php_version: 8.1.28 64bit
    php_sapi: cgi-fcgi
    max_input_variables: 8000
    time_limit: 60
    memory_limit: 128M
    max_input_time: 60
    upload_max_filesize: 32M
    php_post_max_size: 32M
    curl_version: 7.74.0 OpenSSL/1.1.1w
    suhosin: false
    imagick_availability: true
    pretty_permalinks: true
    htaccess_extra_rules: false
    current: 2024-04-15T18:46:09+00:00
    utc-time: Monday, 15-Apr-24 18:46:09 UTC
    server-time: 2024-04-15T20:46:06+02:00
    
    ### wp-database ###
    
    extension: mysqli
    server_version: 10.11.7-MariaDB-1:10.11.7+maria~deb11
    client_version: mysqlnd 8.1.28
    max_allowed_packet: 134217728
    max_connections: 250
    
    ### wp-constants ###
    
    WP_HOME: undefined
    WP_SITEURL: undefined
    WP_CONTENT_DIR: /var/www/virtual/vnv-urbex.de/store_astgefluester_de/htdocs/wordpress/wp-content
    WP_PLUGIN_DIR: /var/www/virtual/vnv-urbex.de/store_astgefluester_de/htdocs/wordpress/wp-content/plugins
    WP_MEMORY_LIMIT: 40M
    WP_MAX_MEMORY_LIMIT: 256M
    WP_DEBUG: false
    WP_DEBUG_DISPLAY: true
    WP_DEBUG_LOG: false
    SCRIPT_DEBUG: false
    WP_CACHE: false
    CONCATENATE_SCRIPTS: undefined
    COMPRESS_SCRIPTS: undefined
    COMPRESS_CSS: undefined
    WP_ENVIRONMENT_TYPE: Nicht definiert
    WP_DEVELOPMENT_MODE: undefined
    DB_CHARSET: utf8mb4
    DB_COLLATE: undefined
    
    ### wp-filesystem ###
    
    wordpress: writable
    wp-content: writable
    uploads: writable
    plugins: writable
    themes: writable
    
    ### wpforms ###
    
    version: 1.8.7.2
    lite: 3. April 2024 um 21:07 Uhr
    upload_dir: Beschreibbar
    total_forms: 1
    total_submissions: undefined
    
    `
    • Dieses Thema wurde geändert vor 1 Monat, 1 Woche von bios2000one.

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 17)
  • Wenn du dann noch den URL zu deiner Website einträgst, könnten wir uns das näher anschauen.

    Thread-Starter bios2000one

    (@bios2000one)

    Die Seite ist noch im Aufbau und eigentlich Passwort geschützt. Ich habe das jetzt aber entfernt und den Link im ersten Beitrag eingetragen.

    Besten Dank

    Das kann mit CSS behoben werden:

    .woocommerce div.product div.images .flex-control-thumbs li img {
        opacity: 1;
    }

    CSS-Code kann man (wenn kein Child-Theme vorhanden ist) im WordPress-Backend >> Design >> Customizer >> zusätzliches CSS einfügen.

    Abgekürzter Weg -> (https://dein-domainname.de/wp-admin/customize.php), also:

    /wp-admin/customize.php an deine Domain anhängen >>, aufrufen und dann auf zusätzliches CSS klicken, das funktioniert auch (noch?), wenn du unter dem Menüpunkt Design kein „Customizer“ mehr findest.

    Nach dem Abspeichern musst du den Browsercache leeren, drücke dafür CTRL SHIFT Entf gleichzeitig, dadurch wird in den gängigen Browsern ein Fenster zum Löschen geöffnet (weitere Hilfe dazu).

    Solltest du ein Cache-Plugin installiert haben, leere auch diesen Cache. Nun teste auf der Seite, ob du eine Änderung siehst. AUf einem Smartphone musst du natürlich den Browser-Cache anders entfernen.

    ———————————————————————————
    Wenn du allerdings nicht den „milchigen“ Layer über den Thumbnail meinst, der bei mouse hover verschwindet, dann hilft obiger CSS-Code nicht. Die Thumbnails werden nicht unscharf angezeigt, sie sind unscharf, öffne ein Bild einmal mit einem Direktlink:

    https://store.....de/wp-content/uploads/2024/04/wu100224-001-005-100x100.jpg (Domain anonymisiert).

    Dann könntest du mit einem Code-Snippet eine automatische Komprimierung durch WordPress beim Upload von JPG-Dateien verhindern:

    /*---------------------------------------------------------------*/
    /*  WP jpeg komprimierung verhindern
    /*---------------------------------------------------------------*/
    
    add_filter('jpeg_quality', function($arg){return 100;});
    add_filter( 'wp_editor_set_quality', function($arg){return 100;} );

    Dort findest du dazu noch weitere Tipps:
    https://kulturbanause.de/blog/automatische-kompression-beim-upload-von-bildern-in-die-wordpress-mediathek-deaktivieren/

    Thread-Starter bios2000one

    (@bios2000one)

    Hallo und vorab vielen Dank für deine ausführliche Antwort. Ja, ich meine tatsächlich die Unschärfe. Den Code dafür kann ich auch über das Snippet Plugin einfügen?

    Ich nutze auch das Plugin EWWW Image Optimizer, das ist in Ordnung oder? Das empfohlene Plugin im Blogbeitrag ist ja nicht mehr aktuell.

    Muss ich dann die bisher hochgeladenen Bilder neu hochladen?

    Viele Grüße

    Moin,

    in Code Snippets einfügen: Ja.
    Mit EWWW: ja, dort solltest du die Komprimierungsstufe ebenfalls anpassen. Es gibt (glaube ich) dort auch die Option, Thumbnails von der Komprimierung auszuschließen.

    Neu hochladen?
    Ich erinnere mich, dass EWWW optional/standardmäßig die Originaldateien in einem gesonderten Verzeichnis speichert. Solltest du diese Option nicht deaktiviert haben, könntest du diese als Basis verwenden.

    Prüfe, ob die Originaldatei dieselbe Dateigröße hat, wie die auf deinem Rechner.

    Thread-Starter bios2000one

    (@bios2000one)

    Hallo, irgendwie will es bei mir einfach nicht funktionieren.

    Ich habe jetzt das Snippet gelöscht und den Code direkt in die functions.php eingefügt (am Ende). Das Plugin EWWW habe ich deaktiviert. Die vorhandenen Produktbilder im Medienmanager gelöscht und neu hochgeladen. Den Browser Cache habe ich ebenfalls gelöscht.

    Die Bilder werden aber immer noch unscharf angezeigt. Irgendetwas scheine ich immer noch falsch zu machen.

    Die Thumbnails werden auf der von dir verlinkten Seite auf 161px x 161px gerendert, sind aber tatsächlich 100px x 100px groß. Mit diesem Plugin
    https://de.wordpress.org/plugins/regenerate-thumbnails/ kannst du die neu generieren, zuvor musst du aber (glaube ich) die Einstellung für Thumbnail-Größe im Adminbereich –> Einstellungen auf 161px x 161px ändern.

    Thread-Starter bios2000one

    (@bios2000one)

    Hallo, auch das bringt keinen Erfolg, aber ich habe Folgendes gefunden. Scheinbar erstellt auch WooCommerce eine Vorschaubild. Im Plugin regenerate-thumbnails werden mir folgende Bildgrößen angezeigt. Als Letztes auch eine Größe 100×100, das ist auch die Größe, wenn ich ein Vorschaubild in einem neuen Tab öffne.

    Ich finde in Woocommerce keine Möglichkeit, die Größe anzupassen. Im Customizer ist die Hauptbild-Breite mit 600px angegeben und die Vorschaubild-Breite mit 300px.

    Dies sind die aktuell registrierten Vorschaubild-Größen, ob es sie für diesen Anhang gibt und ihre Dateinamen:

    • thumbnail: 161×161 Pixel (passgenau zugeschnitten) wu100224-001-004-1-161x161.jpg
    • medium: 300×300 Pixel (proportionale Größenanpassung an die Innenabmessungen) wu100224-001-004-1-225x300.jpg
    • medium_large: 768×0 Pixel (proportionale Größenanpassung an die Innenabmessungen) wu100224-001-004-1-768x1024.jpg
    • large: 1024×1024 Pixel (proportionale Größenanpassung an die Innenabmessungen) wu100224-001-004-1-768x1024.jpg
    • 1536×1536: 1536×1536 Pixel (proportionale Größenanpassung an die Innenabmessungen) wu100224-001-004-1-1152x1536.jpg
    • 2048×2048: 2048×2048 Pixel (Vorschaubild wäre größer als das Original)
    • woocommerce_thumbnail: 300×300 Pixel (passgenau zugeschnitten) wu100224-001-004-1-300x300.jpg
    • woocommerce_single: 600×0 Pixel (proportionale Größenanpassung an die Innenabmessungen) wu100224-001-004-1-600x800.jpg
    • woocommerce_gallery_thumbnail: 100×100 Pixel (passgenau zugeschnitten) wu100224-001-004-1-100x100.jpg

    Ich arbeite nicht mit WooCommerce, sorry. Aber sieh, was ich gefunden habe:

    https://woocommerce.com/de/document/woocommerce-product-search/settings/thumbnails/

    Thread-Starter bios2000one

    (@bios2000one)

    Hm, diese Funktion bzw Einstellung habe ich nicht. Vielleicht eine Pro-Sache. Ich habe dies noch gefunden…

    https://developer.woocommerce.com/docs/image-sizing-for-theme-developers/

    Es gibt auch eine Erweiterung für Woocommerce in der man die thumbs einstellen kann, soll dann aber 79 Euro im Jahr kosten, was schon sehr viel ist für eine solch simple Einstellung.

    Dieser Code scheint ja die Größer der Bilder zu steuern. Aber wo kann ich dieser anwenden bzw. einfügen. Geht das auch über die functions.php?

    		add_theme_support( 'woocommerce', array(
        'thumbnail_image_width' => 200,
        'gallery_thumbnail_image_width' => 100,
        'single_image_width' => 500,
    ) );
    
    	

    • Diese Antwort wurde geändert vor 1 Monat, 1 Woche von bios2000one.

    Teste das einmal, da ist auch eine gute Beschreibung dabei

    https://www.wpservices.com/de/how-to-change-woocommerce-gallery-thumbnail-size/

    Thread-Starter bios2000one

    (@bios2000one)

    Nach Einfügen des Codes wie im Beitrag läuft die Webseite nicht mehr.

    Es gab einen kritischen Fehler auf deiner Website.

    Erfahre mehr über die Problembehandlung in WordPress.

    Der Beitrag ist vielleicht nicht mehr auf dem neuesten Stand.

    Lösung: Ich habe jetzt diesen Code der functions.php hinzugefügt.

    		add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
        return array(
            'width' => 161,
            'height' => 161,
            'crop' => 0,
        );
    } );
    
    	

    Dazu habe ich diese Anleitung genommen… https://developer.woocommerce.com/docs/image-sizing-for-theme-developers/

    Danach habe ich die Thumbs neu generiert. Jetzt sehen die Vorschaubilder deutlich besser aus.

    • Diese Antwort wurde geändert vor 1 Monat, 1 Woche von bios2000one.

    Wenn du den Eintrag wieder entfernst, ist der Fehler behoben.

    Du kannst aber noch einmal den Code so ausprobieren (kopieren und einfügen):

    add_image_size( 'woocommerce-thumbnail-new', 200, 200, true );

    Thread-Starter bios2000one

    (@bios2000one)

    Der funktioniert leider auch nicht, im Beitrag davor habe ich die jetzige Lösung beschrieben. Der Code funktioniert. ich habe die Größen natürlich noch an mein Theme angepasst.

    Prima, kann der Thread dann auf gelöst gesetzt werden?

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 17)