So suppose you want to fix the sidebar on a Twenty Fifteen WordPress site, because most of the time it’s going to be short enough to fit entirely on the screen. Maybe it’s not always going to be, or maybe it’s just a little too long so you want to have it scrollable but not tied to the scrolling of the rest of the page. You can do that. Actually, it’s pretty easy if you aren’t concerned with aesthetics: position:fixed; height:100%; overflow:scroll; on the sidebar should cover you. However, Internet Explorer (even 11) will put a nice wide scrollbar down the edge of your sidebar whether or not scrolling is happening or even possible. Here we’ll talk about making that not happen.

The key is a lightweight jQuery plugin called jQuery-slimScroll. It adds a lovely and styleable scrollbar only as necessary, and allows you to avoid overflow:scroll entirely (which is the source of the IE scrollbar).

In your wp-content/themes/fancyfifteen folder you’ll need 4 files: functions.php, style.css, aqa-pretty-scrolling.js, and header.php (the scrolling requires adding a wrapper to the sidebar content, which in Twenty Fifteen is in the header file).

As will now be standard, you can get the code for all of my Twenty Fifteen modifications in one big (but separable) Twenty Fifteen child theme on GitHub.

header.php:

The only thing in header.php that is different is the div with id “pretty-scroll”, just inside the div with id “sidebar”. Everything else is exactly as in Twenty Fifteen, which is why I haven’t bothered making this very large.

functions.php:

This is also very standard: enqueue your parent and child stylesheets, then enqueue jQuery-slimScroll and our JavaScript program that makes use of it. These enqueuings could be combined.

style.css:

This is simple but getting more interesting. The sidebar isn’t along the side until the screen gets sufficiently large, hence the media query. If a visitor has JavaScript turned off, they will get a fixed sidebar with overflow: scroll, trading an ugly scrollbar for a usable sidebar. Otherwise, the code will tack on the hide-scroll class, erasing the scrollbar. The rest of the styles bring the widgets closer together; if you are not accordion-folding them you may not want them closer, but then again if you’re not accordioning them what are the odds you have few enough to want to fix your sidebar?

aqa-pretty-scrolling.js:

Finally, we have the little bit of code that sets everything up and activates jQuery-slimScroll. If the sidebar is fixed (this seemed an easier indicator to use than sizes), the sidebar and pretty-scroll div get overflow:hidden on them, and then slimScroll scrolls pretty-scroll within sidebar. If you have trouble with bits of your sidebar not scrolling with the rest, uncomment the line that sets position: relative on pretty-scroll. For a quick and easy style match, set the scrollbar color to one of your site’s main colors. It will be translucent, so a darker one will likely look better.

There you have it. It took a little while for me to get this set up so there was no scrollbar visible on IE, but now that I have a template I’ll be using this whenever I have a piece of a page that scrolls independently of the rest of the page.

Complicated scroll from Pixabay

The post Conquering scrollbars appeared first on rweber.net.

More additions to Twenty Fifteen! Why not gather these all together into a single child theme? Well, why not? You can see it all on GitHub, though I haven’t yet caught up with myself.

I haven’t said what we’re doing yet. So you have a website with Twenty Fifteen, and you don’t have too much in your sidebar – the menu, which isn’t too long, and maybe a few widgets. What if you made the sidebar collapse down nice and short so you could fix it in place? It is wonderfully simple to do.

You’ll need a folder in your wp-content/themes/ directory called “fancyfifteen” to use these files as-is. It will have three files in it: functions.php, aqa-sidebar-accordion.js, and style.css.

functions.php:

There are three chunks of code in functions.php: the first brings in the stylesheets for both Twenty Fifteen and Fancy Fifteen, the second adds HTML to widget titles that we will later use for drop-down/collapse-up arrows, and the third brings in the JavaScript that actually does the accordioning. You can leave out the middle section if you don’t want the arrows.

aqa-sidebar-accordion.js:

