Slide title & caption below slide image

[awbauer]

From Ron: ENHC0014649

I'd like to explore effort it would take to add another option to BU Slideshow plugin to put the photo headline and caption UNDER the image, rather than overlaying those elements on top of the image.

[gjensen01]

This is especially an issue for responsive. The caption always needs to float below the image on the mobile view. Currently, that takes a lot of CSS overrides to accomplish.

[ashleykolodziej]

+1 for this issue. You can see the caption styles here: http://nm.cms-devl.bu.edu/kitchensink/images/slideshow/ (second slideshow, first slide) - try giving it a resize for mobile.

So a couple of other things I see here - you can put in any amount of text in the caption you want, which means you could put in a really, really, really long caption, have the slideshow size to that container, and then have the next caption be only a sentence or so, pushing controls way down the page. A sane(ish) character limit might be a good idea to help mitigate that.

On mobile - if the caption is on top of the photo on mobile, it will almost always cover the entire photo, which is why it'd be best to have the caption below the image by default. Same with title - so making this change would help us out over here in ID quite a bit.

[dg4220]

A little late here but I've been doing some work on this recently. Take a look at https://github.com/bu-ist/bu-slideshow/tree/add-cap-below-slide-cssjs and let me know what you think about the approach.

I haven't added text limits or set the caption default but the caption position seems to be working and I'm able to keep navigation positioned with the image.

Demo here http://djgannon.cms-devl.bu.edu/singlecell/carp-quiz/

[dg4220]

Quick update same example and branch as above. I've set the below slide caption position as the default when adding a slide caption. I've also added functionality that positions all slide captions below the image when the screen is below an arbitrary width (currently 400px). Adding, I'm not sure if that's necessarily the functionality we're looking for but it seems a good way to solve the usability issue.