nliautaud/pico-pages-images

A plugin to get images corresponding to the current page in Pico CMS

Pico Pages Images

Find images corresponding to the current page in Pico CMS.

Installation

Copy PicoPagesImages.php to the plugins/ directory of your Pico Project.

Usage

Images are listed in the Twig variable {{ images }} accessible in your theme.

Example of using a loop :

{% for image in images %}
    <img src="{{ image.url }}" alt="{{ image.name }}" {{ image.size }}>
{% endfor %}

An image corresponding to the page http://mysite.com/foo/bar may contain the following data :

Data	Example
image.url	http://mysite.com/images/foo/bar/bar-image_01.jpg
image.path	images/foo/bar/
image.name	bar-image_01
image.ext	jpg
image.width	800
image.height	600
image.size	width="800" height="600"
image.meta	See below

Files location

Images are listed from a directory reproducting the pages path (in images/ next to content by default).

content/
    foo/
        bar.md
images/
    foo/
        foo-image_01.jpg
        foo-image_02.png
        bar/
            bar-image_01.jpg
            bar-image_02.gif

You can specify a different location in the Pico config file with the setting images_path :

images_path: images/

If you want to use your content/ directory as the images path you must also add the following to your .htaccess file :

# Allow loading images
RewriteRule ^.*\.(gif|jpe?g|png|webp)$ - [NC,L]

Files metadata

You can add any metadata to an image by creating a .meta.yml YAML file with the same name next to it.

images/
    bar-image_01.jpg
    bar-image_01.jpg.meta.yml

You could for example store titles, dates and descriptions to be used as image captions in your theme.

title: Fido Playing with his Bone
year: 2018
description: The other day, Fido got a new bone, and he became really captivated by it.

Example loop with metadata captions :

{% for image in images %}
    <img src="{{ image.url }}" alt="{{ image.name }}" {{ image.size }}>
    {% if image.meta %}
        <p>{{ image.meta.title }} ({{ image.meta.year }})<br />{{ image.meta.description }}</p>
    {% endif %}
{% endfor %}

pico-pages-images's Issues

Security: Plugin opens arbitrary files outside the images path

pico-pages-images/PicoPagesImages.php

Line 34 in fa486f9

$this->path = $this->format($url);

Please keep in mind that $url is the raw user input and not validated in any way. Users might do requests like http://example.com/pico/../../../../../../../../some/sensitive/file/on/your/server ("base dir breakouts"), resulting in accessing files you don't want to be accessed. You should rather rely on the $requestFile variable of the onRequestFile event.

Notice: Undefined offset: 4 in D:\xampp\htdocs\pico\plugins\PicoPagesImages.php on line 85

The plugin works so far quite well. But I get the following error with each picture in the list.

Notice: Undefined offset: 4 in D:\xampp\htdocs\pico\plugins\PicoPagesImages.php on line 85

Various possible PHP errors/warnings

pico-pages-images/PicoPagesImages.php

Lines 92 to 97 in fa486f9

	$images = glob($images_path . $pattern, GLOB_BRACE);
	foreach( $images as $path )
	{
	list(, $basename, $ext, $filename) = array_values(pathinfo($path));
	list($width, $height, $type, $size, $mime) = getimagesize($path);

• glob() (line 92) might return FALSE, resulting in a PHP Warning: Invalid argument supplied for foreach() on line 94.
• pathinfo() (line 96) doesn't guarantee to return the array in the order and form you expect it; the code might result in a PHP Notice: Undefined offset or might assign unexpected values to your variables.
• getimagesize() (line 97) doesn't guarantee to return a array with >= 5 items. Just two items are actually guaranteed (resulting in multiple PHP Notice: Undefined offset). The function might even return FALSE.