Skip to content

Commit f4d7507

Browse files
Document images test view (#1992)
* document images test view * Apply suggestions from code review Co-authored-by: Steve Piercy <web@stevepiercy.com> * minor suggestions * Apply suggestions from code review Co-authored-by: Steve Piercy <web@stevepiercy.com> * Update docs/classic-ui/images.md * add images * Apply suggestions from code review that @acsr resolved without comment --------- Co-authored-by: Steve Piercy <web@stevepiercy.com>
1 parent 486bd24 commit f4d7507

File tree

5 files changed

+85
-0
lines changed

5 files changed

+85
-0
lines changed
111 KB
Loading
260 KB
Loading
54.1 KB
Loading
243 KB
Loading

docs/classic-ui/images.md

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,91 @@ The possible options for `mode` are listed below, where the default option is `s
272272

273273
Deprecated option names: `scale-crop-to-fill`, `up`.
274274

275+
### Images test rendering
276+
277+
Plone's Classic UI includes special demonstration views that render ready-made examples of image handling and responsive image components using your site's active theme.
278+
These views help developers verify image scaling, `srcset` generation, and explore available image optimization patterns.
279+
These views work on image content types, including images and documents with images.
280+
281+
Append the view name `/@@images-test` to an image URL, optionally followed by an anchor, such as `#srcset`, for specific sections.
282+
283+
For example, on the Classic UI demo site, the URL would be https://classic.demo.plone.org/en/demo/an-image.jpg/@@images-test#srcset.
284+
285+
````{card}
286+
```{image} /_static/images-test/images-test.png
287+
:alt: Images test view
288+
:target: /_static/images-test/images-test.png
289+
```
290+
+++
291+
_Images test view_
292+
````
293+
294+
The view displays the following examples, all rendered with the current settings in `/@@imaging-controlpanel`.
295+
296+
Standard image scales
297+
: Shows the Classic UI Plone scales with different modes:
298+
- Mini
299+
- Mini mode=cover
300+
- Mini mode=contain
301+
302+
````{card}
303+
```{image} /_static/images-test/examples.png
304+
:alt: Example standard image scales
305+
:target: /_static/images-test/examples.png
306+
```
307+
+++
308+
_Example standard image scales_
309+
````
310+
311+
Picture tags
312+
: Demonstrates the use of `<picture>` elements with configured picture variants.
313+
If the site runs on Plone 5.2 or earlier, a regular `<img>` tag is rendered instead.
314+
315+
Picture Tag Large
316+
: uses the configured `large` picture variant
317+
318+
Picture Tag Medium
319+
: uses the `medium` variant with multiple `<source>` elements and media queries for art direction
320+
321+
Picture Tag Small
322+
: uses the `small` variant
323+
324+
Picture Tag Small with title/alt
325+
: same as the previous, but with `title` and `alt` attributes explicitly set
326+
327+
````{card}
328+
```{image} /_static/images-test/picture-tags.png
329+
:alt: Picture tags
330+
:target: /_static/images-test/picture-tags.png
331+
```
332+
+++
333+
_Picture tags_
334+
````
335+
336+
`img` with `srcset` attributes
337+
: Shows how to use Plone’s `@@images` view to generate a full responsive `<img>` tag with a complete `srcset`.
338+
The browser automatically selects the most appropriate scale based on the available space and device pixel ratio.
339+
The example includes the required `sizes` attribute and demonstrates the resulting HTML output.
340+
341+
```{seealso}
342+
{ref}`classic-ui-images-responsive-image-support`
343+
```
344+
345+
````{card}
346+
```{image} /_static/images-test/image-srcset.png
347+
:alt: img with srcset attributes
348+
:target: /_static/images-test/image-srcset.png
349+
```
350+
+++
351+
_img with srcset attributes_
352+
````
353+
354+
```{seealso}
355+
{ref}`classic-ui-images-responsive-image-support`
356+
```
357+
358+
This view is especially valuable for theme developers who need to verify that responsive images, picture variants, and `srcset` functionality are correctly styled and behave as expected across devices and Plone versions.
359+
275360

276361
(classic-ui-images-permissions-label)=
277362

0 commit comments

Comments
 (0)