Add "Show Description" to Image Gallery

[Don Presant]

I like the image gallery Mahara 1.4 a lot. It's a great way to provide visual evidence, either as a sequence or as a thumbnail index.

But I notice that the "Show Description" option available on single images is not available in the Gallery. To see descriptions of individual images, you have to click on each image and open it in a new window, which is not very usable.

I think curating images with brief descriptions is very valuable, and showing curated images in sequence (ie slideshow) can build a compelling story.

What are the difficulties/downsides of adding this capability to the Image Gallery?

I can think of one potential difficulty: what to do with the other main option: thumbnails. Descriptions would look very odd attached to these. But I think a compromise could be found for this, such as clipping the description after a set amount of characters.

I'm hoping it would be relatively straightforward to accomplish. Feedback welcome

[shanen (shane-nuessler-canberra)]

+1 to this idea - we would love to see this implemented here at the University of Canberra and agree with Don's design/pedagogical rationale.

[John Iglar (j-iglar)]

+1

Our Art teacher in particular would find this very very useful.

[Kristina Hoeppner (kris-hoeppner)]

Hello Shanen and John,

If you want Launchpad to automatically push this higher up in the priority list, please click the "Does this bug affect you" link at the top of the page below the title. Otherwise, it is easier to lose.

Cheers
Kristina

[Melissa Newman (melissa-l)]

I just fixed this on my local version.

The following files need to be changed:

1. artefact/file/blocktype/gallery/theme/raw/slideshow.tpl
2. artifact/file/blocktype/gallery/theme/raw/squarethumbs.tpl
3. artifact/file/blocktype/gallery/theme/raw/thumbnails.tpl

New code should be:

<figure style="float:left;{if $frame} padding: 3px;{/if}">
        <a rel="{$image.slimbox2}" href="{$image.link}" title="{$image.title}" target="_blank">
            <img src="{$image.source}" alt="{$image.description}" title="{$image.title}" {if $frame}class="frame"{/if} />
        </a>
        <figcaption>{$image.description}</figcaption>
</figure>

The fix is generally the same with all three files. You are basically changing the <span> to be a figure, then putting the {$image.description} between the <figcaption>.

The fix will take less than 5 minutes to do.

[Robert Lyon (robertl-9)]

I've taken what Melissa has provided and created a patch
https://reviews.mahara.org/#/c/2854/

I was unable to use the <figure> and <figcaption> tags as they are not compatible with IE 8 so used <div>

I added a block instance config option to allow one to choose to show the descriptions or not.

[Steven (stevens-q)]

=== Bug #833867 Add "Show Description" to Image Gallery ===

=== Test Plan ===
[✔] 1. CONFIRM that gallery images display a description for an image that has a description added to an image in an image gallery added to a page.
 2. CONFIRM that the description display functionality works for all styles of galleries as listed below
 [✔] a. Thumbnails
 [✔] b. Thumbnails (square)
 [✔] c. Slide show

=== Test Results ===
Descriptions are displayed in all gallery styles when:
 a. an image has a description attached to it
 b. the "show description" check box is ticked

Catalyst QA Approved ✔

[Aaron Wells (u-aaronw)]

Actually in Mahara 1.9 we've dropped support for IE8, so that's not a concern. However, I think <div> is a more appropriate tag than <figure>, because semantically <figure> is supposed to represent self-contained content that's "related to the main flow, [but] its position is independent of the main flow" ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure ), like a picture set alongside some text in a book.

In the case of our gallery blocks, the image *is* the main flow, so <figure> is not semantically appropriate, and the generic <div> is better.

[Mahara Bot (dev-mahara)]

Reviewed: https://reviews.mahara.org/2854
Committed: http://gitorious.org/mahara/mahara/commit/f7807a1876f4d3f5d3c1ac982043e7bd60cf38a0
Submitter: Aaron Wells (<email address hidden>)
Branch: master

commit f7807a1876f4d3f5d3c1ac982043e7bd60cf38a0
Author: Robert Lyon <email address hidden>
Date: Tue Dec 31 12:39:03 2013 +1300

Show description text below images in image gallery (Bug #833867)

Taking Melissa Newman's code snippets from bug and adapting it for core
- <figure> and <figcaption> aren't semantically accurate in this context, so using <div> instead
- Adding a block instance config checkbox setting to allow to turn it on/off

Change-Id: I63ea2ccda0de2243782cc232e3ecb352ecd98d95
Signed-off-by: Robert Lyon <email address hidden>