Dit is de eerste Bricks Builder tutorial, mijn favoriete WordPress website/page builder! Bricks is enorm veelzijdig en heeft talrijke mogelijkheden voor dynamic data maar ook het integreren van zelf geschreven PHP functies. En daar zal deze tutorial dan ook met name over gaan.
Het effect dat ik wil bereiken zie je hieronder:
Standaard wordt de productafbeelding getoond maar bij een mouseover zie je de eerste afbeelding van de gekoppelde productgalerij foto’s (als die er zijn). En dat dus zonder een plugin te gebruiken, we hebben maar een klein beetje code nodig!
Stap 1: de code die de tweede afbeelding genereert
Hiervoor schrijven we een simpele PHP functie.
function get_first_gallery_image_url($product_id = null) {
// Als er geen product ID is meegegeven, probeer het huidige product te gebruiken
if (!$product_id) {
$product_id = get_the_ID();
}
// Haal het product object op
$product = wc_get_product($product_id);
if (!$product) {
return false;
}
// Haal de gallery attachment IDs op
$gallery_image_ids = $product->get_gallery_image_ids();
// Check of er gallery afbeeldingen zijn
if (!empty($gallery_image_ids)) {
// Haal de URL van de eerste gallery afbeelding op
$first_gallery_image_url = wp_get_attachment_image_url($gallery_image_ids[0], 'full');
return $first_gallery_image_url;
}
// Als er geen gallery afbeeldingen zijn, gebruik de featured image
$featured_image_id = get_post_thumbnail_id($product_id);
if ($featured_image_id) {
return wp_get_attachment_image_url($featured_image_id, 'full');
}
// Als er helemaal geen afbeeldingen zijn, return false
return false;
}Bovenstaand script kijkt of het product gallery afbeeldingen heeft en zo ja wordt de eerste teruggegeven. Als er geen galerij afbeeldingen zijn wordt de featured image terug gegeven.
Stap 2: de integratie in Bricks Builder
Plaats een div en zet in deze div de productafbeelding (featured image):
Stel vervolgens de achtergrond van de div in en zorg dat deze dynamisch wordt opgehaald door ons script op te roepen:
We roepen dus onze eerder geschreven PHP functie op deze manier aan:
Plaats als laatste in het CSS blok van de afbeelding deze code:
%root%:hover { opacity: 0.0;
-webkit-transition:opacity 500ms ease-out;
-moz-transition:opacity 500ms ease-out;
-o-transition:opacity 500ms ease-out;}
%root% { opacity: 1;
-webkit-transition:opacity 400ms ease-out;
-moz-transition:opacity 400ms ease-out;
-o-transition:opacity 400ms ease-out;}Deze zorgt ervoor dat de featured image transparant wordt bij een mouseover. En dan zie je dus de achtergrond van de div (lees: de tweede afbeelding)!
