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
* 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>
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.
0 commit comments