Embedded "responsive" - pre-defined aspect ratio

I think this may be something of an edge case feature that's specific to the js library itself. So it may not be something that we want to officially support in the Drupal-side configuration. However, I imagine that there may be some people out there who would be interested in a way to add this functionality within a local theme or module.

I think that the code from the issue link you cited can be used almost as-is. The main difference are that:

• You don't want to invoke the gallery itself with this code, as that's already handled by the module. So the new juicebox() part would be omitted.
• You need to consider which selector to target for the dynamic resize. In the example you cited they use #wrap but that's somewhat arbitrary and specific to the embed html from their example. In the Drupal case the embed html is built by the module so you just need to check your markup for the right info. If you only have one gallery on the page, and only one gallery type on your site that needs this feature, you can just target the .juicebox-parent wrapper. That wrapper is always used for any gallery of any type created with this module. Alternatively you can be even more specific by targeting a gallery's specific ID or add specificity via a parent selector (like .node-type-article .juicebox-parent)

So you might get something like:

function doLayout() {
  var windowWidth = parseInt(window.innerWidth ? window.innerWidth : $(window).width());
  var galleryWidth = parseInt(windowWidth * 0.5);
  var galleryHeight = parseInt(galleryWidth / 2);
  $('.juicebox-parent').width(galleryWidth);
  $('.juicebox-parent').height(galleryHeight);
}
$(document).ready(function() {
  doLayout();
  $(window).resize(doLayout);
});

I suppose the easiest way to get that js in there would be to do it as part of your theme. See the notes at the link below for more on that (note that you would need to declare the core/jquery dependency):

https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-an...

This of course would add the logic to all pages on your site, which would add very small overhead to non-gallery pages. Anyway, it might be the quickest way to get started as test things out. If you need to be more conditional about when the js is added (e.g. only to certain pages with certain galleries) or support the feature on galleries that are generated though some kind of AJAX, then there are other considerations.

Just wanted to check if we should leave this open any longer. I'm hoping that the notes from #2 were helpful.

#2 works great, thank you!

Great, thanks for following-up!

#2 works fine for me too.

The only thing I notice is that when i change from portrait to landscape and back on my mobile it does not resize.

Any idea what causes that ?

Regards,

Hans

This solved the problem for me:

(function ($) {
  $(window).resize(function() {
    var $jbParent = $('.juicebox-parent');
    var $jbThumbnails = $('.jb-idx-thumbnail-container');
    if($jbParent.length && $jbThumbnails.length) {
      $jbParent.height($jbParent.width() / 1.5 + $jbThumbnails.height());
    }
  });

  $(document).ready(function(){
    var $jbParent = $('.juicebox-parent');
    var $jbThumbnails = $('.jb-idx-thumbnail-container');
    if($jbParent.length && $jbThumbnails.length) {
      $jbParent.height($jbParent.width() / 1.5 + $jbThumbnails.height());
    }
  });
})(jQuery);