Een slider maken met foto-uitsnede

Vandaag voor energia.org (de nieuwe website is nog niet online op dit moment) een slider op de home-page gemaakt. Dat kan gemakkelijk met een plugin zoals Genesis Responsive Slider. Dat werkt prima. Maar vaak is de foto voor een slider nogal smal liggend. En neemt de plugin gewoon het bovenste of middelste stuk uit de foto.

Ik wil dat mijn klant gemakkelijk zelf de uitsnede kan bepalen.

Dat kun je maken met behulp van 3 plugins:

Hieronder een stappenplan:

  • Maak eerst in de functions.php de gewenste maat voor de slider.

[code]add_image_size( ‘slider_home’, 1200, 400, true ); // 1200 pixels wide by 400 pixels tall, hard crop mode[/code]

  • Maak vervolgens met ACF een nieuw veld aan. Kies bij Field type: Image with user-crop. Kies bij Target Size de thumbnail-size zoals je bij add_image_size had gemaakt. Zie voor verdere opties die ik gebruikte dit screenshot.

Schermafbeelding 2016-02-03 om 22.31.25

  • Je hebt nu onder je bericht een extra vak waarin de gebruiker een foto kan plaatsen en meteen ook gedwongen wordt om een uitsnede te maken. Die uitsnede wordt dan gebruikt voor de slider.

Schermafbeelding 2016-02-03 om 22.53.15

  • Nu ga je in Views een nieuwe view maken. Kies voor slider. Je wordt door de settings heen geloodst. Belangrijkste is de Loop Output. Ik heb dit:

[code][wpv-layout-start]
[wpv-items-found]
<!– wpv-loop-start –>
<div id=”slider”>
<wpv-loop>
<div class=”slider_content”><div class=”waasje”><h2>[wpv-post-link]</h2></div>
<a href=”[wpv-post-url]” class=”button”>Read more ></a></div>
<div class=”slider_image”>[wpv-post-featured-image size=”slider_home”]</div>
</wpv-loop>
</div>
<!– wpv-loop-end –>
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context=”wpv-views”][/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end][/code]

  • Nu moet de slider nog ergens op je site komen. Dat kan op meerdere manieren. Ik gebruik een widget op de homepagina en daar zet ik met de widget WP Views de slider in.

Schermafbeelding 2016-02-03 om 22.41.07

  • Dan staat het allemaal op zijn plek, maar nog boven elkaar in plaats van over elkaar heen. Daartoe heb ik de volgende CSS gebruikt om er een “echte” slider look aan te geven:

[code]

#slider {
position: relative;
}
.slider_content {
display: block;
margin: 0;
padding: 0 20px;
position: absolute;
z-index: 8;
top: 40%;
width: 40%;
}
.slider_image {
height: 100%;
}

.slider_content .waasje {
background: #000;
filter: alpha(opacity=80);
opacity: 0.8;
padding: 10px;
margin-bottom: 10px;
}
.slider_content h2 {
margin-bottom: 0;
}
.slider_content h2 a {
color: #fff;
}
.slider_content h2 a:hover {
color: #F9CA18;
}
.slider_content .button {
text-align: right;
}
.home ul.wpv_pagination_dots {
margin: 0;
list-style: none outside none;
position: absolute;
bottom: 20px;
left: 50%;
z-index: 1;
}[/code]

En dan is dit het resultaat:

Schermafbeelding 2016-02-03 om 23.13.35

Succes!

 

Update: Het is me toch (helaas) nog niet gelukt om deze uitgesneden foto automatisch ook als featured image te laten gelden. Ik heb dus een uitleg erbij gezet: Gebruik dit om de uitsnede van de foto te bepalen. Kies vervolgens bij “featured Image” de nieuwe uitgesneden foto. En daaronder staat dan direct de featured image box. Als iemand een idee heeft hoe dit wel direct kan, graag. Ik het voor mijn klanten graag zo simpel mogelijk.

Wil je reageren?

Graag!
Je kunt hier een berichtje achterlaten. Het is noodzakelijk daarvoor je naam en emailadres in te vullen. Het emailadres zal nooit openbaar worden gemaakt.
Na goedkeuring door WP-bieb zal je bericht op de website verschijnen.

*