Drupal is a publishing platform shaped by our energetic community and now bursting with potential. It can be used for thousands of free designs and plug-ins for swift site assembly. The drupal developers like its well-documented APIs. The designers like the flexibility. And the site administrators like the limitless scalability.
Drupal 7 is a better idea if your site uses contributed modules because there’s where all the development is, the new generation of work is happening in D7 only and isn’t getting back ported.
A numerous practices are there for managing the handling of responsive images. By the help of CSS one could simply resize the image. It is however the simplest technique but the desktop version of full downloading of the image is required. Or else you can display a resized one according to your screen size. By using the technique the user may avoid wasting the large internet bandwidth by evading downloading large images over their 3G connection.
Responsive design delivers the way where your website’s content can be viewed in an optimal way depending on the size of screen size. It contributes to one web idea where you only build a single site for all channels, in place of a dedicated mobile version. Responsive design is a good solution to work with for many owners and builders now not complied with all use cases. Responsive design is certainly a convincing and widespread concept. Your desktop site might be of three columns, whereas in your Smartphone you might want to display only one column fashion- which can be done using responsive design – it’s an awesome way of re-flowing the content into your website and re-layout it to suit the width of the device.
The following are the steps regarding Handling Responsive Images, before making a start, just download and install the Breakpoints, Picture, and Ctools module.
Step 1: Breakpoints Module:
Firstly, you need to configure some breakpoints for the Picture module.
1. Just go to Configuration -> Breakpoints and insert in the breakpoints using some values defined.
Click on Save as a new row to appear.
Don’t forget to note that the breakpoint min-width will vary depending on how you setup your @media queries within your theme.
2. Click on the -Add a new group-link, insert -Article image- into the -Group name- field, choose all the breakpoints and click on Save.
3. Viewing at the “Article image” breakpoint group always ensure that the breakpoints are ordered correctly.
Step 2: Picture Module:
In the section we configured three breakpoints, however now we’ll assign image styles to those breakpoints.
1. Go to Configuration -> Picture and click on “Article image”.
2. Assign image styles to specific breakpoints and click on Save.
Step 3: Configure Field Formatter:
Now at least just configure the Image field to use the Picture formatter.
1. Go to Structure -> “Content types” and click on the “manage display” link within the Article row.
2. Select the Picture formatter from the Format drop-down list.
3. Click on the cog wheel and select “Article image” from the “Picture group” drop-down and click on Update.
4. Save the whole page by clicking on Save.
Now it is the final stage. Go and create a piece of content and see how the images are responsive.
The image should go from large…. Then, all the way down to a thumbnail:
Thus a lot of modules floating on drupal.org that offers the same type of responsive image function.
Download Your FREE e-Guide NOW!
Discover What, Why & How of "" with this FREE e-Guide!