Les éléments d'image ne possèdent pas de width ni de height explicites

freds83 · July 21, 2024

Bonjour je rencontre un petit soucis pagespeed renseigne qu'il manque la largeur et une hauteur explicites sur les éléments d'image

je vous joint une capture , si on peut m'aiguiller ou et comment les ajouter

Merci aux courageux qui voudront bien répondre, passez une excellente soirée

Prestashop Addict · July 23, 2024

Cela dépend de votre thème, et merci d'indiquer votre version de PS et thème.

freds83 · July 23, 2024

Bonjour version 1.7.8.7 et le thème thecosmetic Version 2.0.7 conçu par ETS-Soft

Prestashop Addict · July 23, 2024

Alors il faut s'adresser à ETS-Soft qui n'a pas respecté les normes 😞 Vous comprendrez que la communauté n'est pas là pour supporter les parties non open sources.

Mediacom87 · July 23, 2024

Bonjour,

le problème vient de votre thème qui doit être mal codé.

Il faut reprendre le code natif du thème par défaut de PrestaShop pour intégrer l'information de dimension des images produits sur le listing produit.

Soit dans le fichier catalog/_partials/miniatures/product.tpl de votre thème.

Prenez le fichier du thème classic et reporté les éléments de dimension dans le fichier du thème utilisé.

freds83 · July 23, 2024

Bonjour Mediacom87 merci pour votre réponse, je ne trouve rien qui se rapporte au tailles même dans le template classic

Mediacom87 · July 23, 2024

Pourtant, le code existe :

        {block name='product_thumbnail'}
          {if $product.cover}
            <a href="{$product.url}" class="thumbnail product-thumbnail">
              <img
                src="{$product.cover.bySize.home_default.url}"
                alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
                loading="lazy"
                data-full-size-image-url="{$product.cover.large.url}"
                width="{$product.cover.bySize.home_default.width}"
                height="{$product.cover.bySize.home_default.height}"
              />
            </a>
          {else}
            <a href="{$product.url}" class="thumbnail product-thumbnail">
              <img
                src="{$urls.no_picture_image.bySize.home_default.url}"
                loading="lazy"
                width="{$urls.no_picture_image.bySize.home_default.width}"
                height="{$urls.no_picture_image.bySize.home_default.height}"
              />
            </a>
          {/if}
        {/block}

freds83 · July 23, 2024

avec mon thème actuel j'ai ce code

