|
@@ -16,12 +16,12 @@ For example:
|
|
|
{% load wagtailimages_tags %}
|
|
|
...
|
|
|
|
|
|
- {% image self.photo width-400 %}
|
|
|
+ {% image page.photo width-400 %}
|
|
|
|
|
|
<!-- or a square thumbnail: -->
|
|
|
- {% image self.photo fill-80x80 %}
|
|
|
+ {% image page.photo fill-80x80 %}
|
|
|
|
|
|
-In the above syntax example ``[image]`` is the Django object refering to the image. If your page model defined a field called "photo" then ``[image]`` would probably be ``self.photo``. The ``[resize-rule]`` defines how the image is to be resized when inserted into the page; various resizing methods are supported, to cater for different usage cases (e.g. lead images that span the whole width of the page, or thumbnails to be cropped to a fixed size).
|
|
|
+In the above syntax example ``[image]`` is the Django object refering to the image. If your page model defined a field called "photo" then ``[image]`` would probably be ``page.photo``. The ``[resize-rule]`` defines how the image is to be resized when inserted into the page; various resizing methods are supported, to cater for different usage cases (e.g. lead images that span the whole width of the page, or thumbnails to be cropped to a fixed size).
|
|
|
|
|
|
Note that a space separates ``[image]`` and ``[resize-rule]``, but the resize rule must not contain spaces.
|
|
|
|
|
@@ -36,7 +36,7 @@ The available resizing methods are:
|
|
|
|
|
|
.. code-block:: html+django
|
|
|
|
|
|
- {% image self.photo max-1000x500 %}
|
|
|
+ {% image page.photo max-1000x500 %}
|
|
|
|
|
|
Fit **within** the given dimensions.
|
|
|
|
|
@@ -47,7 +47,7 @@ The available resizing methods are:
|
|
|
|
|
|
.. code-block:: html+django
|
|
|
|
|
|
- {% image self.photo min-500x200 %}
|
|
|
+ {% image page.photo min-500x200 %}
|
|
|
|
|
|
**Cover** the given dimensions.
|
|
|
|
|
@@ -58,7 +58,7 @@ The available resizing methods are:
|
|
|
|
|
|
.. code-block:: html+django
|
|
|
|
|
|
- {% image self.photo width-640 %}
|
|
|
+ {% image page.photo width-640 %}
|
|
|
|
|
|
Reduces the width of the image to the dimension specified.
|
|
|
|
|
@@ -67,7 +67,7 @@ The available resizing methods are:
|
|
|
|
|
|
.. code-block:: html+django
|
|
|
|
|
|
- {% image self.photo height-480 %}
|
|
|
+ {% image page.photo height-480 %}
|
|
|
|
|
|
Resize the height of the image to the dimension specified..
|
|
|
|
|
@@ -76,7 +76,7 @@ The available resizing methods are:
|
|
|
|
|
|
.. code-block:: html+django
|
|
|
|
|
|
- {% image self.photo fill-200x200 %}
|
|
|
+ {% image page.photo fill-200x200 %}
|
|
|
|
|
|
Resize and **crop** to fill the **exact** dimensions.
|
|
|
|
|
@@ -98,7 +98,7 @@ The available resizing methods are:
|
|
|
|
|
|
.. code-block:: html+django
|
|
|
|
|
|
- {% image self.photo fill-200x200-c100 %}
|
|
|
+ {% image page.photo fill-200x200-c100 %}
|
|
|
|
|
|
This will crop the image as much as it can, but will never crop into the focal point.
|
|
|
|
|
@@ -109,7 +109,7 @@ The available resizing methods are:
|
|
|
|
|
|
.. code-block:: html+django
|
|
|
|
|
|
- {% image self.photo original %}
|
|
|
+ {% image page.photo original %}
|
|
|
|
|
|
Leaves the image at its original size - no resizing is performed.
|
|
|
|
|
@@ -132,7 +132,7 @@ Extra attributes can be specified with the syntax ``attribute="value"``:
|
|
|
|
|
|
.. code-block:: html+django
|
|
|
|
|
|
- {% image self.photo width-400 class="foo" id="bar" %}
|
|
|
+ {% image page.photo width-400 class="foo" id="bar" %}
|
|
|
|
|
|
No validation is performed on attributes added in this way so it's possible to add `src`, `width`, `height` and `alt` of your own that might conflict with those generated by the tag itself.
|
|
|
|
|
@@ -143,17 +143,17 @@ Wagtail can assign the image data to another variable using Django's ``as`` synt
|
|
|
|
|
|
.. code-block:: html+django
|
|
|
|
|
|
- {% image self.photo width-400 as tmp_photo %}
|
|
|
+ {% image page.photo width-400 as tmp_photo %}
|
|
|
|
|
|
<img src="{{ tmp_photo.url }}" width="{{ tmp_photo.width }}"
|
|
|
- height="{{ tmp_photo.height }}" alt="{{ self.photo.title }}" class="my-custom-class" />
|
|
|
+ height="{{ tmp_photo.height }}" alt="{{ page.photo.title }}" class="my-custom-class" />
|
|
|
|
|
|
|
|
|
This syntax exposes the underlying image "Rendition" (``tmp_photo``) to the developer. A "Rendition" contains just the information specific to the way you've requested to format the image i.e dimensions and source URL.
|
|
|
|
|
|
If your site defines a custom image model using ``AbstractImage``, then any additional fields you add to an image e.g a copyright holder, are **not** part of the image *rendition*, they're part of the image *model*.
|
|
|
|
|
|
-Therefore in the above example, if you'd added the field ``foo`` to your AbstractImage you'd access it using ``{{ self.photo.foo }}`` not ``{{ tmp_photo.foo }}``.
|
|
|
+Therefore in the above example, if you'd added the field ``foo`` to your AbstractImage you'd access it using ``{{ page.photo.foo }}`` not ``{{ tmp_photo.foo }}``.
|
|
|
|
|
|
(Due to the links in the database between renditions and their parent image, you could also access it as ``{{ tmp_photo.image.foo }}`` but this is clearly confusing.)
|
|
|
|