Jump to content

Edit History

Gian Luca

Gian Luca

On 9/23/2020 at 11:23 AM, TomSoiree said:

 

Correct me if I'm wrong but all this can be achieved by this short code in catalog/_partials/miniatures/product.tpl 

{if isset($product.images[1])}
  <img
    src="{$product.images[1].bySize.home_default.url}"
    alt="{if !empty($product.images[1].legend)}{$product.images[1].legend}{else}{$product.name|truncate:30:'...'}{/if}"
    data-full-size-image-url="{$product.images[1].large.url}"
    class="image2"
   />
{/if}

CSS: 

#products .products .thumbnail-container .product-thumbnail .image2{opacity:0;transition:all .5s cubic-bezier(.07,.74,.56,.89)}
  #products .products .thumbnail-container:hover .product-thumbnail .image2{opacity:1}

 

Very helpful your suggestion, this is my code... if some need it 😉

<style>
img.dw-img-hover {  position: absolute;  left: 0; top: 0;  opacity: 0;  transition: all .5s cubic-bezier(.07,.74,.56,.89); }
img.dw-img-hover:hover {    opacity: 1;}
</style>

  

		{if $product.cover}
			<a class="thumbnail product-thumbnail" href="{$product.canonical_url}">
				<img src="{$product.cover.bySize.home_default.url}" alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}" data-full-size-image-url="{$product.cover.large.url}" />
				{if  count($product.images) > 1 && isset($product.images[1])}
				  <img
					src="{$product.images[1].bySize.home_default.url}"
					alt="{if !empty($product.images[1].legend)}{$product.images[1].legend}{else}{$product.name|truncate:30:'...'}{/if}"
					data-full-size-image-url="{$product.images[1].large.url}"
					 class="dw-img-hover"
				   />		
				{/if}
			</a>		
		{else}
			<a class="thumbnail product-thumbnail" href="{$product.canonical_url}">
				<img src="{$urls.no_picture_image.bySize.home_default.url}" />
			</a>
		{/if}

 

 

Gian Luca

Gian Luca

On 9/23/2020 at 11:23 AM, TomSoiree said:

 

Correct me if I'm wrong but all this can be achieved by this short code in catalog/_partials/miniatures/product.tpl 

{if isset($product.images[1])}
  <img
    src="{$product.images[1].bySize.home_default.url}"
    alt="{if !empty($product.images[1].legend)}{$product.images[1].legend}{else}{$product.name|truncate:30:'...'}{/if}"
    data-full-size-image-url="{$product.images[1].large.url}"
    class="image2"
   />
{/if}

CSS: 

#products .products .thumbnail-container .product-thumbnail .image2{opacity:0;transition:all .5s cubic-bezier(.07,.74,.56,.89)}
  #products .products .thumbnail-container:hover .product-thumbnail .image2{opacity:1}

 

Very helpful you suggestion, thi is my code... if some  need it 😉

<style>
img.dw-img-hover {  position: absolute;  left: 0; top: 0;  opacity: 0;  transition: all .5s cubic-bezier(.07,.74,.56,.89); }
img.dw-img-hover:hover {    opacity: 1;}
</style>

  

		{if $product.cover}
			<a class="thumbnail product-thumbnail" href="{$product.canonical_url}">
				<img src="{$product.cover.bySize.home_default.url}" alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}" data-full-size-image-url="{$product.cover.large.url}" />
				{if  count($product.images) > 1 && isset($product.images[1])}
				  <img
					src="{$product.images[1].bySize.home_default.url}"
					alt="{if !empty($product.images[1].legend)}{$product.images[1].legend}{else}{$product.name|truncate:30:'...'}{/if}"
					data-full-size-image-url="{$product.images[1].large.url}"
					 class="dw-img-hover"
				   />		
				{/if}
			</a>		
		{else}
			<a class="thumbnail product-thumbnail" href="{$product.canonical_url}">
				<img src="{$urls.no_picture_image.bySize.home_default.url}" />
			</a>
		{/if}

 

 

Gian Luca

Gian Luca

On 9/23/2020 at 11:23 AM, TomSoiree said:

 

Correct me if I'm wrong but all this can be achieved by this short code in catalog/_partials/miniatures/product.tpl 

{if isset($product.images[1])}
  <img
    src="{$product.images[1].bySize.home_default.url}"
    alt="{if !empty($product.images[1].legend)}{$product.images[1].legend}{else}{$product.name|truncate:30:'...'}{/if}"
    data-full-size-image-url="{$product.images[1].large.url}"
    class="image2"
   />
{/if}

CSS: 

#products .products .thumbnail-container .product-thumbnail .image2{opacity:0;transition:all .5s cubic-bezier(.07,.74,.56,.89)}
  #products .products .thumbnail-container:hover .product-thumbnail .image2{opacity:1}

 

