如何使用 PHP 从 WordPress 大小的图像获取全尺寸图像 url

Question

看到类似的问题后从wordpress帖子中获取所有图像和获取附加到任何帖子的所有图像

我想出了两个代码。问题是，使用 wp_get_attachment_image_url 并以完整尺寸获取附加到帖子的所有图像，但它不会动态更改，这意味着如果您从 WordPress 帖子中删除图像，它仍然会在那里。这个的代码是：

<?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(); ?>

另一个使用来自从wordpress post获取所有图像中的带有正则表达式的函数，问题是它没有获取完整尺寸的图像。代码是： 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' );

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(); ?>

我的问题是如何混合这两种方法并动态地从帖子中获取全尺寸的所有图像。我了解到，通过使用 wp_get_attachment_image_url 一旦附加到帖子的图像将粘在该帖子上并且无法取消附加。

另外，使用正则表达式通过html传递以下格式来获取图像地址：

<img src="http://glauco.local/wp-content/uploads/2023/07/Opera-House-09-300x125.jpg" alt="" class="gallery__image">

它似乎正在从全尺寸的源中获取图像 300*125 的缩略图版本。关于如何获得完整尺寸有什么想法吗？ 干杯！

Answer 1

要从 WP sized 图像 URL 获取完整尺寸，您可以使用以下正则表达式：

$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>';

您将获得全尺寸图片网址：

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