Wordpress en het stylen van thumbnails in een custom Theme.

[De_Bastaard]

Ik ben bezig om zelf een theme te maken voor de politieke partij waar mijn pa lid van is, en nu loop ik tegen het volgende aan.

Op de index wil ik graag thumbnails toevoegen aan posts, om de site wat meer vulling te geven (alleen text is immers zo saai). Na lang zoeken, is het me gelukt om thumbs mogelijk te maken door middel van dit:

code:

 add_theme_support( 'post-thumbnails' );

toe te voegen aan mijn functions.php.

Als ik dan in Wordpress een post maak, of bewerk voeg ik via 'featured image' een plaatje toe die ik dan als thumbnail wil gebruiken. Via de eigenschappen van dit plaatje in Wordpress kan ik de maten veranderen, en de alignment. Dit zou ook moeten kunnen door middel van een class, maar dat lijkt niet helemaal te werken zoals het zou moeten.

Ik heb in mijn index.php het volgende toegevoegd:

PHP:

<?php the_post_thumbnail('thumbnail', array('class' => 'thumb')); ?>

Daarmee zou ik dus in mijn CSS file de .thumb class moeten kunnen opmaken, maar dat lukt dus niet helemaal zoals het zou moeten.

Om een of andere reden valt die image ook nog onder de div "#main img" terwijl ik dat helemaal niet wil. Nu heb ik al geprobeerd om het op deze manier aan te pakken:

Cascading Stylesheet:

#main img .thumb {
    float: left;
    width: 75px;
    height: 75px;
    border: 1px solid #000;
    margin: 0px 5px 5px 0px;
}

Maar dat werkt ook niet! Het enige wat mijn thumbnail krijgt vanuit die class, is een border. De margin werkt niet omdat die al eerder in de CSS benoemd word. Opzich is het niet erg als ik nu die #main img moet gebruiken voor mijn thumbnails, het enige nadeel is daarmee dat ik geen andere plaatjes zou kunnen gebruiken omdat die automatisch ook die attributen mee krijgen.

Weet iemand wat ik verkeerd doe, en hoe ik dit kan oplossen? Hoop dat mijn verhaal een beetje duidelijk is

Edit:

De reden dat ik die marge erin wil is natuurlijk omdat de tekst in <p> anders meteen tegen de thumbnail aangeplakt is. Dat wil ik niet

[ Voor 3% gewijzigd door De_Bastaard op 23-03-2011 16:34 ]

[amahusu]

Ik weet niet welke browser je gebruikt, maar met Firebug kan je in een oogopslag zien wat je css doet.

waarschijnlijk kun je de thumbnail image nog verder specificeren in je selector (lijkt me dat je die plaatjes ook in een wrapper/container hebt staan), zodat je stijl voor alleen voor dat element van toepassing is.

[Hiroj]

De_Bastaard schreef op woensdag 23 maart 2011 @ 16:32:
...

Als ik dan in Wordpress een post maak, of bewerk voeg ik via 'featured image' een plaatje toe die ik dan als thumbnail wil gebruiken. Via de eigenschappen van dit plaatje in Wordpress kan ik de maten veranderen, en de alignment. Dit zou ook moeten kunnen door middel van een class, maar dat lijkt niet helemaal te werken zoals het zou moeten.

...

Als ik mij niet vergis, past men een thumbnail qua formaat aan in de dashboard onder "Instellingen/Settings" > "Media". Meestal staat hier standaard: 150px maal 150px. Dit zal jou 'kleinere' formaat altijd overschrijven.
Misschien kun je voor ons de HTML output plaatsen van je thumbnail.

Zelf stel ik mijn thumbnails zo in dat ik een vast formaat heb, bij iedere bericht/pagina. Dit heb ik dan ook in mijn functions.php staan:

PHP:

    if ( function_exists( 'add_theme_support' ) ) 
    { 
        add_theme_support( 'post-thumbnails' );
        add_theme_support( 'post-thumbnails', array( 'post', 'custom post type' ) );
        set_post_thumbnail_size( 125, 125, true );
    }

[MueR]

De_Bastaard schreef op woensdag 23 maart 2011 @ 16:32:
#main img .thumb {

Jij hebt nog een element binnen je img tag? Ofwel je hebt hier een tikfout gemaakt in je CSS, ofwel je hebt echt een tikfout gemaakt in je CSS, of je moet je beheersing van CSS nog een beetje bijschaven.

[Verwijderd]

Zoals MueR zegt, die spatie tussen 'img' en '.thumb' moet weg;

MueR schreef op donderdag 24 maart 2011 @ 10:28:
Jij hebt nog een element binnen je img tag? Ofwel je hebt hier een tikfout gemaakt in je CSS, ofwel je hebt echt een tikfout gemaakt in je CSS, of je moet je beheersing van CSS nog een beetje bijschaven.

Daarnaast zijn er een aantal standaard CSS-selectors beschikbaar om de post thumbnails te stylen.

[De_Bastaard]

Nou, het was dus inderdaad die tikfout.

Had hem gisteravond al gevonden na lang zoeken in m'n CSS

Toch bedankt tweakerts!