After seening to similar questions Get all images from wordpress post and Get all images attached to any post
I have come up with two codes. The problem is that one uses wp_get_attachment_image_url and gets all images attached to a post in full size but it does not change dynamically, meaning that if you remove the image from your WordPress post it will still be there. The code for this one is:
<?php get_header(); ?>
<div id="main">
<header class="post-header single-header">
<div class="container">
<h1 class="post-title text-center single__header_title"><?php the_title(); ?></h1>
<p class="post-excerpt text-center single__header_text"><?php the_excerpt(); ?></p>
<ul class="tag post-categoty tag-lg">
<li>
<?php esc_html_e('Category: ', 'seedwise'); ?> <?php the_category(' '); ?>
</li>
</ul>
<ul class="tag post-tags tag-lg">
<li><?php esc_html_e('Tags: ', 'seedwise'); ?> <?php custom_display_tags('', ', ') ?></li>
</ul>
</div>
</header>
<div class="container">
<?php while (have_posts()):
the_post();
?>
<div class="gallery">
<div class="container">
<div class="row">
<?php
$post_id = get_the_ID();
$image_query = new WP_Query(array(
'post_type' => 'attachment',
'post_status' => 'inherit',
'post_mime_type' => 'image',
'posts_per_page' => -1,
'post_parent' => $post_id
));
if ($image_query->have_posts()) {
while ($image_query->have_posts()) {
$image_query->the_post();
$full_size_image_url = wp_get_attachment_url(get_the_ID()); // Get the full-size image URL
$thumbnail_image_url = wp_get_attachment_image_url(get_the_ID(), 'large'); // Get the thumbnail image URL
$image_alt = get_post_meta(get_the_ID(), '_wp_attachment_image_alt', true);
?>
<div class="col-md-6 col-sm-12">
<div class="gallery__row">
<a data-fslightbox href="<?php echo esc_url($full_size_image_url); ?>" class="gallery__link" data-lightbox="image-gallery">
<figure class="gallery__thumb">
<img src="<?php echo esc_url($thumbnail_image_url); ?>" alt="<?php echo esc_attr($image_alt); ?>" class="gallery__image">
<figcaption class="gallery__caption"><?php echo esc_html(get_theme_mod('portrait_by_settings', 'Portrait by: Glauco Paganotti')); ?></figcaption>
</figure>
</a>
</div>
</div>
<?php
}
wp_reset_postdata(); // Reset the image attachment query
}
?>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<?php get_footer(); ?>
The other one uses the function with a regular expression from Get all images from wordpress post the problem is that it does not fetch the full size image. The code is: the function on functions.php:
function fpw_show_full_size_images( $content ) {
global $wp_query;
if ( isset( $wp_query->query_vars['images'] ) ) {
preg_match_all( '/<img[^>]+src=[\'"]([^\'"]+)[\'"][^>]*>/i', $content, $matches );
$image_urls = $matches[1];
$numberOfImages = count( $image_urls );
if ( 0 == $numberOfImages ) {
$out = '<h3>No images</h3>';
} else {
$out = '<h3>Number of images: ' . $numberOfImages . '</h3>';
$out .= '<table style="width:100%">';
$i = 0;
foreach ( $image_urls as $img_url ) {
if ( 0 == $i )
$out .= '<tr>';
$out .= '<td style="width:100%"><img src="' . $img_url . '" /></td>';
$i++;
if ( 4 == $i ) {
$i = 0;
$out .= '</tr>';
}
}
if ( 0 < $i )
$out .= '</tr>';
$out .= '</table>';
}
return $out;
}
return $content;
}
add_filter( 'the_content', 'fpw_show_full_size_images' );
function fpw_images_parameter( $qvars ) {
$qvars[] = 'images';
return $qvars;
}
add_filter( 'query_vars', 'fpw_images_parameter' );
the code for single.php:
<?php get_header(); ?>
<div id="main">
<header class="post-header single-header">
<div class="container">
<h1 class="post-title text-center single__header_title" ><?php the_title(); ?></h1>
<p class="post-excerpt text-center single__header_text"><?php the_excerpt(); ?></p>
<ul class="tag post-categoty tag-lg">
<li>
<?php esc_html_e( 'Category: ', 'seedwise' ); ?> <?php the_category( ' ' ); ?>
</li>
</ul>
<ul class="tag post-tags tag-lg">
<li><?php esc_html_e( 'Tags: ', 'seedwise' ); ?> <?php custom_display_tags( '', ', ' ) ?></li>
</ul>
</div>
</header>
<div class="container">
<?php while( have_posts() ):
the_post();
?>
<div class="gallery">
<div class="container">
<div class="row">
<?php
$content = get_the_content(); // Get the content of the post
preg_match_all( "/<img[^>]+\>/i", $content, $matches );
if (empty($matches[0])) {
echo '<p>No images found in the content.</p>';
} else {
foreach ($matches[0] as $image_tag) {
preg_match( "/src=['\"](.*?)['\"]/", $image_tag, $src_match );
$image_url = $src_match[1];
$image_alt = get_post_meta( attachment_url_to_postid($image_url), '_wp_attachment_image_alt', true );
?>
<div class="col-md-6 col-sm-12">
<div class="gallery__row">
<a data-fslightbox href="<?php echo esc_html($image_url); ?>" class="gallery__link" data-lightbox="image-<?php echo esc_html(attachment_url_to_postid($image_url)); ?>">
<figure class="gallery__thumb">
<img src="<?php echo esc_html($image_url); ?>" alt="<?php echo esc_html($image_alt); ?>" class="gallery__image">
<figcaption class="gallery__caption"><?php echo esc_html(get_theme_mod('portrait_by_settings', 'Portrait by: Glauco Paganotti')); ?></figcaption>
</figure>
</a>
</div>
</div>
<?php
}
}
?>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<?php get_footer(); ?>
My question is how to blend these two approaches and get dynamically all images from a post in full size. I have understood that by using wp_get_attachment_image_url once an image attached to a post will be sticky to this post and cannot be unattached.
Also, using the regular expression to get the the image address throught html its passing the following formart:
<img src="http://glauco.local/wp-content/uploads/2023/07/Opera-House-09-300x125.jpg" alt="" class="gallery__image">
It seems that it is getting the a thumbnail version of the image 300*125 from the source insted of the full size. Any ideas on how to get the full size? Cheers!
To get the full size from a WP sized image URL, you can use the following regular expression :
$image_url = 'http://glauco.local/wp-content/uploads/2023/07/Opera-House-09-300x125.jpg'
// Remove WP dimensions from URL
$image_url_full = preg_replace('~-[0-9]+x[0-9]+.~', '.', $image_url);
echo '<pre>'. print_r( $image_url_full, true ) . '</pre>';
You will get the full size image URL:
http://glauco.local/wp-content/uploads/2023/07/Opera-House-09.jpg