<article class="{if isset($check) && ($check eq true)}col-md-3 col-xs-12{/if} product-miniature js-product-miniature {if isset($tc_config.YBC_TC_FLOAT_CSS3) && $tc_config.YBC_TC_FLOAT_CSS3 == 1} wow zoomIn{/if}" data-id-product="{$product.id_product|escape:'html':'UTF-8'}" data-id-product-attribute="{$product.id_product_attribute|escape:'html':'UTF-8'}" {* itemscope itemtype="http://schema.org/Product"} *}>
  <div class="thumbnail-container">
    <div class="image_item_product">
        {block name='product_thumbnail'}
          <a href="{$product.url|escape:'html':'UTF-8'}" class="thumbnail product-thumbnail">
            <img src = "{$product.cover.bySize.home_default.url|escape:'html':'UTF-8'}" alt = "{$product.cover.legend|escape:'html':'UTF-8'}"
              data-full-size-image-url = "{$product.cover.large.url|escape:'html':'UTF-8'}" />
                     </a>
        {/block}
        {*block name='product_variants'}
            {if $product.main_variants}
              {include file='catalog/_partials/variant-links.tpl' variants=$product.main_variants}
            {/if}
        {/block*}
    </div>
    <div class="product-description">
      {block name='product_name'}
        <h3 class="h3 product-title" itemprop="name"><a href="{$product.url|escape:'html':'UTF-8'}">{$product.name|truncate:60:'...'|escape:'html':'UTF-8'}</a></h3>
      {/block}
      {if isset($product.description_short) && $product.description_short !=''}
        <div class="short_description">{$product.description_short|truncate:100:'...' nofilter}</div>
      {/if}
      
      <div class="hook-reviews">
	      {hook h='displayProductListReviews' product=$product}
	  </div>
      
      {block name='product_price_and_shipping'}
        {if $product.show_price}
          <div class="product-price-and-shipping">
            <span itemprop="price" content="price">{$product.price|escape:'html':'UTF-8'}</span>        
            {hook h='displayProductPriceBlock' product=$product type="before_price"}
            {if $product.has_discount}
              {hook h='displayProductPriceBlock' product=$product type="old_price"}

              <span class="regular-price">{$product.regular_price|escape:'html':'UTF-8'}</span>
              {*if $product.discount_type === 'percentage'}
                <span class="discount-percentage">{$product.discount_percentage|escape:'html':'UTF-8'}</span>
              {/if*}
            {/if}
            {hook h='displayProductPriceBlock' product=$product type='unit_price'}
            {hook h='displayProductPriceBlock' product=$product type='weight'}
          </div>
        {/if}
      {/block}
      
    </div>
    {block name='product_flags'}
      <ul class="product-flags">
        {foreach from=$product.flags item=flag}
            {if $flag.type != 'discount'}
              <li class="{$flag.type|escape:'html':'UTF-8'}">
                {$flag.label|escape:'html':'UTF-8'}
              </li>
            {/if}
        {/foreach}
        {if $product.show_price}
            {if $product.has_discount}
              {if $product.discount_type === 'percentage'}
                <li class="product-discount">
                    <span class="discount-percen">{$product.discount_percentage|escape:'html':'UTF-8'}</span>
                </li>
              {/if}
            {/if}
        {/if}
      </ul>
    {/block}
     <div class="image_item_product img_no_image">
         <div class="highlighted-informations{*if !$product.main_variants} no-variants{/if*} nhq">
             <div class="add_to_cart_button atc_div">
                  {*<form action="{if isset($urls)}{$urls.pages.cart|escape:'html':'UTF-8'}{/if}" method="post">
                        <input type="hidden" name="token" value="{$static_token|escape:'html':'UTF-8'}" />
                        <input type="hidden" value="{$product.id_product|escape:'html':'UTF-8'}" name="id_product" />
                        <input type="hidden" class="input-group form-control" name="qty" value="1">
                        <button data-button-action="add-to-cart" class="btn btn-primary" {if $product.quantity <= 0}disabled="disabled"{/if}>
                            <i class="fa fa-shopping-cart"></i>{l s='Add to cart' d='Shop.Theme.Actions'}
                        </button>
                 </form>*}
                   
             </div>

                
              </a>
        </div>
     </div>
  </div>
</article>

avec le thème classic j'ai pas comme vous

{block name='product_miniature_item'}
    <article class="product-miniature js-product-miniature mb-3" data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}">
        <div class="card card-product">

            <div class="card-img-top product__card-img">
                {block name='product_thumbnail'}
                    <a href="{$product.url}" class="thumbnail product-thumbnail rc ratio1_1">
                        {if $product.cover}
                            <img
                                    data-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}"
                                    class="lazyload"
                            >
                        {elseif isset($urls.no_picture_image)}
                            <img class="lazyload" src="{$urls.no_picture_image.bySize.home_default.url}">
                        {else}
                            <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==">
                        {/if}
                    </a>
                {/block}
                <div class="highlighted-informations text-center p-2{if !$product.main_variants} no-variants{/if} visible--desktop">
                    {block name='quick_view'}
                        <span class="quick-view" data-link-action="quickview">
                      <i class="material-icons search">&#xE8B6;</i> {l s='Quick view' d='Shop.Theme.Actions'}
                  </span>
                    {/block}

                    {block name='product_variants'}
                        {if $product.main_variants}
                            {include file='catalog/_partials/variant-links.tpl' variants=$product.main_variants}
                        {/if}
                    {/block}
                </div>
            </div>
            {* end card-img-top*}

            <div class="card-body">
                <div class="product-description product__card-desc">
                    {block name='product_name'}
                        {if in_array($page.page_name, ['best-sales','category','manufacturer','new-products','prices-drop','product-list','search','supplier'])}
                        <h2 class="h3 product-title"><a href="{$product.url}">{$product.name|truncate:30:'...'}</a></h2>
                        {else}
                            <p class="h3 product-title"><a href="{$product.url}">{$product.name|truncate:30:'...'}</a></p>
                        {/if}
                    {/block}
                    {block name='product_reviews'}
                        {hook h='displayProductListReviews' product=$product}
                    {/block}
                    {block name='product_price_and_shipping'}
                        {if $product.show_price}
                            <div class="product-price-and-shipping text-center">
                                {if $product.has_discount}
                                    {hook h='displayProductPriceBlock' product=$product type="old_price"}

                                    <span class="sr-only">{l s='Regular price' d='Shop.Theme.Catalog'}</span>
                                    <span class="regular-price">{$product.regular_price}</span>

                                {/if}

                                {hook h='displayProductPriceBlock' product=$product type="before_price"}

                                <span class="sr-only">{l s='Price' d='Shop.Theme.Catalog'}</span>
                                <span class="price{if $product.has_discount} current-price-discount{/if}">{$product.price}</span>


                                {hook h='displayProductPriceBlock' product=$product type='unit_price'}

                                {hook h='displayProductPriceBlock' product=$product type='weight'}
                            </div>
                        {/if}
                    {/block}


                </div>

            </div>
            {* end card body*}
            {block name='product_flags'}
                <ul class="product-flags">
                    {foreach from=$product.flags item=flag}
                        <li class="product-flag {$flag.type}">{$flag.label}</li>
                    {/foreach}
                    {if $product.has_discount}
                        {if $product.discount_type === 'percentage'}
                            <li class="product-flag discount-percentage discount-product">{$product.discount_percentage}</li>
                        {elseif $product.discount_type === 'amount'}
                            <li class="product-flag discount-amount discount-product">{$product.discount_amount_to_display}</li>
                        {/if}
                    {/if}
                </ul>
            {/block}
        </div>
        {* end card product*}



    </article>
{/block}

