In this series, I'm going to be showing you how to setup your site to automatically display images using different image styles based on the size of the browser window. This is incredibly useful for sites that use a responsive theme. A common issue is that the site layout responds to the window size, for example on a mobile device. However, the images stay the same size, which often requires the user to scroll horizontally to view them fully, or even worse, the images overlap content on the page. After you've watched this series, you'll know how to configure your images to respond along with your layout, so that everything looks exactly the way you want across all devices.
For this video, I'll be using Drupal 7 installed using the "Standard" installation profile. I'm also going to use the Admin Menu module for administration and configuration tasks, instead of the default Drupal 7 toolbar.
Install a responsive theme
Responsive images are most effective when used with a responsive theme. I'm going to be using the Corolla theme because it is responsive, and it looks pretty good straight out of the box. Now, it is a sub-theme of AdaptiveTheme, so I'll go ahead and download that too.
With the themes downloaded and enabled, and corolla set as the default, we're ready to get started setting up our responsive images.
Install the "Responsive Images and Styles" module
p>We're going to use the Responsive Images and Styles module to take care of knowing when to apply our various image styles to our images. It requires the CTools module, so we'll need to install that as well.
Now, before we setup our image styles, I'm going to create a new content type called "Featured Content". The only field we'll need will be an image field and we're going to create a view that will cycle through these images in part 3.
Create the "Featured Content" content type
To create the content type, we'll go to "Structure => Content Types => Add Content Type".
- Name: Featured Content
- Description: Upload an image to be included anywhere featured content is displayed.
- (Save and add fields)
- (Delete the body field)
- Add Field:
- Label: Featured Image
- Field Type: Image
- Required: Yes
- File Directory: featured/image
Ok, in part 2 we are going to configure our various image styles, and make them responsive.