Dynamické náhledové obrázky (výměna obrázku při hover)

1. Kód do child theme

Do child theme přidejte funkci, která vrací 1. obrázek z galerie, pokud tam nějaký je. Pokud není, vrátí ten náhledový (aby tam nebylo prázdné místo). Nezapomeňte to také v Bricks registrovat (to je ta 2. funkce).

/**
 * produkt gallery - image change on hover 
 */
function get_first_image_from_product_gallery() {	
    $image_id = wc_get_product()->get_gallery_image_ids()[0] ; 
		
    if ( $image_id ) {
		return $image_id;
		
    } else {  
        return wc_get_product()->get_image_id();
    }		
}

add_filter( 'bricks/code/echo_function_names', function() {
  return [
     'get_first_image_from_product_gallery',
  ];
} );

2. Vytvořte si v Bricks loop, kde budou dva obrázky v bloku

Kód funguje pro custom strukturu, tj. pokud si v loopu vypíšete produkty a skládáte si strukturu, jak je libo (nikolik klasický blok pro výpis produktů).

• Container – drží strukturu produktů – tím je můžete vypsat třeba do 4 sloupců.
  • Block – s loopem, který iteruje přes produkty
    • Block (označený žlutou) – je obalovací element pro obrázky
      • Image
      • Image – hover
    • Block – pro vlastní obsah (nadpis, popisek, cenu, tlačítko, cokoli…)
      • zbytek struktury (pro tento příklad nepodstatný)

3. CSS, která je třeba nastavit

%root% img{
  transition: all 300ms linear;
}

%root% img:nth-child(1){
  opacity: 1;
}

%root% img:nth-child(2){
  opacity: 0;
}

%root%:hover img:nth-child(1){
  opacity: 0;
}

%root%:hover img:nth-child(2){
  opacity: 1;
}

Princip efektu

1. Díky absolutnímu pozicování a aspect-ratio budou obrázky za sebou a budou stejné velké. Z-index pak určí, že ten správný bude opravdu nahoře.
2. Cílový efekt prolnutí udělá opacity, které se na hover změní. Díky tomu se obrázky plynule vymění.