.. include:: /Includes.rst.txt
.. _configuration:

=============
Configuration
=============

Extension Configuration
=======================

This extension does not require any TypoScript to be included.
But this extension provides some example configuration that can
be used for image rendering:

* `Responsive images default configuration (optional)`
* `Responsive images bootstrap configuration (optional)`

Only one of them should be included. These configurations provide
the following variant keys:

Continue this :ref:`rendering` after configuration is finished.

Default configuration
---------------------

This configuration is loaded by default when including the default extension TypoScript.

+---------------+---------------------+---------------------+--------------+
|Variant key    |Size: smartphone     |Size: tablet         |Size: desktop |
+===============+=====================+=====================+==============+
|default        |320px 1x, 640px 2x   |1024px 1x, 2024px 2x |1920px 1x     |
+---------------+---------------------+---------------------+--------------+
|half           |320px 1x, 640px 2x   |512px 1x, 1024px 2x  |960px 1x      |
+---------------+---------------------+---------------------+--------------+
|third          |320px 1x, 640px 2x   |341px 1x, 682px 2x   |640px 1x      |
+---------------+---------------------+---------------------+--------------+
|quarter        |320px 1x, 640px 2x   |256px 1x, 512px 2x   |480px 1x      |
+---------------+---------------------+---------------------+--------------+
|two-thirds     |320px 1x, 640px 2x   |682px 1x, 1364px 2x  |1280px 1x     |
+---------------+---------------------+---------------------+--------------+
|three-quarters |320px 1x, 640px 2x   |768px 1x, 1536px 2x  |1440px 1x     |
+---------------+---------------------+---------------------+--------------+


Bootstrap configuration
-----------------------

This configuration can be loaded by adding the static
TypoScript file **Responsive images bootstrap configuration (optional)**.

+---------------+---------------------+---------------------+---------------------+--------------+
|Variant key    |Size: extraSmall     |Size: small          |Size: medium         |Size: large   |
+===============+=====================+=====================+=====================+==============+
|default        |400px 1x, 800px 2x   |750px 1x, 1500px 2x  |970px 1x, 1940px 2x  |1170px 1x     |
+---------------+---------------------+---------------------+---------------------+--------------+
|col-12         |400px 1x, 800px 2x   |750px 1x, 1500px 2x  |970px 1x, 1940px 2x  |1170px 1x     |
+---------------+---------------------+---------------------+---------------------+--------------+
|col-11         |400px 1x, 800px 2x   |687px 1x, 1375px 2x  |889px 1x, 1778px 2x  |1072px 1x     |
+---------------+---------------------+---------------------+---------------------+--------------+
|col-10         |400px 1x, 800px 2x   |625px 1x, 1250px 2x  |808px 1x, 1616px 2x  |975px 1x      |
+---------------+---------------------+---------------------+---------------------+--------------+
|col-9          |400px 1x, 800px 2x   |562px 1x, 1125px 2x  |727px 1x, 1455px 2x  |877px 1x      |
+---------------+---------------------+---------------------+---------------------+--------------+
|col-8          |400px 1x, 800px 2x   |500px 1x, 1000px 2x  |646px 1x, 1293px 2x  |780px 1x      |
+---------------+---------------------+---------------------+---------------------+--------------+
|col-7          |400px 1x, 800px 2x   |437px 1x, 875px 2x   |565px 1x, 1131px 2x  |682px 1x      |
+---------------+---------------------+---------------------+---------------------+--------------+
|col-6          |400px 1x, 800px 2x   |375px 1x, 750px 2x   |485px 1x, 970px 2x   |585px 1x      |
+---------------+---------------------+---------------------+---------------------+--------------+
|col-5          |400px 1x, 800px 2x   |312px 1x, 625px 2x   |404px 1x, 808px 2x   |487px 1x      |
+---------------+---------------------+---------------------+---------------------+--------------+
|col-4          |400px 1x, 800px 2x   |250px 1x, 500px 2x   |323px 1x, 646px 2x   |390px 1x      |
+---------------+---------------------+---------------------+---------------------+--------------+
|col-3          |400px 1x, 800px 2x   |187px 1x, 375px 2x   |242px 1x, 485px 2x   |292px 1x      |
+---------------+---------------------+---------------------+---------------------+--------------+
|col-2          |400px 1x, 800px 2x   |125px 1x, 250px 2x   |161px 1x, 323px 2x   |195px 1x      |
+---------------+---------------------+---------------------+---------------------+--------------+
|col-1          |400px 1x, 800px 2x   |62px 1x, 125px 2x    |80px 1x, 161px 2x    |97px 1x       |
+---------------+---------------------+---------------------+---------------------+--------------+