Proudly wearing its “mobile-first” aura, Drupal 8 is here to help you deal with the issue of responsiveness nice and smoothly. No need to write miles of code anymore, to master the art of pulling off HTML, back-end languages and JavaScrip combos anymore.
In other words: Drupal 8 is here, have no fear! It projects a new world of easy-to-build responsive themes.
It simply “spoils” you with an easy-to use responsive image setup (which comes in its core, another great news). Basically, it puts an image formatter and breakpoint mappings at your full disposal so that you can have your due-sized images, using HTML 5 picture tag, ready in just a few quick steps. Thus, you'll get your images adapted to every device's viewport in no time.
Well, not really “in no time”, but in 5 simple steps! Walk us through this step-by-step demo:
1. Turn on Your Responsive Image and Breakpoint modules
You've got that right: the Responsive Image Module is part of core Drupal 8, you get it upon installation and yet, if you want to use it you still have to first enable it. It's the same thing for the Breakpoints module, as well.
How do you enable the Responsive Image Module in Drupal 8 you say?
- You go to /admin/modules
- You click the check box close to “Responsive Image”
- You click the “Install” button
2. Set Up Your Breakpoints
“What is a breakpoint?” you say (if you're new to Drupal)? It's a window width that you get to set up, thus letting Drupal know that it should start using a different size image starting from that particular width size. Got it?
Do you remember how things used to be in Drupal 7's Breakpoint module (oh, the (not so) good old days when Breakpoint was a contributed module!)? You could define your breakpoints in your admin interface.
Well, not anymore! In Drupal 8 you have to set them up in code.
If it's a pre-built theme that you're using, there's a high chance that your breakpoints are already set up. If you're creating your own theme instead, then you need to set them up yurself in breakpoints.yml file.
So, here is how you set them up (make sure you start with the smallest ones):
your_theme_slug.bannerImage.narrow:
label: narrow
mediaQuery: ''
weight: 0
group: Banner Image
your_theme_slug.bannerImage.wide:
label: wide
mediaQuery: '(min-width: 600px)'
weight: 1
group: Banner Image
3. Create Your Image Style
What image styles do you want for each one of your previously defined breakpoints?
Once you've answered yourself that, go ahead and set them up (after you've done a bit of math setting up your breakpoints):
- Go to /admin/config/media/image-styles/add
- Type in your image style's name (we suggest you go for something descriptive) and click “Save”
- Click “Select a new effect” (you'll find it there, under “Effect”, in the next screen that will open up once you've clicked “Save”)
- Click “Scale and crop”
- Enter the width and height sizes
- Click “Add effect”
Et voila! Can you go through all this process all by yourself now? For you still have to go back and create image styles for each one of the breakpoints that you've (virually) set up, you know.
And this is how Drupal automatically resizes all the images, that you'll upload on your site, to the image styles that you will have defined. And it doesn't do all this the rudimentary way, no sir: first it sizes the image, then it crops off the extra so that the result should be a perfectly adapted new image (not the stretched or the shrunk, very unnatural looking type)
4. Define Your Responsive Image Style
After you've created images styles for each breakpoint, go ahead and put them all together in a responsive image style.
- Go to /admin/config/media/responsive-image-style
- Give the “Add responsive image syle” button a click
- Give your style a name (go for something easily recognizable)
- Select the “Breakpoint group” (you know, the one that you've set up at step no.
- Select the breakpoints one by one and associate them each with one image style
Can you see the option for fallback image style there, at the bottom? It's the “default” image that Drupal generates for those browsers that don't support responsive images (such as Internet Explorer 8). We recommend you to select the largest image style!
5. Allocate Your Responsive Image Style to An Image Field
Just one more quick step to take and you can upload images on your website and let Drupal do all the formatting/smooth resizing job for you! Before it can do that, you still need to let it know what image field to actually responsify for you:
- Click on “Structure”- “Content Types”
- Click the arrow close to “Manage Fields” and then click “Manage Display”
- Spot your target image field (you'll see the entity type, ranging from taxonomy vocabulary to content type that your image field is assigned to)
- Select “Responsive Images” (under “Format”)
- Pick one of the responsive image mappings that you will have set up (under “Responsive image style”)
- Click “Update”
And that's it! You've provided Drupal 8 with all the settings it needs for “working its magic”: pulling off images of appropriate sizes without comprising their quality.
