Hi all,
I simply can't get 'device-widths' to work! I want to set device widths as follows - large: 1200px, medium: 760px, small: 520px. I have added the following code in my vanilla theme generic.less:
@device-width-small: 520px;@device-width-medium: 760px;@device-width-large: 1200px;
If I add a graphic component and specify a different image for "small", it appears at 760px, not 520px. What am I doing wrong?
Thanks, Chris
I think you may have to set the sizes elsewhere too, I forget exactly which place (theming isn't something I get involved with) but the settings also show up in theme.json and also config.json (although I think maybe the values from theme.json are 'injected' here??)
Hi Matt,
Actually, it looks like the correct device size is being set. If I size the browser window in the inspector, at 760px the html class "size-large" becomes "size-medium" (then "small" at 520px).
It seems to be the graphic component that's not behaving like I want. So, I added data-medium="{{_graphic.medium}}" to this line in the .hbs file, and included a "medium" version of my image in my component, so now all image versions are showing up in the up in the HTML (data-large, data-medium, data-small). But I'm still getting the "small" image at 760px browser window.
Is there something that needs doing to the resizeImage() function in adapt-contrib-grapic.js?
Currently it reads:var imageWidth = width === 'medium' ? 'small' : width;var imageSrc = (this.model.get('_graphic')) ? this.model.get('_graphic')[imageWidth] : '';
Ah yes, the graphic component only supports 'small' and 'large' images out of the box, so just comment out/delete this line and you should be good to go.
Hi Matt,
I greyed that line out and now I'm just getting the Loading icon.
It looks like the first 3 lines of that function are interdependent (imageWidth is used in the next line so I guess that's why it's breaking). Any change you could take another look?
Thanks for your support. Much appreciated.
whoops my bad! Keep line 56 commented out and change line 57 to:
var imageSrc = (this.model.get('_graphic')) ? this.model.get('_graphic')[width] : '';