Mediacom87 · July 23, 2024

J'avais pris le thème de la 1.7.8.11, mais en regardant sur la 1.7.8.7 j'ai ceci :

{block name='product_miniature_item'}
<div class="js-product product{if !empty($productClasses)} {$productClasses}{/if}">
  <article class="product-miniature js-product-miniature" data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}">
    <div class="thumbnail-container">
      <div class="thumbnail-top">
        {block name='product_thumbnail'}
          {if $product.cover}
            <a href="{$product.url}" class="thumbnail product-thumbnail">
              <img
                src="{$product.cover.bySize.home_default.url}"
                alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
                loading="lazy"
                data-full-size-image-url="{$product.cover.large.url}"
                width="{$product.cover.bySize.home_default.width}"
                height="{$product.cover.bySize.home_default.height}"
              />
            </a>
          {else}
            <a href="{$product.url}" class="thumbnail product-thumbnail">
              <img
                src="{$urls.no_picture_image.bySize.home_default.url}"
                loading="lazy"
                width="{$urls.no_picture_image.bySize.home_default.width}"
                height="{$urls.no_picture_image.bySize.home_default.height}"
              />
            </a>
          {/if}
        {/block}

Je pense donc que vous n'avez pas mis à jour le thème par défaut lors de votre ou vos mises à jour.

À vous d'adapter votre thème pour corriger le souci.

freds83 · July 24, 2024

J'abandonne j'ai soit une page blanche soit du code qui apparait sur les pages produits trop complexe pour moi ca restera comme ca.

Prestashop Addict · July 24, 2024

Il y a 2 heures, freds83 a dit :

J'abandonne j'ai soit une page blanche soit du code qui apparait sur les pages produits trop complexe pour moi ca restera comme ca.

Vous pouvez aussi faire appel à des professionnels "experts" de Prestashop, qui vous le feront rapidement donc pour pas cher (et en moins de temps que vous y avez consacré ici 😉 ) On croit parfois économiser de l'argent mais on ne compte pas le temps que l'on perd... Et le temps c'est de l'argent comme le dit l'adage 🙂

Mediacom87 · July 24, 2024

il y a 2 minutes, Prestashop Addict a dit :

Vous pouvez aussi faire appel à des professionnels "experts" de Prestashop, qui vous le feront rapidement donc pour pas cher (et en moins de temps que vous y avez consacré ici 😉 ) On croit parfois économiser de l'argent mais on ne compte pas le temps que l'on perd... Et le temps c'est de l'argent comme le dit l'adage 🙂

Tout à fait, comme le créateur du thème peut aussi faire son boulot gratuitement puisque le souci vient de son travail mal fait.

freds83 · July 24, 2024

il m'a un peu envoyé chié le créateur, oui je vais faire appel a quelqu'un merci pour vos réponses

Mediacom87 · July 24, 2024

il y a 20 minutes, freds83 a dit :

il m'a un peu envoyé chié le créateur, oui je vais faire appel a quelqu'un merci pour vos réponses

On se demande comment ils font pour encore exister, incompréhensible.

Les éléments d'image ne possèdent pas de width ni de height explicites

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in