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.