Add new comment

Set up a basic responsive site with Omega, Breakpoints and Picture

Jelle's picture

The Breakpoints and Picture modules (that will be part of Drupal 8 core!), in combination with a responsive theme (like Omega) are powerful tools to create a truly responsive site. In this post, I will provide you with the basic steps to create a responsive site using these tools. First of all, you need to install the latest stable versions of the Picture and Breakpoints modules, along with a responsive theme. I will use the Omega theme for this eample.

Once you've downloaded and enabled these modules, you need to configure the breakpoints. Go to Administration » Configuration » Media » Breakpoints to configure them. Below is a screenshot of the breakpoints I will use for this example.

Breakpoints configuration

Next, click "Add a new group" at the top of the page. Give your breakpoint group a name and select the breakpoints you want to enable for this group. I named my group "Picture" since we'll be using it to display images with the Picture module. Next I enabled all the breakpoints for this group (Note: make sure your breakpoints are in the right order: smallest screens on top, largest at the bottom. If they aren't drag them to reorder until they are).

Picture breakpoint group

Now we have to create an image style for each breakpoint. Normally that would mean that we have to go through the steps for creating a style four times. Luckily the Breakpoints module has a shortcut so we can speed things up a little. Click on "Add responsive style" and fill in the form. Choose the basic style you want to start from, in my case, I chose medium. Enter a base name for the image styles that will be created. Again I chose "picture_", so it's consistent with the breakpoint group they belong to. You can fill in any machine readable name here. Select the breakpoints for which you want to create the image style. Normally these are the breakpoints that are also in your newly created breakpoint group (in my case all breakpoints).

Add responsive style

After submitting the form you will be redirected to the overview page of the image styles. You will see the newly created image styles.

Responsive styles

You will still have to edit them so the right effects are applied to the images for the right styles. My configuration looks like this:

  • picture_custom_user_mobile_1x
    • scale 200x200
    • Allow upscaling
  • picture_custom_user_narrow_1x
    • scale 400x400
    • Allow upscaling
  • picture_custom_user_wide_1x
    • scale 600x600
    • Allow upscaling
  • picture_custom_user_tv_1x
    • scale 800x800
    • Allow upscaling

So, now we've created breakpoints, added them to a group and created image styles for each breakpoint. Now we have to tell the Picture module which image style belongs to which breakpoint. So navigate to Administration » Configuration » Media » Picture and select the group you created earlier ("Picture" in my case).

Picture configuration

Select the right image style for each breakpoint and save the settings. It should look something like this:

Picture mappings

Go to the field you want to make responsive. In my case I want to make the Image field of my Article content type responsive so I go to Administration » Structure » Content types » Article » Manage display. There I select "Picture" as the format for the Image field.

Article image field

Click on the gear icon to the right and select the breakpoint group you created earlier ("Picture" in my case). Click "Update" and then "Save" at the bottom of the page.

Image field display settings

Now you can create articles with responsive images. Just create an article as you normally would (Fill in a title, enter some body text and upload an image). When you view the article and resize your browser window, the Picture module will load the right image (read: image style) based on the media query that matches the current window size.

Wide:

Responsive article wide

Narrow:

Responsive article narrow

Mobile:

Responsive article mobile

And there you have it. You have successfully set up a responsive site with responsive images! It requires a bit of setup and preparation, but it's well-worth your time. I hope you've found this helpful!

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Syntax highlight code surrounded by the <pre class="brush: lang">...</pre> tags, where lang is one of the following language brushes: as3, applescript, bash, csharp, coldfusion, cpp, css, delphi, diff, erlang, groovy, jscript, java, javafx, perl, php, plain, powershell, python, ruby, sass, scala, sql, vb, xml.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
9
4
H
L
G
z
Enter the code without spaces.