Picture of Chris Gillison
Re: Change narrative item images on smaller screens
by Chris Gillison - Friday, 19 January 2018, 5:41 PM
 

This is getting embarrassing. Right, so I really think I've fixed it now. For anyone else who might be looking for this functionality and stumbles across this post here are the modifications I made in full...

 narrative.hbs
Add data-large="{{_graphic.large}}" data-small="{{_graphic.small}}" to img src of narrative-slider-graphic

adapt-contrib-narrative.js
Add this.listenTo(Adapt, 'device:changed', this.resizeImage, this); to preRender() function
Add this.resizeImage(Adapt.device.screenSize, true); to postRender() function
Add the following new function at the bottom under setupEventListeners():
resizeImage: function(width) {
      var imageWidth = width === 'medium' ? 'small' : width;
      this.$('.narrative-slider-graphic').each(function(index) {
          var src = $(this).find('img').attr('data-' + imageWidth);
          $(this).find('img').attr('src', src);
      });
}

Oh, and in components.json, for each narrative item's "_graphic", replace "src" with "large" and "small" followed by the image path.