HTML5 Galleries

[obenland]

In 3.6 we made great strides with the introduction of HTML5 versions of the search form, the comment form, and the comment list. Let's add to this list by giving theme authors the option to add HTML5 support for image galleries!

[obenland]

If we assume that HTML5 support is predominantly an issue of HTML tags, then providing that options to themes is fairly straight forward.

In 26697.diff​ and 26697.2.diff​ I proposed two ways we could achieve this, not sure which one would be more preferable. Maybe there's an even better, third, option?

[SergeyBiryukov]

26697.2.diff​ looks cleaner to me.

[DrewAPicture]

I like 26697.2.diff​ better as well.

I'd like to see us remove the extract in the future too (I think there's a ticket around here somewhere for that).

[SergeyBiryukov]

Replying to DrewAPicture:

I'd like to see us remove the extract in the future too (I think there's a ticket around here somewhere for that).

See #22400.

[nacin]

Cool :-)

[DrewAPicture]

26697.2.diff​

[nacin]

In 27302:

Introduce HTML5 gallery support.

When a theme supports HTML5 galleries via add_theme_support( 'html5', 'gallery' ), figure and figcaption will be used instead of definition list markup.

props obenland.
fixes #26697.

[jond3r]

This is a great addition.

However, to make the feature somewhat more visible, consider adding 'gallery' to the default array of types in the add_theme_support() function.

By this change it would be possible to get HTML5 galleries by issuing add_theme_support( 'html5' ).

The drawback is that this would be detrimental to backwards compatibility. It is possibly a worth-while change anyway considering the increased visibility of the feature?

A patch is attached.

[jond3r]

Adding 'gallery' to the default array of types in add_theme_support()`

[jond3r]

I just checked that twentythirteen and twentyfourteen use

add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list' ) );

so they are not affected by any backward-compatibility problems.

[nacin]

add_theme_support( 'html5' ) was never supposed to be allowed, as it would prevent us from adding new things (it's not forwards compatible). You were always supposed to need to pass an array, but it was a mistake in 3.6. Maybe we can increase _doing_it_wrong() usage in add_theme_support() to cover that implicitness isn't allowed. That would be a new ticket, however.

[nacin]

In 27396:

Do not output default gallery styles if the theme has opted into HTML5 galleries.

fixes #27045. see #26697.

[jond3r]

Replying to nacin:

That would be a new ticket, however.

See #27278.

[ScottSmith]

Replying to nacin:

In 27396:

Do not output default gallery styles if the theme has opted into HTML5 galleries.

fixes #27045. see #26697.

I'm a little unclear on what changes should be expected for themes adding support for HTML 5 galleries in the wake of 27396. Should devs copy the gallery_shortcode function into their themes or is there a less drastic way of still utilizing the default styles?

[SergeyBiryukov]

Replying to ScottSmith:

Should devs copy the gallery_shortcode function into their themes or is there a less drastic way of still utilizing the default styles?

Theme developers should add gallery to the list of elements they want to use HTML5 markup for:

add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery' ) );

Just noticed that Codex needs an update to reflect this change:
​http://codex.wordpress.org/Function_Reference/add_theme_support#HTML5

[ScottSmith]

Replying to SergeyBiryukov:

Replying to ScottSmith:

Should devs copy the gallery_shortcode function into their themes or is there a less drastic way of still utilizing the default styles?

Theme developers should add gallery to the list of elements they want to use HTML5 markup for:

add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery' ) );

Just noticed that Codex needs an update to reflect this change:
​http://codex.wordpress.org/Function_Reference/add_theme_support#HTML5

I recognize that, but how are theme developers anticipated to support gallery short code styling again, now that Core doesn't print the styles for free? Are theme developers supposed to copy the gallery_shortcode function, modify it, and put it into their themes? Or is there a more sane way of supporting galleries?

[cramdesign]

Replying to ScottSmith:

I recognize that, but how are theme developers anticipated to support gallery short code styling again, now that Core doesn't print the styles for free? Are theme developers supposed to copy the gallery_shortcode function, modify it, and put it into their themes? Or is there a more sane way of supporting galleries?

WordPress will still print gallery styles as it always has. You won't need to copy the shortcode function to your theme. However, if you are using add_theme_support( 'html5', array('gallery')), the easiest way to support the gallery, that is to style it like a grid or whatever, will be to add the gallery styles to your css file.

If I understand this change to core correctly, you aren't required to use the html5 gallery and the old gallery shortcode will still output as it always has.

[ScottSmith]

Replying to cramdesign:

Replying to ScottSmith:

I recognize that, but how are theme developers anticipated to support gallery short code styling again, now that Core doesn't print the styles for free? Are theme developers supposed to copy the gallery_shortcode function, modify it, and put it into their themes? Or is there a more sane way of supporting galleries?

WordPress will still print gallery styles as it always has. You won't need to copy the shortcode function to your theme. However, if you are using add_theme_support( 'html5', array('gallery')), the easiest way to support the gallery, that is to style it like a grid or whatever, will be to add the gallery styles to your css file.

If I understand this change to core correctly, you aren't required to use the html5 gallery and the old gallery shortcode will still output as it always has.

Right, but using CSS to layout the gallery would effectively break the user's ability to specify how many columns they want for their gallery. I don't think this ramification was taken into account before this functionality was removed.

[obenland]

Replying to ScottSmith:

Right, but using CSS to layout the gallery would effectively break the user's ability to specify how many columns they want for their gallery.

Not at all, theme authors just need to style it correctly. See Twenty Thirteen for example.

And if they "don't have the time" to do it right, they still have the option to do the following to keep using core styles:
add_filter( 'use_default_gallery_style', '__return_true' );

[ScottSmith]

Replying to obenland:

Replying to ScottSmith:

Right, but using CSS to layout the gallery would effectively break the user's ability to specify how many columns they want for their gallery.

Not at all, theme authors just need to style it correctly. See Twenty Thirteen for example.

And if they "don't have the time" to do it right, they still have the option to do the following to keep using core styles:
add_filter( 'use_default_gallery_style', '__return_true' );

Fantastic. This assuages my concerns. Thanks for helping me out (and hopefully I'm not the only person wondering about this.)

[nacin]

In 27668:

Introduce HTML5 caption support.

When a theme supports HTML5 captions via add_theme_support( 'html5', 'caption' ), figure and figcaption will be used instead of div and p.

There's a bonus. But first, some history: Captions were introduced with an inline style set for the container. This remains, as it is there to force captions to wrap. But this inline style included an extra 10 pixels, which have vexxed theme developers for years. While these pixels were designed to ensure padding around floated images, modern themes handle this with grace. The additional pixels thus feel encumbering.

As the new HTML5 gallery support avoids outputting default gallery styles (again, irking theme developers for years; see #26697), the new HTML5 caption support will also ditch these 10 pixels of unwanted hand-holding.

The 10 pixels are also removed entirely in the visual editor (and more styles may also disappear here; see #26642), giving themes the power necessary to match the frontend styles.

The filter img_caption_shortcode_width added in 3.7 to work around this madness (see #14380) is skipped entirely when the theme supports HTML5 captions.

props obenland, azaozz.
see #26642. also fixes #9066.

[lancewillett]

In 27763:

Twenty Thirteen and Fourteen: implement HTML5 markup for galleries (see #26697) and captions (see #26642). Props obenland, closes #27502.

[xaajimaxaad]

Wordpress

[nacin]

In 27914:

Remove <br> elements for HTML5 galleries.

props obenland.
fixes #27637, see #26697.

[tar.gz]

Simply awesome. Can we say this also fixes #10734 ?