Progressive enhancement! If the site visitor has JavaScript turned off, all widgets will be open. Otherwise they will all close up. The commented-out line would then reopen the first one, provided it has a title; that seemed to be the most efficient way to have the first widget auto-open. The way I wrote this JavaScript, any widget without a title won’t collapse (ever). You could use that fact to have, say, a search bar that is always visible.

For style.css, visit GitHub. There’s nothing tremendously interesting there – it just mimics the built-in support for drop-down submenus. If you decided to leave out the middle chunk of functions.php and forgo arrows, you only need the top comment block of style.css — but you definitely need that! It’s got the information WordPress needs to understand the theme and its relationship to Twenty Fifteen.

Next time we’ll discuss actually fixing the sidebar in place. The trick is to allow scrolling if the contents are longer than the page, but avoid the economy-sized scrollbar Internet Explorer slaps on anything styled overflow:scroll.

Accordion-playing bird from Pixabay.

The post Accordion Widgets for Twenty Fifteen appeared first on rweber.net.

Last time we set up the PHP (slash HTML, slash CSS) to dynamically generate Media Library Assistant gallery shortcodes and an album menu. Everything works without any JavaScript. Today we’re going to add JavaScript, with jQuery, to do three things.

1. Hide the album menu under a button, a la a mobile menu. This will prevent the problem of a menu that’s so large the gallery is four pages down.
2. Use AJAX to reload only the portion of the page containing the gallery. This will make for a smoother experience.
3. Push each new URL into the browser history, so that the back button works and individual albums can be bookmarked. It’s always a source of an annoyed “really?” when I try to go back to a page I bookmarked and find that the address leads to only the most general version of the page, not where I actually was.

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.

Here’s a pair of screenshots. You can’t tell in this because I didn’t make a ton of categories, but the menu will also drop over the photos. Again, at least for the time being, you can see and interact with this on my testing site.

All three steps are actually handled in one short jQuery-reliant JavaScript file.

Call it gallery-menu.js, put the following into it, and save it in your child theme folder:

Line 2 is sort of pre-Step-1. It’s for graceful degradation – it adds a class so we can style the menu and gallery separately depending on whether JavaScript is enabled or not.
Lines 3-6 control Step 1. They hide the menu to begin with and activate the button to show and hide it.

The rest is Steps 2 and 3. If you click a link within the menu, JS swoops in and stops the browser from following it (line 9). Then we construct the relevant piece of the desired URL from the link, using the data-slug attribute we added into the PHP last time, and furthermore tack on the specific div that holds the images (lines 10-11). Line 12 does the AJAX, Line 13 re-hides the menu as it would be were the page reloaded, and Line 14 pushes the new URL into the browser history.

And this is why hearts fly out of my eyes sometimes when I work with jQuery.

Edit 3 May: To get my lightbox plugin to apply to this gallery I had use JS to add a rel attribute to each link. The AJAX – or maybe simply do_shortcode – seemed to prevent the automatic application of the lightbox to the image links (which wasn’t the case with the Flickity slideshow). What you need will depend on what plugin you use, of course, but for WP Lightbox 2 I had to add $( '#current-album a' ).attr( 'rel', 'lightbox[album]' ); at line 7 and as a post-AJAX function to the .load call (see my notes on .load syntax).

Are we there yet?

Of course not. We have bonus steps to this part of the program as well.

Tack this onto the end of your functions.php file:

Insert this CSS just before the media queries in style.css:

And finally, insert this CSS inside the max-width: 43.75em media query (not the portrait one):

The styling could be way better, so play with it till you lose your mind.

The post Gilding the Gallery 3: Ajaxifying the filterable gallery appeared first on rweber.net.

In the previous installment of this series, we dynamically generated a gallery with the WordPress plugin Media Library Assistant and applied the JavaScript plugin Flickity to turn the gallery into a nice carousel. Today we’re going to tackle the real reason I wanted to use MLA for that carousel: to coordinate with a set of albums that can be easily navigated by the site visitor, and easily managed by the site owner. It’s remarkably difficult to find gallery plugins that mimic even the simplest of image-storing websites, with different albums that can be accessed from one page, especially if you want anything dynamically generated.

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.

