yellow-picture

Extension for use the picture tag with Datenstrom Yellow

How to use the picture extension

• You have to change ImageUploadWidthMax and ImageUploadHeightMax to the double from that you need. (ImageUploadWidthMax: 2600 Image | UploadHeightMax: 2600)
• The image extension is required even if only the picture extension is used.
• Upload the image to your website as usual.
• Replace image with picture in the shortcut.
• Save your post.

Examples

If image extension is installed and you use :

[image pizza02.jpg "your alt text" imageclass]

You have to change image to picture:

[picture pizza02.jpg "your alt text" imageclass]

This will be the result:

<picture>
    <source srcset="/media/images/retina-desktop-pizza02.jpg" media="(min-width: 576px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 576px) and (min-resolution: 192dpi)">
    <source srcset="/media/images/desktop-pizza02.jpg" media="(min-width: 576px)">
    <source srcset="/media/images/mobile-pizza02.jpg" media="(min-width: 0px)">
    <img src="/media/images/desktop-pizza02.jpg" width="2600" height="1950" alt="your alt text" title="your alt text" class="imageclass" />
</picture>

Additional Information and my thoughts

This extension is still very experimental and not yet properly developed!

• three image files are created. retina-desktop-pizza02.jpg, desktop-pizza02.jpg and mobile-pizza02.jpg.
• current mobile phones all use retina displays. There is no need for small images.
• all devices larger than mobile phones most use wifi. Bandwidth is usually not a problem here.
• 576px is the smallest breakpoint of Bootstrap. This value can be changed in Yellow-system.ini (PictureMobileBreakpoint: 576)
• only .jpg will be sharpen.

Installation

Download extension and copy zip file into your system/extensions folder. Right click if you use Safari.

Developer

PetersOtto. Get help