Native Gallery Responsive maken

  • Opgelost Wouter Vellekoop

    (@dowodesign)


    10 jaren, 5 maanden geleden

    Beste Forumleden,

    Ik probeer de native gallery van wordpress resposonsive te maken en dan vooral de kolommen, maar ik kom hier niet uit. Ik heb ook het gevoel dat dit niet alleen met css gaat lukken.

    Ik zou graag, op bijvoorbeeld mobiel maar 1 kolom hebben en op ipad 2 kolommen en op grotere schermen 3 kolommen met foto’s.

    Ik heb wat plugins gevonden, maar ik probeer de aantal plugins klein te houden en daarbij doen ze niet helemaal wat ik wil.

    Om een één of andere reden krijg ik dit niet voor elkaar met alleen css. Hebben jullie hier een oplossing voor, of kan iemand mij in de juiste richting wijzen?

    Alvast bedankt!

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • Mathieu Scholtes

    (@ontwerpexpert)

    10 jaren, 5 maanden geleden

    Met de element inspector van Chrome kun je kijken welke div’s er al zijn en of je die kunt herschikken. Als je gebruik maakt van media queries en je de gebruikte css van de plugin overschrijft met een !important statement in css kom je al heel ver.

    Thread starter Wouter Vellekoop

    (@dowodesign)

    10 jaren, 5 maanden geleden

    Thanks Mathieu,

    Helaas is het zo simpel niet, ik heb al meerder websites ontworpen in wordpress voor verschillende klanten van mij en opzich genoeg ervaring in CSS, dat had ik misschien aan moeten geven.

    De kolommen worden uiteindelijk aangegeven in het wordpress artikel waarin de gallery geplaatst wordt, die staat bij mij standaard op 3, in principe zou deze kolom structuur dynamisch moeten mee veranderen met de resolutie. Ik ben bang dat dit in js geprogrammeerd staat en daar heb ik bijna geen ervaring mee..

    Thread starter Wouter Vellekoop

    (@dowodesign)

    10 jaren, 4 maanden geleden

    Hallo Iedereen,

    Ik heb lang gezocht op internet en kon geen antwoord op de vraag vinden vandaar dat ik de vraag gesteld heb in dit forum.

    Na nog wat andere keywords geprobeerd te hebben kwam ik uit op dit artikel ; http://nickpassaro.com/how-to-make-a-responsive-image-gallery-in-wordpress/

    Hier staat in details omschreven hoe je de native WordPress gallery responsive kunt maken. Hoop dat jullie er iets aan hebben!

    Uitgaande van vier rijen moet dit de oplossing zijn;

    Desktop:

    .gallery-item {
float: left;
width: 21%;
margin: 30px 2%;
background-color: #FFFFFF;
}

.gallery-item img {
width: 90%;
height: auto;
margin: 5%;
}

    Tablet:

    .gallery-item {
float: left;
width: 46%;
margin: 30px 2%;
background-color: #FFFFFF;
}

.gallery-item img {
width: 90%;
height: auto;
margin: 5%;
}

    Mobile:

    .gallery-item {
float: left;
width: 96%;
margin: 30px 2%;
background-color: #FFFFFF;
}

.gallery-item img {
width: 90%;
height: auto;
margin: 5%;
}

    Er moet nog veel meer veranderd worden, waaronder dingen in de functions.php maar kijk eens in dat artikel. Bij mij werkt het 100%.

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • Het onderwerp ‘Native Gallery Responsive maken’ is gesloten voor nieuwe reacties.