Hook in to post_gallery function to change the styles of gallery - wordpress

Question

I have a problem that drives me mad, and can't find a solution to it in the documentation...
I want to hook in to Wordpress' post_gallery function to add a Class to the dl element that wraps the WP generated gallery individual images. By this I want to have the option to have full width images that can be controlled in the Attachments window of WP Media via ACF switch
if ( get_field('fullwidth') == 1 ){
$classname = 'fullwidth';
} else {
$classname = "";
}
Also setting the img "src" to the Large for these fullwidth images would come handy, so the page-load is not too slow.
Do I need to rewrite the whole gallery generating code from here?
https://core.trac.wordpress.org/browser/trunk/src/wp-includes/media.php
Can it be done via this method at all, or should I somehow try to hook in to the_content? But also for that method, I didn't find any info in regard how galleries are generated...

Answer 1

to add a Class to the dl element that wraps the WP generated gallery individual images
Instead of that, why don't you — using the Text/HTML editor — add the gallery like this:
<div class="fullwidth">
[gallery ... /]
</div>
(the three dots indicates the Shortcode parameters such as ids, size, and link)
And write some CSS code similar to:
.fullwidth .gallery-item {
/* Add styles for the DL (or FIGURE for HTML5-supported themes) element that wraps the gallery image and caption. */
}
.fullwidth .gallery-icon {
/* Add styles for the DT (or DIV for HTML5-supported themes) element that wraps the gallery image. */
}
.fullwidth .gallery-caption {
/* Add styles for the DD (or FIGCAPTION for HTML5-supported themes) element that wraps the gallery caption. */
}
[EDIT] Below is a custom Shortcode; used the exact same way you'd use the default [gallery] Shortcode.
Add these to the theme's functions.php file:
/**
* #param array $attr
* #param WP_Post $attachment
*/
function gallery_shortcode2_image_attributes( $attr, $attachment ) {
// Name of the custom field. (ACF)
$field_name = 'fullwidth';
if ( get_field( $field_name, $attachment->ID ) ) {
$attr['data-gallery-layout'] = 'full-width';
}
return $attr;
}
add_shortcode( 'gallery2', 'gallery_shortcode2' );
function gallery_shortcode2( $attr ) {
$atts = shortcode_atts( array(
'itemtag' => 'figure', // I'm assuming we'll always be using HTML5-supported themes..
'fwclass' => 'fullwidth', // The CSS class applied to items with, well, full-width layout.
'size' => 'medium_large', // You may change the default value; to "large", "custom", etc.
), $attr );
// Don't modify anything below unless you're 100% sure of what you're doing. =)
$itemtag = tag_escape( $atts['itemtag'] );
$valid_tags = wp_kses_allowed_html( 'post' );
if ( ! isset( $valid_tags[ $itemtag ] ) ) {
$itemtag = 'dl';
}
add_filter( 'wp_get_attachment_image_attributes', 'gallery_shortcode2_image_attributes', 10, 2 );
$output = gallery_shortcode( array_merge( $attr, $atts ) );
$output2 = '';
remove_filter( 'wp_get_attachment_image_attributes', 'gallery_shortcode2_image_attributes', 10, 2 );
$_tag = '<' . preg_quote( $itemtag ) . ' class=\'gallery-item\'>';
$arr = preg_split( "/($_tag)/", $output, -1, PREG_SPLIT_DELIM_CAPTURE );
for ( $i = 0, $j = 1; $i < count( $arr ); $i++, $j++ ) {
if ( $_tag === $arr[ $i ] && isset( $arr[ $j ] ) ) {
$class = 'gallery-item';
if ( preg_match( '/<img (.*?) data-gallery-layout="full-width"/', $arr[ $j ] ) ) {
$class .= ' ' . $atts['fwclass'];
}
$output2 .= '<' . $itemtag . ' class=\'' . esc_attr( $class ) . '\'>';
} else {
$output2 .= $arr[ $i ];
}
}
unset( $output, $arr );
return $output2;
}
And use [gallery2] instead of [gallery]; same arguments (e.g. ids and size), but with one extra argument for [gallery2], which is fwclass. (Refer to the gallery_shortcode() function for details on that argument.)
Hopefully [gallery2] works for you, like it did for me.
NOTE: Use [gallery2] only if you want to add a custom CSS class to the individual gallery item element (i.e. .gallery-item). Otherwise, use the default Shortcode — [gallery].