/
Plattformen
/
För utvecklare
/
Dokumentation
/
Bildscript responsiva bilder
/

Bildscript med responsiva bilder

Snabba upp butikens bildvisning och förbättra score i Google Page Speed insight

Aktivera detta i config/config.html

use_responsive_images true för att aktivera.

use_responsive_images_interval true för att begränsa vilka storlekar servern kommer att skapa för att rendera till användaren. Om false så kommer servern skapa bilder som passar användaren perfekt. (Fler bilder kommer att skapas på servern, helt beroende på användares upplösningar).

responsive_images_interval_px_width Antal pixlar i vilktet interval serven kommer att skapa bilder från orginalet. Om use_responsive_images_interval är satt till true.

use_lazyload_on_product_list_images true för att använda lazyload på bilder i produktlistning. Bilder laddas in när användaren scrollar.

lazyload_product_list_images_px_before_viewport Antal pixlar utanför viewport som lazyload kommer att ladda in bilder när användaren scrollar. Används för att användaren inte ska behöva se att vi laddar in bilder me lazyload. Om de inte scrollar jätte snabbt :)

"use_responsive_images": true,
"use_responsive_images_interval": false,
"responsive_images_interval_px_width": "160",
"use_lazyload_on_product_list_images": true,
"lazyload_product_list_images_px_before_viewport": "400"

Lägg in macro i helpers/html.html

Detta macro måste anropas för de bilder som ska vara responsiva och eventuellt användas för lazyload.

{% macro image_responsive_listing(image, text, config, attrs) %}
  {% import _self as html %}
  {% if image %}
    <div data-responsive-image class="responsive-image loading{% if attrs.class %} {{ attrs.class }}{% endif %}{% if attrs.use_padding_bottom_trick %} padding-bottom-trick" style="padding-bottom:{{ image|thumbnail.height / image|thumbnail.width * 100 }}%;{% endif %}">
      <div class="svg-icon camera">{% include 'scss/icons/camera.svg' %}</div>
      <img
        src="{{ image|thumbnail(image|thumbnail.width,image|thumbnail.height).src }}"
        srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        data-width="{{ image|thumbnail.width }}"
        data-height="{{ image|thumbnail.height }}"
        alt="{{ text }}"
        title="{{ text }}"
      >
    </div>
  {% endif %}
{% endmacro %}

Anropa html macro image_responsive_images

Detta behöver läggas in för alla produktlistningar som används.

Exempelvis i:

helpers/product_listing/grid/product_listing_simple.html

helpers/product_listing/grid/product_listing_image_only.html

helpers/product_listing/grid/product_listing_extended.html

helpers/product_listing/row/product_listing_standard.html

helpers/product_listing/product_listing_checkout.html

{% if data.image %}
  {% if config.general.use_responsive_images %}
    {# if you set use_padding_bottom_trick to true, you need to check the parent's css ":before" element #}
    {{ html.image_responsive_listing(data.image, data.name, config, {'class' : 'first-image', use_padding_bottom_trick : false }) }}
  {% else %}
    {{ html.image(414, 0, data.image , data.name, {'class' : 'first-image'}) }}
  {% endif %}

  {% if data.images[0].image and config.product_listing.product_listing_show_second_image_hover  %}
    {% if config.general.use_responsive_images %}
      {{ html.image_responsive_listing(data.images[0].image, data.name, config, {'class' : 'second-image', use_padding_bottom_trick : false }) }}
    {% else %}
      {{ html.image(414, 0, data.images[0].image , data.name, {'class' : 'second-image'}) }}
    {% endif %}
  {% endif %}
{% else %}
  <div class="svg-icon camera">{% include 'scss/icons/camera.svg' %}</div>
{% endif %}

Detta ska in i general.js

General.responsiveImages(); ska läggast till i smartScroll funktionen i general.js.

Sedan ska hela responsiveImages funktionen in i general.js också.

function smartScroll() {
  General.responsiveImages();
}

responsiveImages: function() {
  // Reseponsive images
  $('[data-responsive-image].loading').each(function(){
    var runSrcset = false;
    // Lazyload check
    if (!window.vendre_config.general.use_lazyload_on_product_list_images) {
      runSrcset = true;
    } else {
      var viewPortEnd = $(window).scrollTop() + window.innerHeight;
      if (viewPortEnd > $(this).offset().top - window.vendre_config.general.lazyload_product_list_images_px_before_viewport) {
        runSrcset = true;
      }
    }
    
    if (runSrcset) {
      var img = $(this).find('img');
      var imgSrc = img.attr('src');
      var dataWidth = img.attr('data-width');
      var dataHeight = img.attr('data-height');
      var newSrcset = '';
      var requestedWidth = Math.round($(this).parent().outerWidth());
      
      // Set widths check
      if (window.vendre_config.general.use_responsive_images_interval) {
        var widthInterval = parseInt(window.vendre_config.general.responsive_images_interval_px_width)
        requestedWidth = Math.ceil(requestedWidth / widthInterval) * widthInterval;
      } 

      if (dataWidth >= requestedWidth) {
        newSrcset = imgSrc.replace(dataWidth+"x"+dataHeight, requestedWidth+'x0')+' 1x';
      }
      if (dataWidth >= requestedWidth*2) {
        newSrcset = newSrcset+', '+imgSrc.replace(dataWidth+"x"+dataHeight, (requestedWidth*2)+'x0')+' 2x';
      }
      if (dataWidth >= requestedWidth*3) {
        newSrcset = newSrcset+', '+imgSrc.replace(dataWidth+"x"+dataHeight, (requestedWidth*3)+'x0')+' 3x';
      }
      if (dataWidth >= requestedWidth*4) {
        newSrcset = newSrcset+', '+imgSrc.replace(dataWidth+"x"+dataHeight, (requestedWidth*4)+'x0')+' 4x';
      }
      
      img.attr('srcset',newSrcset);
      $(this).removeClass('loading');
    }
  });
},

Menar du...

Kategorier för din sökning

Inget resultat