Plan B… 🙂
Laten we eens gaan kijken naar een aantal zaken die hier van belang zijn bij het gebruik van afbeeldingen.
== == == logo / afbeelding heeft een onjuiste afmeting
Goed om te weten…
Bij het naar de mediabibliotheek [MB] uploaden van afbeeldingen, gebruikt de mediabibliotheek [MB] de instellingen opgeslagen:
- dashboard > instellingen > media
- hier staan 3 maten opgegeven;
- Wat WP doet is van elke afbeelding die wordt opgenomen in de MB 3 afbeeldingen [extra] opnemen met deze ingestelde maten
- zo kan het zijn [zo lijkt ’t in elk geval] dat je de ‘verkleinde versie’ gebruikt van je logo / afbeelding
In dit geval heb je bijv. het BESTAND ‘http://www.groeicadeau.nl/wp-content/uploads/2013/02/Fun-Garden-Vergeet-me-nietjes-150×150.jpg’ gebruikt, een verkleinde ’thumbnail-versie’. Echter dit bestand is te groot voor het doel. Een thumbnail-maat van bijv. 100*100px is beter geschikt.
>> >> >>Gebruik het bestand met de juiste grootte. Doorgaans behoud dat de originele naam, met toevoegingen van de afmeting; bv. ‘afbeelding-200×200.jpg’
Oplossingen:
- kies het JUISTE bestand
- Zorg er ELKE KEER vooraf voor, dat deze instellingen zo nodig worden aangepast aan de eigenschappen van de afdbeelding; Dus VOORDAT je de afbeelding opneemt in de MB
- alternatief: Gebruik FTP om ‘ruwe’ afbeeldingen, onbewerkt over te zetten naar je site. Deze worden niet opgenomen in de MB, maar zijn met het opgeven van het juiste pad, wel te gebruiken op je site
- alternatief: gebruik css [in combinatie met bovenstaande] om de maten van de getoonde afbeeldingen te beinvloeden;
== == == CSS-oplossing
=== gerelateerde producten
.woocommerce .related ul,.woocommerce .related ul.products,.woocommerce .upsells.products ul,.woocommerce .upsells.products ul.products,.woocommerce-page .related ul,.woocommerce-page .related ul.products,.woocommerce-page .upsells.products ul,.woocommerce-page .upsells.products ul.products{float:left}
== == == grote product-afbeelding
.woocommerce #content div.product div.images img, .woocommerce div.product div.images img, .woocommerce-page #content div.product div.images img, .woocommerce-page div.product div.images img {
display: block;
width: 725%; /*ERG GROOT pas waarde aan naar wens*/}
>> Observatie
ik merk nu ik aan ’t puzzelen ben, dat ook de sidebar – product-categorieeen etc niet goed staan.
WAT heb je veranderd? Bijv marges, padding,borders, breedte van de sidebars/het artikel??
Ergens zijn instellingen aangepast die de opmaak hebben ver%^&*!
Bijv. het aanpassen van de breedte van pagina, sidebar of artikelen, kan de opmaak van de hele site ‘omgooien’, omdat alle maten doorgaans onderling afhankelijk zijn en ‘samen moeten passen’ op de pagina.
Bijvoorveeld:
Pagina breedt:1000px
Sidebar breedt: 35%
Artikel breedt:65%
>> dit gaat wrsch niet goed, omdat ook marges, padding etc invloed hebben op de totale opmaak
>Spelen met de waarden…
Pagina breedt:1000px
Sidebar breedt: 32%
Artikel breedt:64%
… net zo lang ‘passen’ tot ie klopt…
== == == zie volgende bericht