Just a quick note this week. The JavaScript add-on Flickity is fun, but I don’t always get what I want from it immediately. Here’s the key I’ve deduced: everything Flickity is applied to needs to have accurate size beforehand. I’ve encountered two situations where that was not the case.

The first, explained in my MLA + Flickity post, was when max-width: 100% set on images was causing anything not visible at the beginning of the slideshow to be blank – or, more accurately, zero width.

More recently, I was trying to create a slideshow in a page where most of the content accordion-folds up at mobile size. No applying Flickity with HTML there! If I did, I got one of two outcomes: if I set a height on my images, they all showed up stacked on top of each other. If not, the whole thing was the height of the combined top and bottom padding of the container. I needed to add a distinguishing class, and then set the accordioning code to check whether a panel it had just opened had that class. If so, apply Flickity from the JavaScript at that point. I’ve had no trouble with repeated opening and closing of the accordion.

Edit 9/30: In fact yet a third issue has arisen: Flickity not knowing the height of the slideshow because it’s being applied before the page content is fully loaded. $(document).ready wasn’t enough; I needed $(window).load(function () { /*call Flickity here*/ });
[Edit 12/12/16: .load was deprecated many versions of jQuery ago and finally removed in v3. Try $(window).on("load", function(){});]

Edit 2/23/16: I don’t know the reason for the conflict as of this writing, but I’ve since discovered that Flickity does not get along with CSS columns. With overflow: hidden; set on .flickity-viewport no images show, and with it removed, some images show outside of the viewport.

I hope this helps someone!

You Must Be This Tall to Ride from Eric Mesa via Flickr.

The post Troubleshooting Flickity: one note appeared first on rweber.net.

Edit: Since I have made so many additions to Twenty Fifteen, I thought it would be useful to assemble them into a single child theme. You can see the Fancy Fifteen code on GitHub, or look at all posts here tagged fancyfifteen.

The goal here: a front page carousel that could be easily updated, with just half a dozen or so selections from the most recent images added to the site. The pictures would be human-chosen. The carousel needed to be responsive and easy to navigate (for everyone; i.e., accessible), and ideally the whole shebang could coordinate with a filterable photo gallery to be created for the same site.

Enter Media Library Assistant. There are two functions of MLA that are important for this use: the addition of taxonomies to media library items directly, and the expansion of WordPress’s gallery shortcode into mla-gallery, with dynamic selection of media items by taxonomy, user-defined templates (as in direct control of the gallery’s HTML structure), and many other settings.

I figured I could apply a nice jQuery carousel to an MLA gallery of the correct form, and after looking around, Flickity seemed like the best candidate (with the implicit recommendation of CSS-Tricks). It is responsive, accessible, well-adapted to mouse/trackpad, keyboard, and touch, and styleable from the theme’s CSS file. After one significant (but easily remedied) hiccup we were in business!

Here’s how to set it up. There are some places where I made arbitrary decisions (such as downloading flickity.css but using a CDN for the .js file), but it should be easy to figure out how to make different ones.

For specificity, we’ll make a child theme to add this functionality to Twenty Fifteen. For now you can see this on my WordPress test site but there is no guarantee that will continue to be true indefinitely.

style.css:

Many themes set max-width: 100% on images for responsiveness purposes; it keeps them from exploding out of their housings when the browser gets smaller. However, you have to override it here or the images you can’t originally see may collapse to width 0. That was the hiccup I referred to – why is there blank white space when I click through the carousel?!? The last section highlights the gallery if you tab to it so you know you’ve tabbed to it; it’s straight off the Flickity website. I set a height of 200px; you can let it be determined by the images by removing that line of CSS and the line setGallerySize: false in carousel.js, below.

carousel.js:

functions.php:

Just put flickity.css, carousel.js, functions.php, and style.css (for your child theme) all into a folder called twenty-fifteen-flickity, zip it up, and upload it.

In Settings -> Media Library Assistant -> MLA Gallery (the middle tab), scroll to the bottom and create a template called carousel. Fill in the following boxes:
Open: <div id='carousel-gallery' class='carousel-no-js'>
Item: <div class='carousel-item'>
[+link+]
</div>
Close: </div>

In Media -> Assistant, tag all images for the slideshow with “featured” (or something else, and then change “featured” in the shortcode below).
Where you want the carousel, place the shortcode
[mla_gallery attachment_tag=featured mla_style="none" mla_markup="carousel" size=medium link=full]

Some notes:
– Most everything is adjustable from the CSS file, the MLA shortcode options, or the Flickity options.
– You’ll have to add appropriate styling for responsiveness, but no differently from usual.
– For graceful degradation the images start with the class carousel-no-js and carousel.js replaces that with carousel-js-on; I haven’t styled .carousel-no-js at all and wouldn’t count this as finished without doing so, but how to style it is a matter of taste.
– I threw a lightbox plugin onto the test site as well (Responsive Lightbox by dfactory) and it works without a squawk.

The post Gilding the Gallery: MLA + Flickity appeared first on rweber.net.