As with the carousel, we’re going to put the albumization into Twenty Fifteen, and you can see its final form on my testing site — at least for the time being. The non-JS version is pictured to left.

The final version of the gallery is achieved in six steps, which we’ll split in half. Here’s today’s outline:

1. Use MLA to apply Att. Categories to images, where the categories are the albums. Subcategories are fine, though I’m not sure it’s good to go any deeper than one level down (and my code doesn’t support more than two levels in the hierarchy). We were thinking years for the main categories and individual events for the subcategories.
2. Use WordPress’s get_terms() function to generate a list of all categories, and within each, a list of all subcategories. Make each list a link that applies a query string to the URL when it is clicked.
3. Use the value in the query string to build the appropriate mla_gallery shortcode, and have a default for when the page is first loaded. We wanted the default to be the album for the current year, so even it is dynamic. Execute the shortcode with do_shortcode().

It’s the long half.

Step 1

In the Media -> Att. Categories page, I created Attachment Categories called 2015 Events and 2014 Events, and one or two subcategories for each. I uploaded a bunch of images using Media -> Add New, and then went to Media -> Assistant to assign them categories. Though this would not affect the mechanics of creating the gallery, no image has a parent category directly assigned to it; they each belong to one subcategory, an event.

Step 2

For Steps 2 and 3 I created a special page template that will be applied to a page called Gallery (so you have to make a page named that! If you want to name it something else you can rename page-gallery to page-[slug of your desired page name] and leave the rest alone). I’m going to show them in their entirety rather than parsing them out into the two steps.

Contents of page-gallery.php:

This is just a simplified version of page.php that calls content-gallery.php. I took out various extra bits that would potentially clutter the page.

Contents of content-gallery.php:

I believe I built this off content-page.php, but in the few hours since I did it I’ve already forgotten.

Step 2 is covered in lines 15-46. Here’s what’s going on:
Lines 20-24: Grab all Att. Categories without parents, in descending order (so most recent year will be first). If you have categories beginning with letters, you may wish to remove that attribute.
Lines 25-27: Awkwardly chunk pieces of the (sub)category list item/link HTML into variables.
Line 29: Start an unordered list.
Lines 30-43: Loop through the collection of parent categories.
– 31-32: Grab the parent’s slug and create its list item. If you don’t plan to AJAXify this you can delete the definition of $linkslug above and remove it and one of the $slugs from each list item construction.
– 33-34: Open a nested unordered list and start it with the “All” item. You don’t have to include this, but I thought it was a bit of useful redundancy, in case someone wanted to see the whole year and didn’t realize the year itself was a link.
– 35-40: Essentially repeat 20-24 and 31-32 (within a loop like 30-43) for each parent category. The only significant change is telling get_terms a different parent: the current parent category instead of “none”.
– 41-42 and into 44: Close up all the lists.

You’ll notice the page content appears after this menu. If you don’t intend to AJAXify it, you may wish to put it above the menu, perhaps even outside of .filtration-gallery.

Step 3

This is covered in lines 52-66. You only need #current-album-wrapper if you plan to use AJAX.
Lines 55-59: Is there a valid category slug in the URL, after ?album=? If so, extract the pretty name of that category and display it as a header, and then build an MLA gallery shortcode to display the photos in that category. Of course you can change the other mla_gallery options or add some.
Lines 60-62: Oh, there’s not a valid slug? Run a default MLA gallery shortcode. This is where you would make major changes to accommodate your particular album organization scheme.

Bonus Step

Just kidding, we’re not done yet.

I added this functionality to my Flickity child theme, but we’ll to make its own child theme here, plus style it. I already put headers on the preceding two files to match.

In a folder called albumized-twenty-fifteen, place the two files above, plus two more. I left their embed boxes short because this is already a really long post.

One called functions.php, which so far has no purpose other than enqueuing stylesheets:

And one called style.css, which is kind of long despite the fact that I haven’t tweaked it as thoroughly as I would for a client:

Hey, we made it! Next time we’ll make this quicker and more compact, and appropriately the post should also be shorter.

The post Gilding the Gallery 2: MLA + front-end filtration 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.