Publ: Test of image renditions

Last updated:
Source file: /home/fluffy/dev.beesbuzz.biz/tests/content/images/image renditions.md
Image rendition tests

Image rendition tests

External images

External image with width set

IMG_0377.jpg

![](//publ.beesbuzz.biz/static/images/IMG_0377.jpg{250} "so smol")

External image with height set

IMG_0377.jpg

![](//publ.beesbuzz.biz/static/images/IMG_0377.jpg{height=250} "less smol")

External image with width and height set, with different scaling modes:

![{320,320,div_class="gallery",gallery_id="sizing"}](
//publ.beesbuzz.biz/static/images/IMG_0377.jpg "fit"
| //publ.beesbuzz.biz/static/images/IMG_0377.jpg{resize="fill"} "fill"
| //publ.beesbuzz.biz/static/images/IMG_0377.jpg{resize="stretch"} "stretch")

Image using static path

IMG_0377.jpg

![{640,link='@images/IMG_0377.jpg'}](@images/IMG_0377.jpg)

Force absolute URLs

IMG_0377.jpgIMG_0377.jpg

![{640,320,absolute=True}](//publ.beesbuzz.biz/static/images/IMG_0377.jpg | @images/IMG_0377.jpg)

Local images

alt text

![alt text](rawr.jpg "test single image")

alt textalt textalt text

![alt text](
rawr.jpg{width=240} "test lightbox" |
rawr.jpg{width=120} |
rawr.jpg "image 3"
)

alt text

![alt text](rawr.jpg "test single image")

alt text

![alt text](rawr.jpg{120,crop=(0,0,240,352)} "test crop (left half of rawr.jpg, scaled down)")

rawr.jpg

![](rawr.jpg{gallery_id='crops',crop=(107,72,89,82)} "just rawr's eye")

croptest.png

![](croptest.png{gallery_id='crops',crop=(462,389,183,133),fullsize_crop=(119,142,343,247)}
    "different crops for thumbnail as fullsize")

croptest.pngcroptest.png

![{100,100}](
  croptest.png{crop='119,142,343,247',resize='fit'} "fit crop"
| croptest.png{crop='119,142,343,247',resize='fill'} "fill crop")

Inline image with a gallery class:

rawr.jpg
should still be a block element

Inline image with no gallery class: rawr.jpg should be inline

Paragraph-level image set without a gallery class:

rawr.jpgrawr.jpgrawr.jpg

should still be in a paragraph

such gallerysuch gallerysuch gallerysuch gallery

![such gallery{255,gallery_id="rawry"}](rawr.jpg | rawr.jpg{fullscreen_width=50} "Rawr!" | rawr.jpg{100}
| //publ.beesbuzz.biz/static/images/IMG_0377.jpg)

PNG transparency

Base image:

notsmiley.png ![](notsmiley.png)

converted to jpeg, no background:

notsmiley.png ![](notsmiley.png{format="jpg"})

converted to jpeg, black background:

notsmiley.png ![](notsmiley.png{format="jpg",background="black"})

converted to jpeg, red background using a tuple:

notsmiley.png ![](notsmiley.png{format="jpg",background=(255,0,0)})

converted to jpeg, white background using hex code:

notsmiley.png ![](notsmiley.png{format="jpg",background='#ccc'})

converted to jpeg, cyan background, multiple qualities on the spectrum:

notsmiley.pngnotsmiley.pngnotsmiley.pngnotsmiley.png

![{256,background='cyan',format='jpg'}](
notsmiley.png{quality=1} "quality 1"
| notsmiley.png{quality=50} "quality 50"
| notsmiley.png{quality=99} "quality 99"
| notsmiley.png "quality default"
)

Quantization

Landscape_4.jpgLandscape_4.jpgLandscape_4.jpgLandscape_4.jpgLandscape_4.jpgLandscape_4.jpgLandscape_4.jpgLandscape_4.jpgLandscape_4.jpg

![{256,256}](Landscape_4.jpg{format='png'} "png24"
| Landscape_4.jpg{format='png',quantize=0} "png8 0"
| Landscape_4.jpg{format='png',quantize=128} "png8 128"
| Landscape_4.jpg{format='png',quantize=32} "png8 32"
| Landscape_4.jpg{format='png',quantize=4} "png8 4"
| Landscape_4.jpg{format='png',quantize=2} "png8 2"
| Landscape_4.jpg{format='gif'} "gif8"
)

Scale algorithms

Landscape_1.jpgLandscape_1.jpgLandscape_1.jpgLandscape_1.jpgLandscape_1.jpgLandscape_1.jpgLandscape_1.jpgError loading image Landscape_1.jpg{scale_filter=‘xyzzy’} "xyzzy": Invalid scale_filter value ‘xyzzy’

![{512,512,format='png'}](Landscape_1.jpg "default"
| Landscape_1.jpg{scale_filter='nearest'} "nearest"
| Landscape_1.jpg{scale_filter='box'} "box"
| Landscape_1.jpg{scale_filter='bilinear'} "bilinear"
| Landscape_1.jpg{scale_filter='hamming'} "hamming"
| Landscape_1.jpg{scale_filter='bicubic'} "bicubic"
| Landscape_1.jpg{scale_filter='lanczos'} "lanczos"
| Landscape_1.jpg{scale_filter='xyzzy'} "xyzzy"
)

Broken/parse failures

  • ![broken image](missingfile.jpg)

    Image not found: missingfile.jpg

  • ![broken spec](foo{123[]})

    Couldn’t parse image spec: foo{123[]} invalid syntax (<unknown>, line 1)

  • ![broken spec](poiu{100} foo{200})

    Couldn’t parse image spec: poiu{100} foo{200} invalid syntax (<unknown>, line 1)

  • ![broken imageset](rawr.jpg rawr.jpg)

    Image not found: rawr.jpg rawr.jpg (Did you forget a |?)

  • ![broken imageset](rawr.jpg "title rawr" rawr.jpg "title 2")

    Image not found: rawr.jpg "title rawr" rawr.jpg (Did you forget a |?)

  • ![partially broken image set](rawr.jpg "rawr!" | missingfile.jpg "missing")

    partially broken image setImage not found: missingfile.jpg

  • ![too many posargs](rawr.jpg{2,3,4})

    Couldn’t parse image spec: rawr.jpg{2,3,4} Expected at most 2 positional args but 3 were given

  • ![mulitple widths](rawr.jpg{100,width=200})

    Couldn’t parse image spec: rawr.jpg{100,width=200} Got multiple values for width