@@ -13,7 +13,7 @@ Responsive cross-browser image library using modern codes like AVIF & WebP.
1313[ ![ Test Coverage] ( https://codecov.io/gh/codingjoe/django-pictures/branch/main/graph/badge.svg )] ( https://codecov.io/gh/codingjoe/django-pictures )
1414[ ![ GitHub License] ( https://img.shields.io/github/license/codingjoe/django-pictures )] ( https://raw.githubusercontent.com/codingjoe/django-pictures/master/LICENSE )
1515
16- ### Usage
16+ ## Usage
1717
1818Before you start, it can be a good idea to understand the fundamentals of
1919[ responsive images] ( https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images ) .
@@ -48,12 +48,16 @@ The template above will render into:
4848</picture >
4949```
5050
51- ### Setup
51+ ## Setup
52+
53+ ### Installation
5254
5355``` shell
5456python3 -m pip install django-pictures
5557```
5658
59+ ### Settings
60+
5761``` python
5862# settings.py
5963INSTALLED_APPS = [
@@ -80,7 +84,7 @@ PICTURES = {
8084If you have either Dramatiq or Celery installed, we will default to async
8185image processing. You will need workers to listen to the ` pictures ` queue.
8286
83- #### Placeholders
87+ ### Placeholders
8488
8589This library comes with dynamically created placeholders to simplify local
8690development. To enable them, add the following to enable the
@@ -101,9 +105,9 @@ if get_settings().USE_PLACEHOLDERS:
101105 ]
102106```
103107
104- ### Config
108+ ## Config
105109
106- #### Aspect ratios
110+ ### Aspect ratios
107111
108112You can specify the aspect ratios of your images. Images will be cropped to the
109113specified aspect ratio. Aspect ratios are specified as a string with a slash
@@ -135,26 +139,26 @@ served with the original aspect ratio of the file.
135139You may only use aspect ratios in templates, that have been defined on the model.
136140The model ` aspect_ratios ` will default to ` [None] ` , if other value is provided.
137141
138- #### Breakpoints
142+ ### Breakpoints
139143
140144You may define your own breakpoints, they should be identical to the ones used
141145in your css library. Simply override the ` PICTURES["BREAKPOINTS"] ` setting.
142146
143- #### Grid columns
147+ ### Grid columns
144148
145149Grids are so common in web design, that they even made it into CSS.
146150We default to 12 columns, but you can override this setting, via the
147151` PICTURES["GRID_COLUMNS"] ` setting.
148152
149- #### Container width
153+ ### Container width
150154
151155Containers are commonly used to limit the maximum width of layouts,
152156to promote better readability on larger screens. We default to ` 1200px ` ,
153157but you can override this setting, via the ` PICTURES["CONTAINER_WIDTH"] ` setting.
154158
155159You may also set it to ` None ` , should you not use a container.
156160
157- #### File types
161+ ### File types
158162
159163Unless you still services IE11 clients, you should be fine serving just
160164[ WebP] ( https://caniuse.com/webp ) . Sadly, [ AVIF] ( https://caniuse.com/avif )
@@ -164,20 +168,20 @@ Unless you still services IE11 clients, you should be fine serving just
164168If you are serving IE11 use add ` JPEG ` to the list. Beware though, that this may
165169drastically increase you storage needs.
166170
167- #### Pixel densities
171+ ### Pixel densities
168172
169173Unless you really care that your images hold of if you hold your UHD phone very
170174close to your eyeballs, you should be fine, serving at the default ` 1x ` and ` 2x `
171175densities.
172176
173177
174- #### Async image processing
178+ ### Async image processing
175179
176180If you have either Dramatiq or Celery installed, we will default to async
177181image processing. You will need workers to listen to the ` pictures ` queue.
178182You can override the queue name, via the ` PICTURES["QUEUE_NAME"] ` setting.
179183
180- ### Migrations
184+ ## Migrations
181185
182186Django doesn't support file field migrations, but we do.
183187You can simply auto create the migration and replace Django's
0 commit comments