images

The Breakpoints module allows you to group breakpoints together. This way other modules can use these groups. The Picture module, for example, allows you to select a breakpoint group when you select the Picture display formatter for a field. The formatter will determine the size of the image to display based on the breakpoints in the selected group.

Following these steps you can create your own groups:

Navigate to the breakpoints configurations page

Go to Configuration » Media » Breakpoints. You will notice you can add your own breakpoints on this page.
In stead, click on "Add a new group":

Configure the breakpoints group

Enter a name for the new breakpoints group and select the breakpoints to include in this group:

Save the form and your new group should show up at the top of the page. You should also see the breakpoints selected on the previous step in this group:

Warning

The Picture module allows you to manage images in Drupal sites that are using Responsive Design. The module provides an interface to map existing image styles to breakpoints. The Picture module is a backport of the Drupal 8 solution for responsive images, and promises to provide a smooth upgrade path.

Installation

Recommended to download the latest version as usual. This version doesn't use JavaScript to detect the device width, but uses a picture tag and full media queries.

Module dependencies

1. Breakpoints
2. Ctools

Install and enable

1. Place all the modules in: your sites/all/modules directory; or your sites/[my site]/modules directory.
2. Enable the modules at: admin/modules

Configuration

1.Configure your theme

After you have all the modules enabled and ready to go, start with theme configuration. You set the breakpoints for view ports in your theme’s .info file.

The Responsive images and styles module allows you to manage images in Drupal sites that are using Responsive Design. The module provides an interface to map existing image styles to breakpoints.

This documentation is only for the 7.x-2.x Version.

Installation

Recommended to download the 7.x-2.x Version and install. This version doesn't use javascript anymore to detect the device width, but uses a picture tag and full media queries.

Pre-requisites

1. Breakpoints
2. Ctools
3. Field formatter settings API module

Steps

1. Place all the module in: your sites/all/modules directory; or your sites/[my site]/modules directory.
2. Enable the modules at: admin/modules

Configure responsive images

1. Configure Breakpoints module
2. Create image styles required for your site at:admin/config/media/resp_img/create_style
3. Visit the responsive images configuration page: config/media/resp_img

To make use of thie EXIF Custom you will need to perform the following steps:

1. Make sure that you have downloaded and enabled the File Entity module.
2. Enable this module from the settings page.
3. Enable the permissions for your users if required.
4. Create an image mapping (admin/config/content/exif_custom/new_map). You will need to give the mapping a name, and upload an example file that has ALL of the metadata fields you wish to use populated.
5. You can edit which metadata fields are mapped to which image entity fields by going to admin/config/content/exif_custom and clicking edit next to the mapping you have just created.
6. In order to automatically import metadata when uploading an image you will need to go to the EXIF Custom settings page (admin/config/content/exif_custom/settings) and choose a site default mapping)
7. Individual users may override the site default with their own default mapping (admin/config/content/exif_custom/user).

Rotating Banners is a simple and intuitive Drupal 7 module that enables you to quickly and easily add rotating banners to your theme or individual pages. There are other modules that have more features, but what makes Rotating Banners unique is the ease of setup and the degree of control it gives you over placement and display of the banners and the transitions between images.

Rotating Banners allows you to automatically cycle a large number of images through a gallery and control the transition from photo to photo. You can place a separate headline and text caption on each, and control how they are displayed. You can hyperlink each image to a separate page, so you can use the gallery for navigation or cataloging.

And you can create multiple rotating galleries on a single page, and specify exactly where they will appear. If the interval is identical for the various galleries, they will all switch on the same schedule. By staggering the transition time, you can have the images changing at different intervals.
Installation:

Rotating Banners requires two other modules and a pair of scripts to function.
The dependent modules are Media, http://drupal.org/project/media, and Styles, http://drupal.org/project/styles.

The two server scripts are jquery.cycle.all.min.js and jquery.easing.1.3.js.