'blog_id' => (int) get_current_blog_id(),
'meta_data' => array( 'camera', 'aperture', 'shutter_speed', 'focal_length', 'copyright' ),
* Handle WP stats for images in full-screen.
* Build string with tracking info.
* Filter if Jetpack should enable stats collection on carousel views
* @param bool Enable Jetpack Carousel stat collection. Default false.
if ( apply_filters( 'jetpack_enable_carousel_stats', false ) && in_array( 'stats', Jetpack::get_active_modules(), true ) && ! ( new Status() )->is_offline_mode() ) {
$localize_strings['stats'] = 'blog=' . Jetpack_Options::get_option( 'id' ) . '&host=' . wp_parse_url( get_option( 'home' ), PHP_URL_HOST ) . '&v=ext&j=' . JETPACK__API_VERSION . ':' . JETPACK__VERSION;
// Set the stats as empty if user is logged in but logged-in users shouldn't be tracked.
if ( is_user_logged_in() ) {
$stats_options = Stats_Options::get_options();
$track_loggedin_users = isset( $stats_options['count_roles'] ) ? (bool) $stats_options['count_roles'] : false;
if ( ! $track_loggedin_users ) {
$localize_strings['stats'] = '';
* Filter the strings passed to the Carousel's js file.
* @param array $localize_strings Array of strings passed to the Jetpack js file.
$localize_strings = apply_filters( 'jp_carousel_localize_strings', $localize_strings );
wp_localize_script( 'jetpack-carousel', 'jetpackCarouselStrings', $localize_strings );
'jetpack-swiper-library',
plugins_url( '_inc/blocks/swiper.css', JETPACK__PLUGIN_FILE ),
wp_enqueue_style( 'jetpack-carousel', plugins_url( 'jetpack-carousel.css', __FILE__ ), array(), $this->asset_version( JETPACK__VERSION ) );
wp_style_add_data( 'jetpack-carousel', 'rtl', 'replace' );
* Fires after carousel assets are enqueued for the first time.
* Allows for adding additional assets to the carousel page.
* @param bool $first_run First load if Carousel on the page.
* @param array $localized_strings Array of strings passed to the Jetpack js file.
do_action( 'jp_carousel_enqueue_assets', $this->first_run, $localize_strings );
// Add the carousel skeleton to the page.
$this->localize_strings = $localize_strings;
add_action( 'wp_footer', array( $this, 'add_carousel_skeleton' ) );
$this->first_run = false;
* Generate the HTML skeleton that will be picked up by the Carousel JS and used for showing the carousel.
public function add_carousel_skeleton() {
$localize_strings = $this->localize_strings;
$is_light = ( 'white' === $localize_strings['background_color'] );
// Determine whether to fall back to standard local comments.
$use_local_comments = ! isset( $localize_strings['jetpack_comments_iframe_src'] ) || empty( $localize_strings['jetpack_comments_iframe_src'] );
$current_user = wp_get_current_user();
$require_name_email = (int) get_option( 'require_name_email' );
/* translators: %s is replaced with a field name in the form, e.g. "Email" */
$required = ( $require_name_email ) ? __( '%s (Required)', 'jetpack' ) : '%s';
<div id="jp-carousel-loading-overlay">
<div id="jp-carousel-loading-wrapper">
<span id="jp-carousel-library-loading"> </span>
<div class="jp-carousel-overlay<?php echo( $is_light ? ' jp-carousel-light' : '' ); ?>" style="display: none;">
<div class="jp-carousel-container<?php echo( $is_light ? ' jp-carousel-light' : '' ); ?>">
<!-- The Carousel Swiper -->
class="jp-carousel-wrap swiper jp-carousel-swiper-container jp-carousel-transitions"
itemtype="https://schema.org/ImageGallery">
<div class="jp-carousel swiper-wrapper"></div>
<div class="jp-swiper-button-prev swiper-button-prev">
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="maskPrev" mask-type="alpha" maskUnits="userSpaceOnUse" x="8" y="6" width="9" height="12">
<path d="M16.2072 16.59L11.6496 12L16.2072 7.41L14.8041 6L8.8335 12L14.8041 18L16.2072 16.59Z" fill="white"/>
<g mask="url(#maskPrev)">
<rect x="0.579102" width="23.8823" height="24" fill="#FFFFFF"/>
<div class="jp-swiper-button-next swiper-button-next">
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="maskNext" mask-type="alpha" maskUnits="userSpaceOnUse" x="8" y="6" width="8" height="12">
<path d="M8.59814 16.59L13.1557 12L8.59814 7.41L10.0012 6L15.9718 12L10.0012 18L8.59814 16.59Z" fill="white"/>
<g mask="url(#maskNext)">
<rect x="0.34375" width="23.8822" height="24" fill="#FFFFFF"/>
<!-- The main close buton -->
<div class="jp-carousel-close-hint">
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="maskClose" mask-type="alpha" maskUnits="userSpaceOnUse" x="5" y="5" width="15" height="14">
<path d="M19.3166 6.41L17.9135 5L12.3509 10.59L6.78834 5L5.38525 6.41L10.9478 12L5.38525 17.59L6.78834 19L12.3509 13.41L17.9135 19L19.3166 17.59L13.754 12L19.3166 6.41Z" fill="white"/>
<g mask="url(#maskClose)">
<rect x="0.409668" width="23.8823" height="24" fill="#FFFFFF"/>
<!-- Image info, comments and meta -->
<div class="jp-carousel-info">
<div class="jp-carousel-info-footer">
<div class="jp-carousel-pagination-container">
<div class="jp-swiper-pagination swiper-pagination"></div>
<div class="jp-carousel-pagination"></div>
<div class="jp-carousel-photo-title-container">
<h2 class="jp-carousel-photo-caption"></h2>
<div class="jp-carousel-photo-icons-container">
<a href="#" class="jp-carousel-icon-btn jp-carousel-icon-info" aria-label="<?php esc_attr_e( 'Toggle photo metadata visibility', 'jetpack' ); ?>">
<span class="jp-carousel-icon">
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="maskInfo" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="21" height="20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.7537 2C7.26076 2 2.80273 6.48 2.80273 12C2.80273 17.52 7.26076 22 12.7537 22C18.2466 22 22.7046 17.52 22.7046 12C22.7046 6.48 18.2466 2 12.7537 2ZM11.7586 7V9H13.7488V7H11.7586ZM11.7586 11V17H13.7488V11H11.7586ZM4.79292 12C4.79292 16.41 8.36531 20 12.7537 20C17.142 20 20.7144 16.41 20.7144 12C20.7144 7.59 17.142 4 12.7537 4C8.36531 4 4.79292 7.59 4.79292 12Z" fill="white"/>
<g mask="url(#maskInfo)">
<rect x="0.8125" width="23.8823" height="24" fill="#FFFFFF"/>
<?php if ( $localize_strings['display_comments'] ) : ?>
<a href="#" class="jp-carousel-icon-btn jp-carousel-icon-comments" aria-label="<?php esc_attr_e( 'Toggle photo comments visibility', 'jetpack' ); ?>">
<span class="jp-carousel-icon">
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="maskComments" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="21" height="20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.3271 2H20.2486C21.3432 2 22.2388 2.9 22.2388 4V16C22.2388 17.1 21.3432 18 20.2486 18H6.31729L2.33691 22V4C2.33691 2.9 3.2325 2 4.3271 2ZM6.31729 16H20.2486V4H4.3271V18L6.31729 16Z" fill="white"/>
<g mask="url(#maskComments)">
<rect x="0.34668" width="23.8823" height="24" fill="#FFFFFF"/>
<span class="jp-carousel-has-comments-indicator" aria-label="<?php esc_attr_e( 'This image has comments.', 'jetpack' ); ?>"></span>
<div class="jp-carousel-info-extra">
<div class="jp-carousel-info-content-wrapper">
<div class="jp-carousel-photo-title-container">
<h2 class="jp-carousel-photo-title"></h2>
<div class="jp-carousel-comments-wrapper">
<?php if ( $localize_strings['display_comments'] ) : ?>
<div id="jp-carousel-comments-loading">
<span><?php echo esc_html( $localize_strings['loading_comments'] ); ?></span>
<div class="jp-carousel-comments"></div>
<div id="jp-carousel-comment-form-container">
<span id="jp-carousel-comment-form-spinner"> </span>
<div id="jp-carousel-comment-post-results"></div>
<?php if ( $use_local_comments ) : ?>
<?php if ( ! $localize_strings['is_logged_in'] && $localize_strings['comment_registration'] ) : ?>
<div id="jp-carousel-comment-form-commenting-as">
<p id="jp-carousel-commenting-as">
__( 'You must be <a href="#" class="jp-carousel-comment-login">logged in</a> to post a comment.', 'jetpack' ),
<form id="jp-carousel-comment-form">
<label for="jp-carousel-comment-form-comment-field" class="screen-reader-text"><?php echo esc_attr( $localize_strings['write_comment'] ); ?></label>
class="jp-carousel-comment-form-field jp-carousel-comment-form-textarea"
id="jp-carousel-comment-form-comment-field"
placeholder="<?php echo esc_attr( $localize_strings['write_comment'] ); ?>"
<div id="jp-carousel-comment-form-submit-and-info-wrapper">
<div id="jp-carousel-comment-form-commenting-as">
<?php if ( $localize_strings['is_logged_in'] ) : ?>
<p id="jp-carousel-commenting-as">
/* translators: %s is replaced with the user's display name */
esc_html__( 'Commenting as %s', 'jetpack' ),
esc_html( $current_user->data->display_name )
<label for="jp-carousel-comment-form-email-field"><?php echo esc_html( sprintf( $required, __( 'Email', 'jetpack' ) ) ); ?></label>
<input type="text" name="email" class="jp-carousel-comment-form-field jp-carousel-comment-form-text-field" id="jp-carousel-comment-form-email-field" />
<label for="jp-carousel-comment-form-author-field"><?php echo esc_html( sprintf( $required, __( 'Name', 'jetpack' ) ) ); ?></label>
<input type="text" name="author" class="jp-carousel-comment-form-field jp-carousel-comment-form-text-field" id="jp-carousel-comment-form-author-field" />
<label for="jp-carousel-comment-form-url-field"><?php esc_html_e( 'Website', 'jetpack' ); ?></label>
<input type="text" name="url" class="jp-carousel-comment-form-field jp-carousel-comment-form-text-field" id="jp-carousel-comment-form-url-field" />
class="jp-carousel-comment-form-button"
id="jp-carousel-comment-form-button-submit"
value="<?php echo esc_attr( $localize_strings['post_comment'] ); ?>" />
<div class="jp-carousel-image-meta">
<div class="jp-carousel-title-and-caption">
<div class="jp-carousel-photo-info">
<h3 class="jp-carousel-caption" itemprop="caption description"></h3>
<div class="jp-carousel-photo-description"></div>
<ul class="jp-carousel-image-exif" style="display: none;"></ul>
<a class="jp-carousel-image-download" href="#" target="_blank" style="display: none;">
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="3" y="3" width="19" height="18">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.84615 5V19H19.7775V12H21.7677V19C21.7677 20.1 20.8721 21 19.7775 21H5.84615C4.74159 21 3.85596 20.1 3.85596 19V5C3.85596 3.9 4.74159 3 5.84615 3H12.8118V5H5.84615ZM14.802 5V3H21.7677V10H19.7775V6.41L9.99569 16.24L8.59261 14.83L18.3744 5H14.802Z" fill="white"/>
<rect x="0.870605" width="23.8823" height="24" fill="#FFFFFF"/>
<span class="jp-carousel-download-text"></span>
<div class="jp-carousel-image-map" style="display: none;"></div>
* Sets the "in_gallery" flag when the first gallery is encountered (unless in AMP mode).
* @param string $output Gallery shortcode output. Passed through unchanged.
public function set_in_gallery( $output ) {
class_exists( 'Jetpack_AMP_Support' )
&& Jetpack_AMP_Support::is_amp_request()
$this->in_gallery = true;
* Adds data-* attributes required by carousel to img tags in post HTML
* content. To be used by 'the_content' filter.
* @see add_data_to_images()
* @see wp_make_content_images_responsive() in wp-includes/media.php
* @param string $content HTML content of the post.
public function add_data_img_tags_and_enqueue_assets( $content ) {
if ( ! is_string( $content ) || $content === '' ) {
class_exists( 'Jetpack_AMP_Support' )
&& Jetpack_AMP_Support::is_amp_request()
return $this->maybe_add_amp_lightbox( $content );
if ( ! preg_match_all( '/<img [^>]+>/', $content, $matches ) ) {
$selected_images = array();
foreach ( $matches[0] as $image_html ) {
preg_match( '/(wp-image-|data-id=)\"?([0-9]+)\"?/i', $image_html, $class_id )
&& ! str_contains( $image_html, 'wp-block-jetpack-slideshow_image' )
* Allow filtering the attachment ID used to fetch and populate metadata about an image in a gallery.
* @param int $attachment_id Attachment ID pulled from image HTML.
* @param string $image_html Full HTML image tag.
'jetpack_carousel_image_attachment_id',
* The same image tag may be used more than once but with different attribs,
* so save each of them against the attachment id.
if ( ! isset( $selected_images[ $attachment_id ] ) || ! in_array( $image_html, $selected_images[ $attachment_id ], true ) ) {
$selected_images[ $attachment_id ][] = $image_html;
if ( empty( $selected_images ) ) {
$attachments = get_posts(
'include' => array_keys( $selected_images ),
'suppress_filters' => false,
foreach ( $attachments as $attachment ) {
* If the item from get_posts isn't an attachment, skip. This can occur when copy-pasta from another WP site.
* For example, if one copies "<img class="wp-image-7 size-full" src="https://twentysixteendemo.files.wordpress.com/2015/11/post.png" alt="post" width="1000" height="563" />"
* then, we're going to look up post 7 below, which making sure it is an attachment.
* This is meant as a relatively quick fix, as a better fix is likely to update the get_posts call above to only
! isset( $attachment->ID )
|| ! wp_attachment_is_image( $attachment->ID )
|| ! isset( $selected_images[ $attachment->ID ] )
$image_elements = $selected_images[ $attachment->ID ];
if ( ! is_array( $image_elements ) ) {
$attributes = $this->add_data_to_images( array(), $attachment );
foreach ( $attributes as $k => $v ) {
$attributes_html .= esc_attr( $k ) . '="' . esc_attr( $v ) . '" ';
foreach ( $image_elements as $image_html ) {
$replace[] = str_replace( '<img ', "<img $attributes_html", $image_html );
$content = str_replace( $find, $replace, $content );
* Adds the data attributes themselves to img tags.
* @see add_data_img_tags_and_enqueue_assets()
* @see https://developer.wordpress.org/reference/functions/wp_get_attachment_image/ Documentation about wp_get_attachment_image
* @param string[] $attr Array of attribute values for the image markup, keyed by attribute name.
* @param null|WP_Post $attachment Image attachment post.
* @return string[] Modified image attributes.
public function add_data_to_images( $attr, $attachment = null ) {
class_exists( 'Jetpack_AMP_Support' )
&& Jetpack_AMP_Support::is_amp_request()
! $attachment instanceof WP_Post
|| ! isset( $attachment->ID )
|| ! wp_attachment_is_image( $attachment )
$attachment_id = (int) $attachment->ID;
$orig_file = wp_get_attachment_image_src( $attachment_id, 'full' );
$orig_file = isset( $orig_file[0] ) ? $orig_file[0] : wp_get_attachment_url( $attachment_id );
$meta = wp_get_attachment_metadata( $attachment_id );
$size = isset( $meta['width'] ) ? (int) $meta['width'] . ',' . (int) $meta['height'] : '';
$img_meta = ( ! empty( $meta['image_meta'] ) ) ? (array) $meta['image_meta'] : array();
$comments_opened = (int) comments_open( $attachment_id );
* Note: Cannot generate a filename from the width and height wp_get_attachment_image_src() returns because
* it takes the $content_width global variable themes can set in consideration, therefore returning sizes
* which when used to generate a filename will likely result in a 404 on the image.
* $content_width has no filter we could temporarily de-register, run wp_get_attachment_image_src(), then
* re-register. So using returned file URL instead, which we can define the sizes from through filename
* parsing in the JS, as this is a failsafe file reference.
* EG with Twenty Eleven activated:
* array(4) { [0]=> string(82) "http://vanillawpinstall.blah/wp-content/uploads/2012/06/IMG_3534-1024x764.jpg" [1]=> int(584) [2]=> int(435) [3]=> bool(true) }
* EG with Twenty Ten activated:
* array(4) { [0]=> string(82) "http://vanillawpinstall.blah/wp-content/uploads/2012/06/IMG_3534-1024x764.jpg" [1]=> int(640) [2]=> int(477) [3]=> bool(true) }
$medium_file_info = wp_get_attachment_image_src( $attachment_id, 'medium' );
$medium_file = isset( $medium_file_info[0] ) ? $medium_file_info[0] : '';
$large_file_info = wp_get_attachment_image_src( $attachment_id, 'large' );
$large_file = isset( $large_file_info[0] ) ? $large_file_info[0] : '';
$attachment_title = wptexturize( $attachment->post_title );
$attachment_desc = wpautop( wptexturize( $attachment->post_content ) );
$attachment_caption = wpautop( wptexturize( $attachment->post_excerpt ) );
// See https://github.com/Automattic/jetpack/issues/2765.
if ( isset( $img_meta['keywords'] ) ) {
unset( $img_meta['keywords'] );
$img_meta = wp_json_encode( array_map( 'strval', array_filter( $img_meta, 'is_scalar' ) ), JSON_UNESCAPED_SLASHES | JSON_HEX_AMP );
$attr['data-attachment-id'] = $attachment_id;
$attr['data-permalink'] = esc_attr( get_permalink( $attachment_id ) );
$attr['data-orig-file'] = esc_attr( $orig_file );
$attr['data-orig-size'] = $size;
$attr['data-comments-opened'] = $comments_opened;
$attr['data-image-meta'] = esc_attr( $img_meta );
// The lines below use `esc_attr( htmlspecialchars( ) )` because esc_attr tries to be too smart and won't double-encode, and we need that here.
$attr['data-image-title'] = esc_attr( htmlspecialchars( $attachment_title, ENT_COMPAT ) );
$attr['data-image-description'] = esc_attr( htmlspecialchars( $attachment_desc, ENT_COMPAT ) );
$attr['data-image-caption'] = esc_attr( htmlspecialchars( $attachment_caption, ENT_COMPAT ) );
$attr['data-medium-file'] = esc_attr( $medium_file );
$attr['data-large-file'] = esc_attr( $large_file );
* Add additional attributes to the Gallery container HTML.