You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: tags/images.md
+35-68Lines changed: 35 additions & 68 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -58,6 +58,9 @@ Tag will accept the following attributes (**case-sensitive**) as well as the {%
58
58
`category="image category"`
59
59
: Filter the images by this list of category names as defined in the Categories panel.
60
60
61
+
`exclude="attributes"`
62
+
: List of IDs or attributes to 'negate'. For attributes, choose from one or more of: `name`, `category`, `author`, `realname`, `extension`, `size`, `month`, `time`, or `id`.
63
+
61
64
`extension=".extension"`
62
65
: Filter the images by this list of image file extension(s), including the leading dot. Example: `extension=".avif, .jpg, .png, .webp"`.
63
66
: **Default:** unset.
@@ -75,29 +78,38 @@ Tag will accept the following attributes (**case-sensitive**) as well as the {%
75
78
: The order of the ids overrides the default `sort` attribute.
76
79
: **Default:** unset.
77
80
78
-
`limit="integer"`
79
-
: The number of images to display per page.
80
-
: **Default:**`0` (unlimited).
81
+
`month="date"`
82
+
: Filter the images using this starting time point, e.g. `month="2025-10"` for all images with dates in October 2025.
83
+
: See also: `time` attribute for further filtering range options.
84
+
: **Default:** unset.
81
85
82
86
`name="image name"`
83
87
: Filter the images by this list of image names as shown on the Images panel.
84
88
: **Default:** unset.
85
89
86
-
`offset="integer"`
87
-
: The number of images to skip.
88
-
: **Default:**`0` (only effective if `limit` is set).
89
-
90
-
`pageby="integer" (or "limit")"`
90
+
`pageby="integer" (or "limit")`
91
91
: The number of images to jump forward or back when an [older](/tags/older) or [newer](/tags/newer) link is selected. Without this attribute, pagination is not available; you will simply see `limit` images. You may specify `pageby="limit"` to allow pagination to automatically follow the value of the `limit` attribute. Note: [newer](/tags/newer) and [older](/tags/older) will paginate all content types at once.
92
92
: **Default:** unset.
93
93
94
94
`realname="author name"`
95
95
: Filter the image list so it only includes images uploaded by this list of author real names. The author names may be URL encoded (e.g. `realname="John+Smith"`) and thus could be read from the current `example.com/author/author+name` URL. Note that this attribute may incur one extra query per name, so if it is possible to use the raw author instead it will be faster.
96
96
: **Default:** unset.
97
97
98
-
`sort="sort value(s)"`
99
-
: How to sort the resulting image list. Specify a value from the ones below, followed by a space and then add either `asc` or `desc` to sort in ascending or descending order, respectively.
100
-
: **Values:**\\
98
+
`size="portrait|landscape|square|value|ratio"`
99
+
: Filter the image list so it only includes images matching certain dimensions. Use `portrait`, `landscape` or `square` to filter images with that aspect ratio. Alternatively, specify a single value to 2 decimal places of the desired aspect (e.g. 1.33 for 4:3) or a pair of values representing an aspect ratio such as `16:9`. Finally, by including just one 'side' of the aspect ratio, it's possible to filter by images with that particular dimension, e.g. `size="800:` would match all images with a width of 800px. Or `size=":1024"` would match all images with a height of 1024px.
100
+
: **Default:** unset.
101
+
102
+
`thumbnail="number"`
103
+
: Filter the image list to only include images that have a thumbnail of a certain type, or none.
104
+
: **Values:** unset (i.e. all images), `2` (images that have automatic thumbnails), `1` (images that have a custom thumbnail) or `0` (images that do not have a thumbnail).
105
+
: **Default:** unset.
106
+
107
+
`time="offset"`
108
+
: Filter the images using this time range. e.g. `time="-1 month"` would find all images with timestamps within the last month of 'now'.
109
+
: See also: `month` attribute to alter the starting point from which to apply the `time` offset.
110
+
: **Default:** unset.
111
+
112
+
{% capture svals %}
101
113
`alt`. \\
102
114
`author`. \\
103
115
`caption`. \\
@@ -111,40 +123,8 @@ Tag will accept the following attributes (**case-sensitive**) as well as the {%
: Used to group list items when separating by `break`. Possible values are lists of integers, like `2` (groups of 2 items) or `1,2` (alternate groups of 1 and 2 items).
131
-
: **Default:**`1` (actually unset).
132
-
133
-
`class="class name"`
134
-
: CSS `class` attribute to apply to the image (or to the `wraptag`, if set).
135
-
: **Default:** tag name **or** unset (see [class cross-reference](/tags/tag-attributes-cross-reference#class)).
136
-
137
-
`label="text"`
138
-
: Label prepended to item.
139
-
: **Default:** unset (but see [label cross-reference](/tags/tag-attributes-cross-reference#label) for exceptions).
140
-
141
-
`labeltag="element"`
142
-
: HTML element to wrap (markup) label, specified without brackets (e.g. `labeltag="h3"`).
143
-
: **Default:** unset.
144
-
145
-
`wraptag="tag"`
146
-
: HTML element to wrap (markup) list block, specified without brackets (e.g. `wraptag="ul"`).
147
-
: **Default:** unset (but see [wraptag cross-reference](/tags/tag-attributes-cross-reference#wraptag) for exceptions).
126
+
{% endcapture %}
127
+
{% include atts-global.html class="tag name **or** unset" offset="0" limit="0" sort="name asc" sortvals=svals %}
148
128
149
129
## Examples
150
130
@@ -259,13 +239,13 @@ All GIF images are displayed.
All images in the named categories that have thumbnails assigned to them are displayed.
242
+
All images in the named categories that have custom thumbnails assigned to them are displayed.
263
243
264
244
~~~html
265
245
<txp:imagesthumbnail="1" />
266
246
~~~
267
247
268
-
All images that have thumbnails assigned to them are displayed.
248
+
All images that have custom thumbnails assigned to them are displayed.
269
249
270
250
~~~html
271
251
<txp:imagesthumbnail="0" />
@@ -288,30 +268,13 @@ All images that do not have thumbnails assigned to them are displayed.
288
268
</txp:images>
289
269
~~~
290
270
291
-
Shows the thumbnail of each image that has an assigned thumbnail image from the 'mammals' and 'birds' categories and, beneath each, show its dimensions 'width' x 'height' along with the author of the image. Since the list has been sorted by category, the `<txp:if_different>` conditional can be used to output the category title at the top of the list of images each time it changes.
271
+
Shows the thumbnail of each image that has an assigned custom thumbnail image from the 'mammals' and 'birds' categories and, beneath each, show its dimensions 'width' x 'height' along with the author of the image. Since the list has been sorted by category, the `<txp:if_different>` conditional can be used to output the category title at the top of the list of images each time it changes.
292
272
293
273
Other tags used: [if_different](/tags/if_different), [image_info](/tags/image_info), [thumbnail](/tags/thumbnail).
294
274
295
-
### Example 3: Integration with third-party PHP resizing script (TimThumb)
296
-
297
-
[TimThumb](https://www.binarymoon.co.uk/projects/timthumb/) is a simple, flexible, PHP script that resizes images directly on your web server. [Read the TimThumb documentation](https://www.binarymoon.co.uk/2010/08/timthumb/) for basic installation instructions (also requires the GD image library). Then, for example, you can use the following:
Creates a small gallery of 6 images from the category 'gallery'. Uses the TimThumb script to proportionately resize a thumbnail version (160px wide) of the image automatically, and keep a cached version of the thumbnail for future visitors. Links the thumbnail to the original image, and lists the image author name below each thumbnail.
313
-
314
-
Other tags used: [image_author](/tags/image_author), [image_info](/tags/image_info), [image_url](/tags/image_url), [site_url](/tags/site_url).
277
+
TBD.
315
278
316
279
### Example 4: Using offset and limit for news pages
317
280
@@ -331,12 +294,16 @@ And then later on you could drop in…
331
294
</txp:images>
332
295
~~~
333
296
334
-
…to display the three remaining supporting images as thumbnails in a gallery, all taken from the Article Image field.
297
+
…to skip the first and display the three remaining supporting images as thumbnails in a gallery, all taken from the Article Image field.
335
298
336
299
Other tags used: [article_image](/tags/article_image), [thumbnail](/tags/thumbnail).
337
300
338
301
## Genealogy
339
302
303
+
### Version 4.9.0
304
+
305
+
`thumbnail` attribute extended to automatic thumbs (`2`).
0 commit comments