Use the :rst:`.. image-grid::` directive for creating
`image grid <{filename}/css/components.rst#image-grid>`_. Directive contents
are a list of image URLs, blank lines separate grid rows. The plugin
-automatically extracts size information and scales the images accordingly. If
-the image has EXIF information, properties such as aperture, shutter speed and
-ISO are extracted and displayed in the caption on hover. The images are also
-made clickable, the target is the image file itself.
+automatically extracts size information and scales the images accordingly. The images are made clickable, the target is the image file itself.
+
+If the image has EXIF information, properties such as aperture, shutter speed
+and ISO are extracted and displayed in the caption on hover. It's also possible
+to provide a custom title --- everything after the filename will be taken as
+a title. If you use ``..`` as a title (a reST comment), it will disable EXIF
+extraction and no title will be shown.
Example of a two-row image grid is below. Sorry for reusing the same two images
all over (I'm making it easier for myself); if you want to see a live example
{static}/ship.jpg
{static}/flowers.jpg
- {static}/flowers.jpg
- {static}/ship.jpg
+ {static}/flowers.jpg A custom title
+ {static}/ship.jpg ..
.. image-grid::
{static}/static/ship.jpg
{static}/static/flowers.jpg
- {static}/static/flowers.jpg
- {static}/static/ship.jpg
+ {static}/static/flowers.jpg A custom title
+ {static}/static/ship.jpg ..
.. note-warning::
rows = [[]]
total_widths = [0]
- for uri in self.content:
+ for uri_caption in self.content:
# New line, calculating width from 0 again
- if not uri:
+ if not uri_caption:
rows.append([])
total_widths.append(0)
continue
+ uri, _, caption = uri_caption.partition(' ')
+
# Open the files and calculate the overall width
# Support both {filename} (3.7.1) and {static} (3.8) placeholders
file = os.path.join(os.getcwd(), settings['PATH'])
absuri = uri.format(filename=file, static=file)
im = PIL.Image.open(absuri)
- # Get EXIF info, if it's there
- if hasattr(im, '_getexif') and im._getexif() is not None:
+ # If no caption provided, get EXIF info, if it's there
+ if not caption and hasattr(im, '_getexif') and im._getexif() is not None:
exif = {
PIL.ExifTags.TAGS[k]: v
for k, v in im._getexif().items()
caption += ["ISO {}".format(exif['ISOSpeedRatings'])]
caption = ', '.join(caption)
- # It's not (e.g. a PNG file), empty caption
- else: caption = ""
+ # If the caption is `..`, it's meant to be explicitly disabled
+ if caption == '..': caption = ''
rel_width = float(im.width)/im.height
total_widths[-1] += rel_width
<a href="./ship.jpg"><img src="./ship.jpg" style="height: 200px" /></a>
<figcaption>A Ship</figcaption>
</figure>
-<p>Image grid:</p>
+<p>Image grid, second row with a custom title and no title:</p>
<div class="m-imagegrid m-container-inflate">
<div>
<figure style="width: 69.127%">
</div>
<div>
<figure style="width: 30.873%">
-<a href="./flowers.jpg"><img src="./flowers.jpg" /><figcaption>F2.8, 1/1600 s, ISO 100</figcaption>
+<a href="./flowers.jpg"><img src="./flowers.jpg" /><figcaption>A custom title</figcaption>
</a>
</figure>
<figure style="width: 69.127%">
-<a href="./ship.jpg"><img src="./ship.jpg" /><figcaption>F9.0, 1/250 s, ISO 100</figcaption>
+<a href="./ship.jpg"><img src="./ship.jpg" /><div>
+</div>
</a>
</figure>
</div>
A Ship
-Image grid:
+Image grid, second row with a custom title and no title:
.. image-grid::
{static}/ship.jpg
{static}/flowers.jpg
- {static}/flowers.jpg
- {static}/ship.jpg
+ {static}/flowers.jpg A custom title
+ {static}/ship.jpg ..
Image grid with a PNG file, JPEG with sparse EXIF data, JPEG with no EXIF data
and long exposure (>1 second):