Does anyone have some guidelines on the image sizes to use for the graphic component for the below?
And this is based upon a left or right (or centre if it exists) and would presume different if 'full' or does the adapt-contrib-graphic have set sizes (couldn't see from looking at the source)
Hi Adam,
The small, medium, and large properties of the Graphic component correspond to the viewport breakpoints of the same name as defined in the theme's theme.json file, i.e.
When the Adapt framework detects the viewport as 'small' it will render the image you've specified as 'small', and so on.
You can edit the screenSize property of the theme.json file to define your own breakpoints if you wish to do so.
Hope this is of some help.
Regards,
Brian
I saw that bit but I was referring to what size the images get scaled/should be in relation to the theme size is it a relative percentage or a set pixels i.e.
"graphic": {
"alt": "It is best prac...wo weeks.",
"title": "title text",
"large": "course/en/images/oral_600x400.png",
"medium": "course/en/images/oral_300x200.png",
"small": "course/en/images/oral_200x133.png"
},
Hey Adam,
When we've been working with Adapt at Kineo - we've found that you need to base your image sizes upon the theme.
If your theme max-width is 1024px then full width images should be 1024px with single width graphics half of this - 512px.
We're starting to find that we only need two sizes of graphics. This is mainly due to pixel density on some devices. Even though we have padding and then images scale down a little - these images will display nicely across the pixel density devices. We allow for the images to be bigger by around 30-40px then what they need to be. This 30-40px difference means the images pixel density displays great even on iPads. The 30-40px difference is already in the current Adapt theme (side padding and middle padding around the components).
Thanks,
Daryl