Ondersteuning » Plugin vragen » Woocommerce, afbeelding is wazig

  • Opgelost PaulGJ

    (@paulgj)


    Thema: Weaver II Pro 2.1.12
    Plugin: Woocommerce 2.2.10
    Zie mijn testpagina

    Ik kom er niet verder mee, op mijn testpagina staat de foto van de afbeelding goed scherp. Klik ik vervolgens op de foto om naar de productbeschrijving te gaan, dan wordt de foto wazig.
    Voor mij een vraag……..voor u een weet? Dan hoop ik op een oplossing.

    Met vriendelijke groet
    Paul

10 reacties aan het bekijken - 1 tot 10 (van in totaal 10)
  • Thread starter PaulGJ

    (@paulgj)

    Zoek dringend hulp voor bovenstaand probleem.
    Kan iemand mij advies geven, alstublieft.
    Zie deze pagina

    Bij voorbaat hartelijk dank
    Met vriendelijke groet
    Paul

    Hey Paul,

    Ook de kleine foto is bij mij heel erg wazig.

    Antwoord is heel simpel, de afbeeldingen die je upload zijn erg, erg klein. Namelijk 90×90 pixels.

    Om er mooi uit te zien in dat thema moeten ze minstens 427 x 427 zijn.

    Wat er nu gebeurt is dat de afbeelding van 90×90 wordt uitgerekt om het juiste formaat te worden. Hierdoor verslechterd de kwaliteit drastisch.

    Hoop je hierbij genoeg te hebben geïnformeerd, succes!

    Thread starter PaulGJ

    (@paulgj)

    Hallo Mathijs

    Dank voor uw antwoord, ik ga er mee aan het werk.

    Met vriendelijke groet
    Paul

    Thread starter PaulGJ

    (@paulgj)

    Hallo Mathijs,

    Het lukt mij niet goed om een mooie afbeelding bij de producten te plaatsen.
    Zie voorbeeld De afbeelding is 500×500, verkleind van het origineel 993×993.
    Dat zou toch moeten lukken zou ik denken?

    Dit zijn mijn instellingen voor productafbeeldingen:

    Catalogus afbeeldingen 90×90 px Hard bijsnijden?
    Enkele product afbeelding 90×90 px Hard bijsnijden?
    Product miniaturen 90×90 px Hard bijsnijden?
    Alles gevinkt voor hard bijsnijden. Ook al vink ik deze uit, dan nog maakt het geen verschil.

    Wat kan ik doen om de afbeeldingen te verbeteren.

    Hartelijk dank, bij voorbaat,
    vriendelijke groet
    Paul

    Hallo Paul,

    Waren deze instellingen van 90×90 standaard of heb je deze zelf ingesteld?

    Het probleem is dat welke afbeelding je er ook inzet, deze 90×90 worden gemaakt. Je zou hierbij dus andere waarden in moeten stellen, wat deze zijn kan ik zo niet zeggen helaas.

    Kan je op de pagina Instellingen voor productafbeeldingen deze waarden veranderen of niet?

    Let er wel op dat wanneer je deze instellingen veranderd, de oude afbeeldingen nog steeds 90×90 zullen zijn. Je zult dus nieuwe afbeeldingen moeten uploaden, of een plugin zoals Regenerate Thumbnails moeten gebruiken om alle afbeeldingen te herstellen.

    Succes en ik hoor graag of er vooruitgang is!

    Thread starter PaulGJ

    (@paulgj)

    Hallo Mathijs,

    De instellingen zijn niet standaard, deze heb ik zelf zo ingesteld omdat ik er van uit ben gegaan dat als ik bijvoorbeeld een grotere afbeelding dan 90×90 zou plaatsen deze dan automatisch naar 90×90 wordt gewijzigd.

    In mijn optiek, dus als in een afbeelding van 500×500 gebruik dan zou die automatisch naar 90×90 worden overgezet. Of zie ik dit verkeerd?

    Het is voor mij juist géén probleem dat de afbeeldingen 90×90 zouden zijn. Persoonlijk houd ik niet zo van grote afbeeldingen.

    Met vriendelijke groet
    Paul

    Ah ik snap het probleem nu!

    Wanneer je hier aangeeft dat je de afbeeldingen 90×90 wilt hebben maakt hij de afbeeldingen inderdaad 90×90, dat gaat gewoon goed.

    Het probleem is echter dat de verschillende delen op je website de afbeelding vertellen hoe groot die moet zijn. Hier heeft de instelling van 90×90 geen invloed op.

    Zo bepaald de CSS op de single product pagina dat de afbeelding 100% van de eerste kolom opneemt. Dit zorgt er dus voor dat de afbeelding zo groot wordt.

    Mijn advies is dus om de afbeeldinginstellingen te herstellen naar de standaard, en te gaan spelen met de CSS.
    Ik raad echter niet aan om alles zo klein te maken, omdat mensen op de single product pagina gewoon het product goed willen kunnen zien. Ook moet je hier met procenten werken ipv met pixel waardes. Dit omdat het een responsive ontwerp is.

    Als je hier nog vragen over hebt hoor ik het graag, hopelijk is het probleem nu in ieder geval duidelijk.

    Heel veel succes!

    Thread starter PaulGJ

    (@paulgj)

    Hallo Mathijs,

    Ik vind het ontzettend fijn, dat u mij hier zo goed mee helpt. Ik help een vriend om deze website te maken, want het is een hele klus voor één alleen.

    Ik zal eens kijken of de instellingen weer kan terugbrengen naar het uitgangspunt. Ik weet niet of ik nog de juiste afmetingen uit mijn hoofd weet. Dat wordt gokken dus.

    Hoe kan ik de CSS zodanig wijzigen dat ik hiermee invloed heb op de grootte van de afbeeldingen?

    Ik begrijp wat u bedoelt als u zegt dat ik de afbeeldingen niet erg klein moet maken.

    Het probleem is duidelijk en dat is al veel 🙂

    Nogmaals dank
    Paul

    Thread starter PaulGJ

    (@paulgj)

    Hallo,

    De oplossing voor het probleem heb ik gevonden op deze website

    Nogmaals hartelijk dank voor uw moeite.
    Met vriendelijke groet
    Paul

    Geen enkel probleem, ik heb het graag gedaan!

    Mooi dat op die website te vinden was wat de oorspronkelijke afmetingen hadden moeten zijn. Erg handig.

    Heb de productpagina even bekeken en het ziet er zo goed uit! Mocht je de CSS nog willen wijzigen dan kan dit via een FTP programma zoals Filezilla.

    Basis informatie hierover kan je overal op het internet vinden, dus dat moet wel goed komen.

    Voor het aanpassen van deze afbeeldingen moet je:

    .woocommerce div.product div.images img, .woocommerce #content div.product div.images img, .woocommerce-page div.product div.images img, .woocommerce-page #content div.product div.images img {
    
        width: 100%;
    }

    Veranderen naar een lager percentage.

    Heel veel succes en nog een prettige dag!

    Mvg,

    Mathijs Lemmers
    mathijslemmers.com

10 reacties aan het bekijken - 1 tot 10 (van in totaal 10)
  • Het onderwerp ‘Woocommerce, afbeelding is wazig’ is gesloten voor nieuwe reacties.