0

I am using fancybox JS library for creating a slideshow from a custom bloc with a multivalue image field.

it works but the images on the slideshow are small because a style have been applied to the images.

I then get the original size image using a substring JS function but it is not entirely satisfying

(function ($, Drupal) {

  $('.bloc-image-gallery img').each(function (){
    var currentImage = $(this);
    var path=currentImage.attr("src");
    var StyleCutPath = path.substring(
      path.lastIndexOf("/") -7,
      path.lastIndexOf("?")
    );
    currentImage.wrap('<a class="fancybox" data-fancybox="gallery" href="/sites/my_site/files/' + StyleCutPath + '"></a>'); });

  Drupal.behaviors.fancyBoxInit = {
    attach: function (context, settings) {
      $('[data-fancybox="gallery"]', context).once('fancyBoxInit').fancybox({
        buttons: [
          'close'
        ]
      });
    }
  }
})(jQuery, Drupal); 

I wonder how i could get the href with an new style applied to it ( bigger image but not original size )

The src takes this form

/sites/my_site/files/styles/directory_user_photo/public/2018-09/seminary.png?itok=5597asHF

i made it to

/sites/my_site/files/2018-09/seminary.png

but i would rather have smthg as

/sites/my_site/files/styles/my_new_style_adapted_to_full_screen_visio/public/2018-09/seminary.png?itok=5597asHF

  • 1
    In the field formatter settings you can tell the image to render in one style, but link through to the full image. If that doesn't suit, I'd consider creating a new field formatter which gives you the option to link through to another image style. Doing it in JS is always going to be a hack because the URL generation functions live in PHP – Clive Nov 29 '18 at 15:37
  • I would advise a completely different solution: Create a responsive image style with all meaningful image styles included and let the browser do the job of selecting the proper image source. – Hudri Nov 29 '18 at 15:46
  • @clive ok, i see it in the image media display render. But this does not allow to link to a new style – Matoeil Nov 29 '18 at 15:49
  • @Hudri mm taht is a module is it? , not sure that would work for my purpose. i am happy about the size but i like to change it on click when the slideshow opens – Matoeil Nov 29 '18 at 15:52
  • 1
    @Matoeil My idea is to use the same img srcset of the small preview image also as data-srcset for Fancybox' JS large image. By theory the browser should select the small src for the block and Fancybox should load the large src for the lightbox – Hudri Nov 29 '18 at 16:26
0

clive would suggest to create a new Formatter for image type fields that would allow in the render display to select a image style for the image link.

At least i could do "In the field formatter settings you can tell the image to render in one style, but link through to the full image" and clean the code to:

(function ($, Drupal) {

  Drupal.behaviors.fancyBoxInit = {
    attach: function (context, settings) {
      $('[data-fancybox="gallery"]', context).once('fancyBoxInit').fancybox({
        buttons: [
          'close'
        ]
      });
    }
  }
})(jQuery, Drupal); 

with in image-formatter--media--image--field-media-image.html.twig

   {% if url %}
      <a data-fancybox="group" href="{{ url }}">{{ image }}</a>
    {% else %}
      {{ image }}
    {% endif %}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.