Scald and responsive integration

Yes Scald works almosts out of the box with the Picture module and can handle your responsive site !

Here are the steps I used to turn scald into responsive/adaptavive mode:

1-Install breakpoints module

2-Install Picture module

3-Create few breakpoints

I am not sure if the following is true, but I have choose to use only the "min-width" queries. I could choose the "max-width" queries, but I think it is not a good idea to mix the queries if you are planning to use the picture module.

I Have checked my theme style sheet and found the following "min-width" media queries:

@media (min-width: 321px)
@media (min-width: 768px)
@media (min-width: 992px)
@media (min-width: 1200px)  

Add those breakpoints in Configuration » Media » Breakpoints

As you are using the "min-width" media queries, add also "(min-width: 0px)"

As I am planning to use Picture 7.x-2.0, I have to arrange the breakpoints from largest to smallest.

Thus, we need to order them the correct way picture will handle them

4-Create breakpoint groups

At this point we need to create a group for each image style you like to be responsive. On my side, I need to have 2 contexts/image styles to be responsive: "bazar-images" and "JQzoom" (I generally use the same names for contexts and image styles)

In Configuration » Media » Breakpoints, click "Add new group" and add all the breakpoints you have created. Names the group with the name of the corresponding context/image syle

You have now all the groups corresponding to the image style you need to be responsive

5-Create new styles for breakpoints

Go to Configuration » Media » Breakpoints » Add responsive style
Here, you can create all the responsive image styles in once: select the style (here: "bazar-images") and type "resp_bazar-img_" in "Image style base name"

Do it for each context/image style you need to be responsive

6-Configure image height and width per image style

Go to Configuration » Media » Image styles

Since you based the style on a pre-existing image set, they are all the same to start. Tweak the sizes, such as making mobile small and the Extra large option larger.

7-Map image styles to picture options

Go to Configuration » Media » Picture mappings

Each breakpoint group you created will result in a picture group being created and listed on this page. For each picture group, associate the breakpoints with your preset image styles.

Click "Add" and select you "Breakpoint group" (here: "bazar-images")

Click "Continue"

Use also "bazar-images" for the administrative name and select the image styles you have previously created for each breakpoint.

8-Set the "Picture group" as a transcoder

Go to Structure » Scald and click on "Contexts" for the "Images" atom type.

Select the context which needs to be responsive (here: "bazar-images")

And assign a new transcoder which is the Picture group name you have made at step 6

It's done!