>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #2607810. --> Reported by: [danny_joris](https://www.drupal.org/user/392988) >>> <h3>What Is This?</h3> <p>Responsive Image Batch is a helper module for Drupal 8 to speed up creating responsive image styles. It provides a single interface for the following tasks:</p> <ul> <li>Calculate image sizes in various breakpoints and multipliers for the Picture element.</li> <li>Calculate image sizes for Sizes type responsive images, based on increment values.</li> <li>Name and create multiple image styles and assign image effects to them.</li> <li>Map image styles to a "responsive image style". This maps image styles to the breakpoints and multipliers of the picture element.</li> </ul> <h3>How To Use The Responsive Image Batch Interface</h3> <p>This module provides a single admin interface at: <code>/admin/config/media/responsive-image-batch</code></p> <h4>Picture elements:</h4> <ol> <li>Fill out a component label (used to name picture mapping and the image style).</li> <li>Select a base image style. This image style will be used as the base for all the generated images, meaning that it will copy the exact image effect settings. The only exception is that all width and height values of image effects defining image dimensions will be overridden.</li> <li>Select 'Picture' from the responsive image type dropdown.</li> <li>Select a breakpoint group. Breakpoint groups are defined as Yaml files in your module or theme. Selecting a breakpoint groups will generate one or more tables sorted by multiplier. The image style names will consist of a component name (e.g. article-teaser), breakpoint label (e.g. foobar.mobile), and a multiplier (e.g. 1.5x). For reviewing this module I would recommend creating a breakpoint group that has also multipliers, for example: 1x, 1.5x and 2x, as seen on the project page's screenshot. I <a href="https://www.drupal.org/files/issues/foobar_0.zip">included a theme</a> which only purpose is to include a breakpoint group to test this module with.</li> <li>Fill out width and height values for your images. If the breakpoint group has multipliers defined, these will be automatically calculated (input value * multiplier). Additionally you can select an aspect ratio per image style. This allows you to only fill out a single dimension value and all the further calculating will be done automatically. If you don't want to create an image at a certain breakpoint, there is an option to exclude it. When the responsive image is rendered, the image for the breakpoint below will be served.</li> <li>Select a default fallback image to be used when older browsers can't read the source elements in the picture elements.</li> <li>Select "Generate image styles". This will create all image styles and will map them to a "responsive image style", which can be used in the image fields display settings.</li> </ol> <h4>Sizes elements:</h4> <ol> <li>Fill out a component label (used to name picture mapping and the image style).</li> <li>Select a base image style. This image style will be used as the base for all the generated images, meaning that it will copy the exact image effect settings. The only exception is that all width and height values of image effects defining image dimensions will be overridden.</li> <li>Select 'Sizes' from the responsive image type dropdown.</li> <li>Fill out a width and height value for the starter image. You can select an aspect ratio for your images. This allows you to only fill out a single dimension value and all the further calculations will be done automatically. </li> <li>Fill out an increment value, type and count. Optionally, you can round up the numbers for the width values.</li> <li>Fill out a value for the Sizes attribute.</li> <li>Select a default fallback image to be used when older browsers can't read the source elements in the picture elements.</li> <li>Select "Generate image styles". This will create all image styles and will map them to a "responsive image style", which can be used in the image fields display settings.</li> </ol> <h3>Project page</h3> <ul> <li><a href="https://www.drupal.org/sandbox/dannyjoris/2607668">https://www.drupal.org/sandbox/dannyjoris/2607668</a></li> </ul> <h3>Clone</h3> <pre>git clone --branch 8.x-1.x http://git.drupal.org/sandbox/DannyJoris/2607668.git responsive_image_batch<br>cd responsive_image_batch</pre><h3>Pareview.sh</h3> <ul> <li><a href="http://pareview.sh/pareview/httpgitdrupalorgsandboxdannyjoris2607668git-8x-1x">http://pareview.sh/pareview/httpgitdrupalorgsandboxdannyjoris2607668git-8x-1x</a></li> </ul> <h3>Manual review of other projects</h3> <ul> <li><a href="https://www.drupal.org/node/2594957#comment-10541232">https://www.drupal.org/node/2594957#comment-10541232</a></li> <li><a href="https://www.drupal.org/node/2587323#comment-10541614">https://www.drupal.org/node/2587323#comment-10541614</a></li> <li><a href="https://www.drupal.org/node/2595851#comment-10541776">https://www.drupal.org/node/2595851#comment-10541776</a></li> <li><a href="https://www.drupal.org/node/2662738#comment-11214413">https://www.drupal.org/node/2662738#comment-11214413</a></li> <li><a href="https://www.drupal.org/node/2724929#comment-11214855">https://www.drupal.org/node/2724929#comment-11214855</a></li> </ul> <h3>Screenshot</h3> <p><img src="https://www.drupal.org/files/project-images/responsive-image-batch-picture.jpg"><br> <img src="https://www.drupal.org/files/project-images/responsive-image-batch-sizes.jpg"></p>