Twenty Fourteen: add arrows for image template navigation

[celloexpressions]

There is absolutely no visual indication that the single attachment page supports navigation between images. Currently, we link the image to the next image. I would expect the image to be linked to the full-size image.

We do have keyboard navigation for previous and next images. Perhaps we could also add visible forward/back arrows. Generally, we could incorporate similar styling to what we have in the featured content slider.

[celloexpressions]

Just noticed that we do have forward and back links in the style of the previous/next post links, but they're usually pushed well out of view. A more visual UI would be more appropriate here, I think, but at a minimum we should address the next-image linking, which is just confusing (though has precedents in previous default themes).

[lancewillett]

This is a UI convention we've used since probably Twenty Eleven or earlier. Based on the design pattern Facebook started many years ago, click for next.

I like the idea of adding arrows, though. But it's not a blocker.

[celloexpressions]

Arrows mockup based on featured content slider

[celloexpressions]

Implement mockup, re-using the (very slightly tweaked) featured content slider nav arrows css

[celloexpressions]

26212.diff​ seems to work pretty well. Only issue is when the image isn't the full width and the first and last item can make the links appear to be floating but I don't think that's a big issue.

[lancewillett]

Patch is a great start. Looks like you have some code cruft (commented out line), though.

Could we name it something different than the slider, and just add in selectors for it as needed?

[celloexpressions]

Implement mockup, re-using the (very slightly tweaked) featured content slider nav arrows css

[celloexpressions]

Replying to lancewillett:

Looks like you have some code cruft (commented out line), though.

Oops, that's fixed in .2

Could we name it something different than the slider, and just add in selectors for it as needed?

We'd have to duplicate about 80 lines of CSS. Why don't we rename the class so that they're appropriate for both the slider and the image attachment page? Child themers can always style them independently by targeting different parent classes, but If they're just modifying the existing styles the changes should probably apply to both areas by default.

Maybe we could replace .slider-direction-nav with .arrow-nav?

[lancewillett]

Replying to celloexpressions:

Why don't we rename the class so that they're appropriate for both the slider and the image attachment page?
Maybe we could replace .slider-direction-nav with .arrow-nav?

Sure thing, great idea.

[celloexpressions]

Rename ".slider-direction-nav" "arrow-nav" to re-use for image attachments. Just did a search & replace, had to remove the namespace from slider.js.

[celloexpressions]

26212.3.diff​ is more code churn than I'd like to introduce at this point, but I did a search & replace so I think we should be okay (26212.2.diff​ has the whole non-renaming diff). Had to remove the namespace (which was "slider") from slider.js for obvious reasons. Also caught an instance of a :first-chile selector in ie.css that should be :first-child.

This is definitely a better approach, naming the classes by what they are, not where, so we can re-use. But the other way also works if we want to minimize churn.

[lancewillett]

Obenland pointed out in IRC this morning, the image attachment page does have navigation to Previous and Next, below the image.

See attachment.

For 3.8 let's leave it as-is. And revisit in a future release, with Takashi's opinion on how to change those text links into arrows or thumbnails (or not).

[lancewillett]

In 26609:

Twenty Fourteen: fix broken selector, props celloexpressions. See #26212. [This IE browser no le gusta chile, ese.]

[celloexpressions]

Replying to lancewillett:

Obenland pointed out in IRC this morning, the image attachment page does have navigation to Previous and Next, below the image.

Yes, I pointed that out in Comment 1. Wasn't sure whether we should remove those with the patches (I think it works well to have both). I think the fact that they aren't noticeable, and they get pushed below the caption/description is a good argument for adding arrows eventually.

[celloexpressions]

Noting that we'll probably need to do something like 26212.2.diff​ for easy back-compatibility when we address this.

[lancewillett]

@iamtakashi Do you have any thoughts on this as a design and UX change? Moving to 4.0 milestone so we can discuss it.

[iamtakashi]

Replying to celloexpressions:

I think the fact that they aren't noticeable, and they get pushed below the caption/description is a good argument for adding arrows eventually.

I agree. I think it's a good enhancement.

[iamtakashi]

But we need a refreshed patch :)

[celloexpressions]

Add the placeholder background to make the arrow alignment look correct for images smaller than 810px wide.

[celloexpressions]

Add placeholder, refresh.

[celloexpressions]

Looks like 26212.2.diff​ still applies (to src) and works for me, surprisingly. Should be reasonably backwards compatible - any custom styling on the slider arrows should also work here (and in most cases would be desired). Fourteen Colors works seamlessly with this change, for example.

The biggest issue I can find is that with images that are less than 810px wide, the arrows end up floating into the image margin, which looks very broken. 26212.4.diff​ solves this by adding the placeholder background that's displayed on featured images (without the hover states). This ensures that the arrows are always in the same place, and few images will be this small here.

Other thing is the behavior on the first and last images, when there's only one arrow. Not sure what to do about those, or whether we need to worry about it.

[obenland]

Punted based on above linked conversation in IRC.

[chriscct7]

Based on IRC conversation the patch needs to be adjusted

[celloexpressions]

It's probably too late to make this change with Twenty Fourteen being in the wild for two years. We also don't have consensus on how to deal with issues such as variable image widths. Would have been nice to have this, but it's not a frequently-visited page template anyway.