geplaatst door: Roel
Hallo,

Ik gebruik fancybox for wordpress en vind het formaat van thumbnails aan de grote kant, hoe kunnen deze kleiner gemaakt worden en ook het grid zodat alles wat dichter bijelkaar staat aanpassen.
Ik heb al in de css van de pluginn gekeken maar kan niet zo snel vinden welk onderdeel dit behelst en van de code die in jquery.fancybox.js staat wordt ik ook niet veel wijzer van.

Ook een googlezoek leverde geen bruikbare resultaten op.

Hopelijk heeft iemand hier ervaring mee en wil de oplossing met me delen.

alvast bedankt,

Roel

Overigens het huidige resultaat is te zien via [http://www.ploink-produkties.nl/testWP]

(Bewerkt door Roel om 16:05, 17-03-2013)

Aanpassen thumbnailsize fancybox-for-wordpress
17 maart 2013 - 15:09    reactie #1
geplaatst door: Sypie
Ik denk dat je even lekker in de code of de instellingen van de plugin moet duiken, het zal écht aangepast kunnen worden. In de output zie ik in ieder geval dit voorbij komen:

<a href='http://www.ploink-produkties.nl/testWP/wp-content/uploads/2013/03/GoldenDelicious.jpg' title='GoldenDelicious'><img width="150" height="150" src="http://www.ploink-produkties.nl/testWP/wp-content/uploads/2013/03/GoldenDelicious-150x150.jpg" class="attachment-thumbnail" alt="GoldenDelicious" /></a>

De width en height geven de grootte aan, die dus instelbaar zou moeten zijn.
Aanpassen thumbnailsize fancybox-for-wordpress
17 maart 2013 - 16:03    reactie #2
geplaatst door: Shmoo

geblokkeerd

In je Dashboard (Admin) ga je links onderaan naar Settings en dan naar de item dat zegt Media.

Als het goed is zie je dan dit:

Vul een maat in voor je thumbnails en druk op Save.

Let wel op:
Dat deze instelling gaat pas van kracht gaat op alle afbeeldingen die je vanaf dat moment upload, dus reeds bestaande afbeeldingen worden niet ge-cropped naar dit formaat.


Je kunt dan twee dingen doen, of al deze bestaande afbeeldingen in de gallery met de hand gaan croppen via  de Media-uploader / image settings.

Dat ziet er zo uit.

Of gewoon deze huidige gallery helemaal verwijderen en dan opnieuw uploaden. Dit laatste gaat natuurlijk duizendmaal  sneller aangezien je gewoon alle afbeeldingen die je in een Gallery wilt hebben in 1 keer kunt uploaden via de Drag&Drop Media-uploader.

Als ik het goed begrijpt doet Fancybox for WordPress niets anders dan alleen het pop-up gebeuren verzorgen dus zal het alle standaard WordPress functies respecteren.
Als dat het geval is dan is er in WordPress nog een ingebouwd Gallery Shortcode (vanaf WP 3.5)
http://codex.wordpress.org/Gallery_Shortcode

Kijk eens naar de options / columns wat daar beschreven staat.

Dit zorgt bijv. voor 4 kolommen met afbeeldingen.


[gallery columns="4"]


En dit is natuurlijk sowieso een handig pagina om eens door te lezen zodat je een goede workflow krijgt..
http://codex.wordpress.org/Inserting_Images_into_Posts_and_Pages

Aanpassen thumbnailsize fancybox-for-wordpress
17 maart 2013 - 16:16    reactie #3
geplaatst door: Roel
Heel veel dank, hier kan ik een stuk verder mee
Aanpassen thumbnailsize fancybox-for-wordpress
17 maart 2013 - 23:38    reactie #4
geplaatst door: Roel
Hallo Shmoo en Sypie

Bedankt, jullie hebben me een heel eind op weg geholpen,

Was straal vergeten dat je de thumbnailsize aan kon passen onder mediasettings.

De css-code die veranderd moet worden staat in de de file: media.php en die staat in de map wp-includes:

dit is dus de inmiddels aangepaste code:


<style type='text/css'>
     #{$selector} {
       margin: auto;
     }
     #{$selector} .gallery-item {
       float: {$float};
       margin-top: 5px;
       text-align: center;
       width: {$itemwidth}%;
     }
     #{$selector} img {
       border: 4px solid #cfcfcf;
       padding: 6px;
       
     }
     #{$selector} .gallery-caption {
       margin-left: 0;
     }
   </style>


groet, Roel


(Bewerkt door Roel om 23:41, 17-03-2013)

(Bewerkt door Roel om 23:43, 17-03-2013)

Aanpassen thumbnailsize fancybox-for-wordpress
18 maart 2013 - 03:50    reactie #5
geplaatst door: Shmoo

geblokkeerd

Maar als je iets aan de layout wilt veranderen (opmaak) dan moet je dit doen in de stylesheet van het thema.

Root / wp-content / themes / jouw-thema-naam / style.css

Nooit in de wp-includes of wp-admin bestanden gaan werken en alle losse bestanden die  daar omheen staan dit zijn Core WordPress bestanden en die worden overschreven zodra WordPress een update krijgt dus dan gaan al je aanpassingen weer verloren.
Core WordPress bestanden zijn te herkennen aan dat ze met wp- beginnen en daar kun je dus beter niet aankomen - behalve wp-config.

Alles in de wp-content folder is jouw content of de content van een plugin developer en daar kun jij je aanpassingen doen.

Dus als je volledige controle wilt over bijv. de breedte van de gallery of de verdeling van de columns  op de pagina dan dan moet je deze aanpassingen toevoegen in je stylesheet.

Bijv. dit zou je kunnen toevoegen aan je style.css op regel. 414 waar al een klein beetje gallery CSS code staat.


.gallery {
 clear: both;
 overflow: hidden;
 margin: 0 auto;
}
.gallery .gallery-item {
 overflow: hidden;
 float: left;
 margin: 10px 0 0;
 text-align: center;
 list-style: none;
}
.gallery-caption {
 font-size: 11px;
}

/* verdelen van de breedte */
.gallery-columns-0 .gallery-item {
 width: 100%;
}
.gallery-columns-1 .gallery-item {
 width: 100%;
}
.gallery-columns-2 .gallery-item {
 width: 50%;
}
.gallery-columns-3 .gallery-item {
 width: 33.33%;
}
.gallery-columns-4 .gallery-item {
 width: 25%;
}
.gallery-columns-5 .gallery-item {
 width: 20%;
}

Zodra je dat hebt gedaan plaats je deze regel met code onderaan in je functions.php bestand, dit bestand is ook in je thema folder te vinden.


add_filter( 'use_default_gallery_style', '__return_false' );

Dit zorgt er voor dat WordPress niet de inline CSS uit de media.php (Core) in je pagina plaatst aangezien je deze niet gaat gebruiken maar eigen CSS stijlen hebt toegevoegd aan de stylesheet. Das veel netter werken.

Op die manier kun je veilig WordPress updaten in de toekomst zonder dat de layout en opmaak in gevaar komt.


Je moet wel niet vergeten dat je nu nog in Twenty Twelve werkt. Dit is nu nog WordPress's thema. Om dit je eigen thema te maken moet je hem even dupliceren en dan de kopie herbenoemen naar je bijv. je bedrijfsnaam en dit eigen thema dan in het Dashboard onder Appearance (weergave)  activeren.
Zodat je de volgende constructie hebt met verschillende thema's in de themes folder.
- twentyeleven
- twentytwelve
- jouw-thema-naam (geactiveerd)

Succes.