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.

Help, de ankerplaats verdwijnt onder de header!

Als je website een sticky header heeft (dat is een header, meestal met het hoofdmenu daarin, die altijd in beeld blijft bovenaan het venster van de browser) dan kan het zijn dat, wanneer je links binnen de pagina maakt met anchors, de ankerplaats  …
Lees meer over: Help, de ankerplaats verdwijnt onder de header!

Gravity Forms – Datum inzending in notificatie

Op een website die ik heb gemaakt staan vele inschrijfformulieren waarmee standhouders zich kunnen opgeven voor een evenement. Deze formulieren zijn gemaakt met Gravity Forms, waar een betaalmodule aanhangt. Afhankelijk van de betalingsvorm krijgt de  …
Lees meer over: Gravity Forms – Datum inzending in notificatie

Lege p automatisch verwijderen

Klanten opvoeden blijft lastig. :-) Dus maak ik het ze liever gemakkelijk met wat code-snippers, zodat de meest voorkomende "fouten" vanzelf worden rechtgetrokken. Dit keer de lege p-tag die vaak aan het einde van een bericht onnodige witregels  …
Lees meer over: Lege p automatisch verwijderen

Responsive SVG image map

Vroeger gebruikte ik vaak clickable maps als navigatie, bijvoorbeeld een kaartje van Nederland waar elke provincie een link is naar een aparte pagina. "Ouderwetse" image maps (bitmap plaatjes met klikbare hotspots in html) hebben als  …
Lees meer over: Responsive SVG image map

Profiel-foto aanpassen door ingelogde gebruiker

Voor een leden-site wil ik dat bezoekers hun eigen foto kunnen toevoegen aan het profiel, zodat er een leuk smoelenboek ontstaat. Ik maak hierbij gebruik van 3 plugins. Types van Toolset  Views ook van Toolset Gravity forms met de add-on user  …
Lees meer over: Profiel-foto aanpassen door ingelogde gebruiker

if/else statement in een toolset View

Voor een website ben ik een blogpagina aan het maken met Toolset. De overzichtspagina van het blog bestaat uit allemaal foto's. Hiervoor gebruik ik de uitgelichte afbeelding. De single berichtpagina begint met een grote foto. Dit zal in de meeste  …
Lees meer over: if/else statement in een toolset View

Hamburgermenu met MENU in 10 minuten – een update!

Winy schreef een fijne handleiding voor het maken van een hamburgermenu in 5 minuten. Werkt perfect. Maar bij uittesten blijkt dat niet iedereen het hamburgericoon voor een menu aanziet. Ik zocht naar de mogelijkheid om er het woord "Menu" naast te  …
Lees meer over: Hamburgermenu met MENU in 10 minuten – een update!

Javacript in pagina? Text-widget!

Ik moest een stukje Javascript toevoegen aan een pagina voor een reserveringsmodule. Het moest in de <body> komen. En hij kon niet in de Genesis Theme instellingen want het moest per taal een ander script zijn. Ik plakte het in een  …
Lees meer over: Javacript in pagina? Text-widget!

Testomgeving maken van website

We hebben er allemaal mee te maken. WordPress en updates. Updates van de core bestanden, van je theme, van je child-theme, van de plugins. Ik werk met het framework Genesis en veel met premium plugins zoals Gravity Forms, Toolset, WPML. Maar  …
Lees meer over: Testomgeving maken van website