Get the address of the image in the album shortcode inside the article, and then optimize the album display

This site previously recommended an optimized WordPress album display effect of the plug-in, in fact, do not use plug-ins, we can also optimize the effect of albums within the article, the specific implementation is to get the article inserted in the album, and then get the picture in the album, WordPress provides us with a function to achieve this feature, we look at it together.

Get the thumbnails of the pictures in the album

The albums inside the post show the thumbnails of the pictures by default, and you can only show the original pictures by clicking on them. To get the thumbnails of the pictures in the albums, we need to use WordPress's get_post_gallery_images function, to get is the address list of the album pictures, and then we loop input, display these pictures can be, the code is as follows.

$gallery = get_post_gallery_images( $post ); //get the album inside the post
foreach($gallery as $link) {
echo '<a href="/en/'. $link . '/">'; echo '
echo '<img src="'. $link . '" alt="" />'; echo '
echo '</a>';
}

Once we have the album images, we can adjust the CSS or add some JavaScript effects to optimize the display of WordPress albums according to our needs.

Get the original image of the picture in the album

In the above method, we get the thumbnails of the images, the default list display is more appropriate, but if we want to add a Lightbox effect to the album to view the full picture, the thumbnail display is not possible, unfortunately get_post_gallery_images does not provide us with the parameters of the size of the image, we have to go through the Another function:get_post_gallery to get the original image of the picture now.

$gallery = get_post_gallery( $post, false ); //get the ids of the images in the gallery
$ids = explode( ",", $gallery['ids'] ); //convert to array

foreach( $ids as $id ){
$link = wp_get_attachment_url( $id ); //get the original image based on image ids
echo '<a href="/en/'. $link . '/">'; echo '
echo '<img src="'. $link . '" alt="" />'; echo '
echo '</a>';
}