在 WordPress 中加载精选滑块图像而不进行裁剪

Question

我目前正在构建我的第一个基于 WordPress 的网站。我正在使用Bold Photography Theme，其中我已经创建了一个子主题。我在“主题选项”中激活了特色滑块选项，它会循环显示我选择的几个页面。

问题是页面中的图像被裁剪，我想避免这种情况。 WordPress（或 PHP？）不应该自动缩放图像以适应屏幕吗？

我实际上不希望滑块中的未裁剪的图像占据整个屏幕，而是在图像周围留出空白，以便我可以看到后面的主页。

有一个post-type-slider.php

<?php

$quantity     = get_theme_mod( 'bold_photography_slider_number', 4 );
$no_of_post   = 0; // for number of posts
$post_list    = array(); // list of valid post/page ids
$show_content = get_theme_mod( 'bold_photography_slider_content_show', 'hide-content' );

$args = array(
    'post_type'           => 'any',
    'orderby'             => 'post__in',
    'ignore_sticky_posts' => 1, // ignore sticky posts
);

    for ( $i = 1; $i <= $quantity; $i++ ) {
        $post_id = '';

        $post_id = get_theme_mod( 'bold_photography_slider_page_' . $i );

        if ( $post_id && '' !== $post_id ) {
            $post_list = array_merge( $post_list, array( $post_id ) );

            $no_of_post++;
        }
    }

    $args['post__in'] = $post_list;


if ( ! $no_of_post ) {
    return;
}

$args['posts_per_page'] = $no_of_post;

$loop = new WP_Query( $args );

while ( $loop->have_posts() ) :
    $loop->the_post();

    $classes = 'post post-' . get_the_ID() . ' hentry slides';
    
    $thumbnail = 'post-thumbnail';
    ?>
    <article class="<?php echo esc_attr( $classes ); ?>">
        <div class="hentry-inner">
            <?php bold_photography_post_thumbnail( $thumbnail, 'html', true, true ); ?>
            
            <div class="entry-container">
                <header class="entry-header">
                    <h2 class="entry-title">
                        <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>">
                            <?php the_title(); ?>
                        </a>
                    </h2>
                </header>

                <?php
                if ( 'excerpt' === $show_content ) {
                    echo '<div class="entry-summary"><p>' . wp_kses_post( get_the_excerpt() ) . '</p></div><!-- .entry-summary -->';
                } elseif ( 'full-content' === $show_content ) {
                    $content = apply_filters( 'the_content', get_the_content() );
                    $content = str_replace( ']]>', ']]&gt;', $content );
                    echo '<div class="entry-content">' . wp_kses_post( $content ) . '</div><!-- .entry-content -->';
                } 
                ?>
            </div><!-- .entry-container -->
        </div><!-- .hentry-inner -->
    </article><!-- .slides -->
<?php
endwhile;

wp_reset_postdata();

并且style.css中有feature-slider元素

/**
 * 14.1 - Slider
 */

#feature-slider-section {
    border: none;
    padding: 0;
}

#feature-slider-section .wrapper {
    max-width: 100%;
    padding: 0;
}

#feature-slider-section .hentry {
    margin: 0;
    padding: 0;
}

#feature-slider-section .hentry-inner {
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    min-height: 100vh;
    overflow: hidden;
    padding: 100px 30px;
    position: relative;
}

#feature-slider-section .post-thumbnail {
    margin: 0;
    position: unset;
}

#feature-slider-section .post-thumbnail img {
    height: auto;
    left: 50%;
    max-width: 1000%;
    min-height: 100%;
    min-width: 100vw;
    position: absolute;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: auto;
    z-index: -1;
}

@supports (object-fit: cover) {
    #feature-slider-section .post-thumbnail img {
        height: 100%;
        left: 0;
        object-fit: cover;
        top: 0;
        transform: none;
        width: 100%;
    }
}

