Picture of Chris Gillison
Change narrative item images on smaller screens
by Chris Gillison - Friday, 19 January 2018, 11:59 AM
 

Hi all,

I'm trying to get the narrative component to work like the graphic component so you can specify a different image src for "large" or "small" screens. I've added the resizeImage() function from the graphic JS file to the narrative JS file and modified it (see below). Only problem is the component is now not finding the default image src, so the narrative-slider-graphic is blank.

Could anyone help to explain where I'm going wrong?! Is there something wrong with this.model.get('_items._graphic') ? (PS. As well as the code below, I also added a function to call resizeImage() in the preRender() and postRender() functions)

resizeImage: function(width, setupInView) {
            var imageWidth = width === 'medium' ? 'small' : width;
            var imageSrc = (this.model.get('_items._graphic')) ? this.model.get('_items._graphic')[imageWidth] : '';
            this.$('.narrative-slider-graphic img').attr('src', imageSrc);

            this.$('.narrative-widget').imageready(_.bind(function() {
                this.setReadyStatus();

                if (setupInView) {
                    // Bind 'inview' once the image is ready.
                    this.$('.component-widget').on('inview', _.bind(this.inview, this));
                }
            }, this));
        }

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

Replying to my own post. I've got it working by using code from the GMCQ component instead. It all seems to work fine, but Javascript is not exactly my forte, so if there's something glaringly problematic with the following code, any guidance/warnings from the coders amongst you would be very much appreciated!

Kept the function calls in preRender and postRender but changed the actual function to:
resizeImage: function(width) {
            
            var imageWidth = width === 'medium' ? 'small' : width;

            this.$('.narrative-widget').each(function(index) {
                var src = $(this).find('img').attr('data-' + imageWidth);
                $(this).find('img').attr('src', src);
            });

        }

 

 
Show parent | Reply
Picture of Chris Gillison
Re: Change narrative item images on smaller screens
by Chris Gillison - Friday, 19 January 2018, 4:44 PM
 

Rats. It's not working! The code above does replace the image on small screen sizes, but gives every narrative item the same two images! I'm so close! Please help!

 
Show parent | Reply
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.

 
Show parent | Reply