$src,
'alt' => $args['alt'] ?? wp_strip_all_tags( get_post_meta( $img_id, '_wp_attachment_image_alt', true ) ),
'class' => $args['class'] ?? '',
'srcset' => $args['srcset'] ?? false,
'sizes' => $args['sizes'] ?? false,
'style' => $args['style'] ?? false,
'decoding' => $args['decoding'] ?? false,
'aria-hidden' => $args['aria-hidden'] ?? false,
);
// 'srcset' と 'sizes' を生成
if ( '' === $attrs['srcset'] ) {
$attrs['srcset'] = false;
} else {
$image_meta = wp_get_attachment_metadata( $img_id );
if ( is_array( $image_meta ) ) {
// srcset の指定がなければ
if ( ! $attrs['srcset'] ) {
$attrs['srcset'] = wp_calculate_image_srcset( $size_array, $src, $image_meta, $img_id );
}
// sizes の指定がなければ (かつ、srcset があれば)
if ( $attrs['srcset'] && ! $attrs['sizes'] ) {
$attrs['sizes'] = wp_calculate_image_sizes( $size_array, $src, $image_meta, $img_id );
}
}
}
// lazyload種別
$loading = $args['loading'] ?? self::get_lazy_type();
if ( 'lazy' === $loading || 'eager' === $loading ) {
$attrs['loading'] = $loading;
} elseif ( self::is_rest() || self::is_iframe() ) {
$attrs['loading'] = 'lazy';
} elseif ( 'lazysizes' === $loading ) {
$attrs['data-src'] = $attrs['src'];
$attrs['src'] = $args['placeholder'] ?? self::$placeholder;
if ( isset( $attrs['srcset'] ) ) {
$attrs['data-srcset'] = $attrs['srcset'];
unset( $attrs['srcset'] );
}
// noscript画像
$noscript = ' . ')
';
// lazyloadクラス追加はnoscript画像生成後に。(noscriptに 'lazyload'クラス は不要)
$attrs['class'] .= ' lazyload';
if ( $width && $height ) {
$attrs['data-aspectratio'] = $width . '/' . $height;
}
}
$img_props = image_hwstring( $width, $height );
foreach ( $attrs as $name => $val ) {
if ( false === $val ) continue;
$img_props .= ' ' . $name . '="' . esc_attr( $val ) . '"';
}
$img = "![]()
" . $noscript;
if ( $echo ) {
echo $img; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
return $img;
}
/**
* ![]()
にlazyloadを適用
*/
public static function set_lazyload( $image, $lazy_type, $placeholder = '' ) {
if ( self::is_rest() || self::is_iframe() ) $lazy_type = 'lazy';
if ( 'eager' === $lazy_type || 'lazy' === $lazy_type ) {
$image = str_replace( ' src=', ' loading="' . $lazy_type . '" src=', $image );
} elseif ( 'lazysizes' === $lazy_type ) {
$noscript = '';
$placeholder = $placeholder ?: self::$placeholder;
$image = str_replace( ' src=', ' src="' . esc_url( $placeholder, array( 'http', 'https', 'data' ) ) . '" data-src=', $image );
$image = str_replace( ' srcset=', ' data-srcset=', $image );
$image = str_replace( ' class="', ' class="lazyload ', $image );
$image = preg_replace_callback( '/]*)>/', function( $matches ) {
$props = rtrim( $matches[1], '/' );
$props = self::set_aspectratio( $props );
return '';
}, $image );
$image .= $noscript;
}
return $image;
}
/**
* width,height から aspectratio を指定
*/
public static function set_aspectratio( $props, $src = '' ) {
// width , height指定を取得
preg_match( '/\swidth=["\']([0-9]*)["\']/', $props, $width_matches );
preg_match( '/\sheight=["\']([0-9]*)["\']/', $props, $height_matches );
$width = ( $width_matches ) ? $width_matches[1] : '';
$height = ( $height_matches ) ? $height_matches[1] : '';
if ( $width && $height ) {
$props .= ' data-aspectratio="' . $width . '/' . $height . '"';
}
return $props;
}
}