#feature-slider-section .entry-container {
    display: block;
    opacity: 0;
    position: relative;
    visibility: hidden;
    left: 80px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    -webkit-transition-delay: .4s;
    -moz-transition-delay: .4s;
    -o-transition-delay: .4s;
    -ms-transition-delay: .4s;
    transition-delay: .4s;
    z-index: 9;
}

#feature-slider-section .active .entry-container {
    opacity: 1;
    visibility: visible;
    left: 0;
}

#feature-slider-section .entry-container > * {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

#feature-slider-section .entry-container > * > * {
    max-width: 470px;
    margin-right: auto;
}

#feature-slider-section .entry-title {
    font-weight: 500;
    margin: 0;
}

#feature-slider-section .entry-summary,
#feature-slider-section .entry-content {
    display: none;
}

编辑1：bold_photography_post_thumbnail函数

function bold_photography_post_thumbnail( $image_size = 'post-thumbnail', $type = 'html', $echo = true, $no_thumb = false ) {
        $image = $image_url = '';
        
        if ( has_post_thumbnail() ) {
            $image_url = get_the_post_thumbnail_url( get_the_ID(), $image_size );
            $image     = get_the_post_thumbnail( get_the_ID(), $image_size );
        } else {
            if ( $no_thumb ) {
                global $_wp_additional_image_sizes;

                $image_url  = trailingslashit( get_template_directory_uri() ) . 'assets/images/no-thumb-' . $_wp_additional_image_sizes[ $image_size ]['width'] . 'x' . $_wp_additional_image_sizes[ $image_size ]['height'] . '.jpg';
                $image      = '<img src="' . esc_url( $image_url ) . '" alt="" />';
            }

            // Get the first image in page, returns false if there is no image.
            $first_image_url = bold_photography_get_first_image( get_the_ID(), $image_size, '', true );

            // Set value of image as first image if there is an image present in the page.
            if ( $first_image_url ) {
                $image_url = $first_image_url;
                $image = '<img class="wp-post-image" src="'. esc_url( $image_url ) .'">';
            }
        }

        if ( ! $image_url ) {
            // Bail if there is no image url at this stage.
            return;
        }

        if ( 'url' === $type ) {
            return $image_url;
        }

        $output = '<div';

        if ( 'html-with-bg' === $type ) {
            $output .= ' class="post-thumbnail-background" style="background-image: url( ' . esc_url( $image_url ) . ' )"';
        } else {
            $output .= ' class="post-thumbnail"';
        }

        $output .= '>';

        if ( 'html-with-bg' !== $type ) {
            $output .= '<a href="' . esc_url( get_the_permalink() ) . '" title="' . the_title_attribute( 'echo=0' ) . '">' . $image;
        } else {
            $output .= '<a class="cover-link" href="' . esc_url( get_the_permalink() ) . '" title="' . the_title_attribute( 'echo=0' ) . '">';
        }

        $output .= '</a></div><!-- .post-thumbnail -->';

        if ( ! $echo ) {
            return $output;
        }

        echo $output;
    }

Answer 1

根据您上面的输入，您需要做的就是更新这个

$thumbnail = 'post-thumbnail';

到

$thumbnail = 'full';

或者你可以通过更新来简化。

while ( $loop->have_posts() ) :
    $loop->the_post();

    $classes = 'post post-' . get_the_ID() . ' hentry slides';

    $thumbnail = 'post-thumbnail';
    ?>
    <article class="<?php echo esc_attr( $classes ); ?>">
        <div class="hentry-inner">
            <?php bold_photography_post_thumbnail( $thumbnail, 'html', true, true ); ?>

到这里：

while ( $loop->have_posts() ) :
    $loop->the_post();

    $classes = 'post post-' . get_the_ID() . ' hentry slides';
    ?>
    <article class="<?php echo esc_attr( $classes ); ?>">
        <div class="hentry-inner">
            <?php bold_photography_post_thumbnail( 'full', 'html', true, true ); ?>

使用它会返回“全宽”未裁剪的图像。它是否以 100% 宽度显示将是 CSS 的一个函数。