Very helpful you suggestion, thi is my code... if some  need it 😉

<style>

img.dw-img-hover {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: all .5s cubic-bezier(.07,.74,.56,.89);
}

img.dw-img-hover:hover {
    opacity: 1;
}</style> 

		{if $product.cover}
			<a class="thumbnail product-thumbnail" href="{$product.canonical_url}">
				<img src="{$product.cover.bySize.home_default.url}" alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}" data-full-size-image-url="{$product.cover.large.url}" />
				{if  count($product.images) > 1 && isset($product.images[1])}
				  <img
					src="{$product.images[1].bySize.home_default.url}"
					alt="{if !empty($product.images[1].legend)}{$product.images[1].legend}{else}{$product.name|truncate:30:'...'}{/if}"
					data-full-size-image-url="{$product.images[1].large.url}"
					 class="dw-img-hover"
				   />		
				{/if}
			</a>		
		{else}
			<a class="thumbnail product-thumbnail" href="{$product.canonical_url}">
				<img src="{$urls.no_picture_image.bySize.home_default.url}" />
			</a>
		{/if}

 

 

Gian Luca

Gian Luca

On 9/23/2020 at 11:23 AM, TomSoiree said:

 

Correct me if I'm wrong but all this can be achieved by this short code in catalog/_partials/miniatures/product.tpl 

{if isset($product.images[1])}
  <img
    src="{$product.images[1].bySize.home_default.url}"
    alt="{if !empty($product.images[1].legend)}{$product.images[1].legend}{else}{$product.name|truncate:30:'...'}{/if}"
    data-full-size-image-url="{$product.images[1].large.url}"
    class="image2"
   />
{/if}

CSS: 

#products .products .thumbnail-container .product-thumbnail .image2{opacity:0;transition:all .5s cubic-bezier(.07,.74,.56,.89)}
  #products .products .thumbnail-container:hover .product-thumbnail .image2{opacity:1}

 

Very helpful you suggestion, thi is my code... if some  need it 😉

  

		{if $product.cover}
			<a class="thumbnail product-thumbnail" href="{$product.canonical_url}">
				<img src="{$product.cover.bySize.home_default.url}" alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}" data-full-size-image-url="{$product.cover.large.url}" />
				{if  count($product.images) > 1 && isset($product.images[1])}
				  <img
					src="{$product.images[1].bySize.home_default.url}"
					alt="{if !empty($product.images[1].legend)}{$product.images[1].legend}{else}{$product.name|truncate:30:'...'}{/if}"
					data-full-size-image-url="{$product.images[1].large.url}"
					 class="dw-img-hover"
				   />		
				{/if}
			</a>		
		{else}
			<a class="thumbnail product-thumbnail" href="{$product.canonical_url}">
				<img src="{$urls.no_picture_image.bySize.home_default.url}" />
			</a>
		{/if}

 

 

Gian Luca

Gian Luca

On 9/23/2020 at 11:23 AM, TomSoiree said:

 

Correct me if I'm wrong but all this can be achieved by this short code in catalog/_partials/miniatures/product.tpl 

{if isset($product.images[1])}
  <img
    src="{$product.images[1].bySize.home_default.url}"
    alt="{if !empty($product.images[1].legend)}{$product.images[1].legend}{else}{$product.name|truncate:30:'...'}{/if}"
    data-full-size-image-url="{$product.images[1].large.url}"
    class="image2"
   />
{/if}

CSS: 

#products .products .thumbnail-container .product-thumbnail .image2{opacity:0;transition:all .5s cubic-bezier(.07,.74,.56,.89)}
  #products .products .thumbnail-container:hover .product-thumbnail .image2{opacity:1}

 

Very helpful you suggestion, thi is my code... if some  need it 😉

  

		{if $product.cover}
			{assign var='coverImage' value=Product::getCover($product->id)}
			{assign var='coverImageId' value="{$product->id}-{$coverImage.id_image}"}
			<a class="thumbnail product-thumbnail" href="{$product.canonical_url}">
				<img src="{$product.cover.bySize.home_default.url}" alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}" data-full-size-image-url="{$product.cover.large.url}" />
				{if  count($product.images) > 1 && isset($product.images[1])}
				  <img
					src="{$product.images[1].bySize.home_default.url}"
					alt="{if !empty($product.images[1].legend)}{$product.images[1].legend}{else}{$product.name|truncate:30:'...'}{/if}"
					data-full-size-image-url="{$product.images[1].large.url}"
					 class="dw-img-hover"
				   />		
				{/if}
			</a>		
		{else}
			<a class="thumbnail product-thumbnail" href="{$product.canonical_url}">
				<img src="{$urls.no_picture_image.bySize.home_default.url}" />
			</a>
		{/if}

 

 

×
×
  • Create New...