In this video we will create the necessary image styles and make them respond at our preconfigured break points.

Configure Responsive Images and Styles

First we're going to configure the Responsive Images and Styles module.

• Go to "Configuration => Media => Responsive images => Add"

Now, I'm going to set my break points to correspond with Corolla's default break points, but you can choose whatever you want. So, I'm actually going to open the appearance tab in a new window, and click "Settings" for the Corolla theme.

Here you'll notice that we have three tabs for layout, Standard, Tablet and Smartphone. Inside the Tablet tab, you'll see that we have "Landscape Tablet" and "Portrait Tablet", and inside the Smartphone tab, you'll see that we have "Landscape Smartphone" and "Portrait Smartphone". So, we actually have five different layouts that come preconfigured with the Corolla theme. This means that in order to serve each layout, we'll need to setup five different responsive image styles.

Ok, so back on our "Add a new responsive image suffix" tab, we'll setup the Standard layout.

• Administrative title: Standard
• Label: Standard
• Suffix: _standard
• Width: 1025 (we get this from our corolla theme settings)

Next we'll setup the Tablet Landscape layout.

• Administrative title: Tablet Landscape
• Label: Tablet Landscape
• Suffix: _tabland
• Width: 769 (again, we get this from our corolla theme settings. Make sure you use the min-width and not the max-width.)

Next we'll setup the Tablet Portrait layout.

• Administrative title: Tablet Portrait
• Label: Tablet Portrait
• Suffix: _tabport
• Width: 481

Next we'll setup the Smartphone Landscape layout.

• Administrative title: Smartphone Landscape
• Label: Smartphone Landscape
• Suffix: _smartland
• Width: 321

Next we'll setup the Smartphone Portrait layout.

• Administrative title: Smartphone Portrait
• Label: Smartphone Portrait
• Suffix: _smartport
• Width: 0

(Corolla only has a max-width for this, so that anything below will use this layout. Responsive Images and Styles wants to know the minimum width, and will apply it to anything above that width (until another preset is found) so there's a slight difference in how we configure the two settings.)
You'll notice at the bottom of this it says that if the window width is smaller than any of the defined suffix' widths, the default will be used. We've pretty well taken care of that since we set this one to a width of 0, but we do need to set a default suffix, along with a couple of other settings, so I'll save this, and then click the "Settings" tab.

Our Default suffix will be "_smartport". You'll want this to be set to your smallest style so, if you're setting this up to work with another theme, just make sure you set this to your smallest responsive image style. And the only setting I'm going to change here is to change "Force resize" to "Yes". This will help prevent horizontal scrolling on a desktop browser, or anywhere a user is able to resize their browser window. If this is set to "No", whatever image style is rendered when the page loads, will stay there even when the window is resized. This might mean that you get some horizontal scrolling, overlapping of images etc. so, I recommend setting it to "Yes".

Create the actual image styles

Ok, so now we need to create the image styles for each responsive style. In part 3. I'm going to be putting these images in the first sidebar, so I'm going to go ahead and size them appropriately for that.

• Go to "Configuration => Media => Image styles"

And here, you could create responsive styles for thumbnail, medium and large (which I would recommend), but for now, I'm going to create a completely new image style just for our featured content.

• Add style
  • Style name: featured_content_standard (so because I'm using the suffix "_standard" and we setup a responsive style based on the suffix "_standard", the Responsive Images and Styles module will know to kick in, and do it's thing.)
  • Effect: Scale
  • Width: 200

(To get the appropriate width, I'll go back to the Corolla settings tab, and take the min-width times our sidebar percentage, so 1025*.2=205, and I'm just going to round down to 200, but you'll want to play with these sizes to make sure they fit your theme and breakpoints the way you want them to.)

Now, we'll go back to "Image Styles" and do the same for the other four image styles.

• Add style
  • Style name: featured_content_tabland
  • Effect: Scale
  • Width: 150

• Add style
  • Style name: featured_content_tabport
  • Effect: Scale
  • Width: 240

(The Tablet Portrait layout places the sidebars below the content and take up 50% of the width, so the images are actually going to be larger than our previous styles.)

• Add style
  • Style name: featured_content_smartland
  • Effect: Scale
  • Width: 160

• Add style
  • Style name: featured_content_smartport
  • Effect: Scale
  • Width: 310

(This one, I'm just going to make slightly smaller than the window size. The only devices that will be viewing this layout are smartphones that can't really change window size, so we really want it to pretty much fill the window. And again, you'll want to play with these to see what works best for your site.)

(Note: Now that you know how it works, you could create responsive styles for your thumbnail, medium and large styles. ie: thumbnail_smartport, thumbnail_smartland, etc. If you do create those, just make sure that you set the display mode to thumbnail_smartport instead of thumbnail to trigger the Responsive Images and Styles module.)

Set default display format to "featured_content_smartport"

Ok, and the very last thing we want to do before we start adding content is set the default display format to "featured_content_smartport" for our Featured Content content type.

• Go to "Structure => Content types => Featured Content => Manage display"
• Format: Image style: featured_content_smartport

So, in part 3, we'll start creating some Featured Content, and we'll also setup a slideshow to cycle through our images, and at the same time respond to the window size.