英文:

How to get full size image url from WordPress sized image with PHP

问题 {#heading}

以下是您要翻译的内容：

"使用了两种类似问题的两种方法：https://stackoverflow.com/questions/28945473/get-all-images-from-wordpress-post 和 https://stackoverflow.com/questions/43677661/get-all-images-attached-to-any-post"

"我已经想出了两种代码。问题在于其中一种使用了 wp_get_attachment_image_url 并获取了附加到帖子的所有图像的全尺寸，但它不会动态更改，这意味着如果您从 WordPress 帖子中删除图像，它仍然会保留在那里。这个代码如下："

"另一个使用正则表达式的函数来获取图像地址，来自 https://stackoverflow.com/questions/28945473/get-all-images-from-wordpress-post，但问题是它没有获取到全尺寸的图像。代码如下："

"函数 functions.php 中的代码："

"single.php 中的代码："

"我的问题是如何将这两种方法结合起来，以动态获取帖子中的所有图像并获取全尺寸。我已经了解到，使用 wp_get_attachment_image_url 一旦将图像附加到帖子，该图像将会与此帖子粘在一起，无法取消附加。"

"此外，使用正则表达式通过 HTML 获取图像地址，其格式如下："

"它似乎获取了缩略图版本的图像 300*125 从源中，而不是全尺寸。有关如何获取全尺寸的任何想法吗？"

"谢谢！" 英文:

After seening to similar questions <https://stackoverflow.com/questions/28945473/get-all-images-from-wordpress-post> and <https://stackoverflow.com/questions/43677661/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 <https://stackoverflow.com/questions/28945473/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!

答案1 {#1}

得分: 1

获取WP 大小图像URL的完整尺寸，您可以使用以下正则表达式：

$image_url = 'http://glauco.local/wp-content/uploads/2023/07/Opera-House-09-300x125.jpg';

// 从URL中删除WP尺寸
$image_url_full = preg_replace('~-[0-9]+x[0-9]+.~', '.', $image_url);

echo '<pre>' . print_r( $image_url_full, true ) . '</pre>';

您将获得完整尺寸的图像URL：

http://glauco.local/wp-content/uploads/2023/07/Opera-House-09.jpg

英文:

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