WordPress.org

Make WordPress Core

Opened 16 months ago

Last modified 9 months ago

#26212 new enhancement

Twenty Fourteen: add arrows for image template navigation

Reported by: celloexpressions Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 3.8
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description

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.

Attachments (7)

twentyfourteen-image-attachment-arrows.png (291.0 KB) - added by celloexpressions 16 months ago.
Arrows mockup based on featured content slider
26212.diff (1.3 KB) - added by celloexpressions 16 months ago.
Implement mockup, re-using the (very slightly tweaked) featured content slider nav arrows css
26212.2.diff (1.2 KB) - added by celloexpressions 16 months ago.
Implement mockup, re-using the (very slightly tweaked) featured content slider nav arrows css
26212.3.diff (7.1 KB) - added by celloexpressions 16 months ago.
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.
image-navigation.png (746.6 KB) - added by lancewillett 16 months ago.
26212.placeholder.png (889.5 KB) - added by celloexpressions 9 months ago.
Add the placeholder background to make the arrow alignment look correct for images smaller than 810px wide.
26212.4.diff (1.5 KB) - added by celloexpressions 9 months ago.
Add placeholder, refresh.

Download all attachments as: .zip

Change History (27)

comment:1 @celloexpressions16 months ago

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).

comment:2 @lancewillett16 months ago

  • Milestone changed from Awaiting Review to 3.8
  • Priority changed from normal to low

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.

@celloexpressions16 months ago

Arrows mockup based on featured content slider

comment:3 @iamtakashi16 months ago

  • Cc takashi@… added

@celloexpressions16 months ago

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

comment:4 @celloexpressions16 months ago

  • Keywords has-patch added; needs-patch removed

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.

comment:5 follow-up: @lancewillett16 months ago

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?

comment:6 @lancewillett16 months ago

  • Summary changed from Twenty Fourteen: No Visual Indication that Image Attachment Pages Link Image to Next Image to Twenty Fourteen: add arrows for image template navigation

@celloexpressions16 months ago

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

comment:7 in reply to: ↑ 5 ; follow-up: @celloexpressions16 months ago

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?

comment:8 in reply to: ↑ 7 @lancewillett16 months ago

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.

@celloexpressions16 months ago

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.

comment:9 @celloexpressions16 months ago

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.

comment:10 follow-up: @lancewillett16 months ago

  • Milestone changed from 3.8 to Future Release
  • Priority changed from low to normal

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).

comment:11 @lancewillett16 months ago

In 26609:

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

comment:12 in reply to: ↑ 10 ; follow-up: @celloexpressions16 months ago

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.

comment:13 @lancewillett16 months ago

  • Type changed from defect (bug) to enhancement

comment:14 @celloexpressions16 months ago

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

comment:15 @lancewillett10 months ago

  • Keywords ux-feedback added
  • Milestone changed from Future Release to 4.0

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

comment:16 in reply to: ↑ 12 @iamtakashi9 months ago

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.

comment:17 @iamtakashi9 months ago

But we need a refreshed patch :)

@celloexpressions9 months ago

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

@celloexpressions9 months ago

Add placeholder, refresh.

comment:18 @celloexpressions9 months ago

  • Keywords ux-feedback removed

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.

comment:19 @ircbot9 months ago

This ticket was mentioned in IRC in #wordpress-themes by obenland. View the logs.

comment:20 @obenland9 months ago

  • Milestone changed from 4.0 to Future Release

Punted based on above linked conversation in IRC.

Note: See TracTickets for help on using tickets.