unscharfe Vorschaubilder

  • Gelöst bios2000one

    (@bios2000one)


    vor 7 Monaten, 3 Wochen

    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.

    View post on imgur.com

    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 7 Monaten, 3 Wochen 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)
1 2
  • Moderator Angelika Reisiger

    (@la-geek)

    vor 7 Monaten, 3 Wochen

    Wenn du dann noch den URL zu deiner Website einträgst, könnten wir uns das näher anschauen.

    Thread-Starter bios2000one

    (@bios2000one)

    vor 7 Monaten, 3 Wochen

    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

    Moderator Angelika Reisiger

    (@la-geek)

    vor 7 Monaten, 3 Wochen

    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)

    vor 7 Monaten, 3 Wochen

    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

    Moderator Angelika Reisiger

    (@la-geek)

    vor 7 Monaten, 3 Wochen

    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)

    vor 7 Monaten, 3 Wochen

    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.

    Moderator Angelika Reisiger

    (@la-geek)

    vor 7 Monaten, 3 Wochen

    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)

    vor 7 Monaten, 3 Wochen

    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
    Moderator Angelika Reisiger

    (@la-geek)

    vor 7 Monaten, 3 Wochen

    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)

    vor 7 Monaten, 3 Wochen

    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 7 Monaten, 3 Wochen von bios2000one.
    Moderator Angelika Reisiger

    (@la-geek)

    vor 7 Monaten, 3 Wochen

    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)

    vor 7 Monaten, 3 Wochen

    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 7 Monaten, 3 Wochen von bios2000one.
    Moderator Angelika Reisiger

    (@la-geek)

    vor 7 Monaten, 3 Wochen

    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)

    vor 7 Monaten, 3 Wochen

    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.

    Moderator Angelika Reisiger

    (@la-geek)

    vor 7 Monaten, 3 Wochen

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

Ansicht von 15 Antworten – 1 bis 15 (von insgesamt 17)
1 2
  • Das Thema „unscharfe Vorschaubilder“ ist für neue Antworten geschlossen.