Cách thêm hình ảnh nổi bật trước khi nhập vào các Bài đăng đơn lẻ trong Genesis

Thủ thuật WordPress
1

Trong Genesis Slack, một người dùng đã hỏi,

Xin chào mọi người, tôi đang làm việc trên một chủ đề tùy chỉnh và tôi muốn tùy chỉnh hình ảnh nổi bật của mình để trông giống như sau: https://preview.arraythemes.com/publisher/2015/05/20/heydays-branding/

Chúng tôi có thể đăng ký kích thước hình ảnh tùy chỉnh cho các hình ảnh nổi bật trên các Bài đăng đơn lẻ và hiển thị hình ảnh nổi bật (nếu có) bằng genesis_before_entry hook trong Genesis.

Bước 1

Thêm phần sau vào functions.php của chủ đề con :

// Register a custom image size for featured image on single Posts.
add_image_size( 'post-image', 900, 540, true );

add_action( 'genesis_before_entry', 'sk_featured_image' );
/**
 * Display featured image (if present) before entry on single Posts
 */
function sk_featured_image() {
    // if we are not on a single Post having a featured image, abort.
    if ( ! ( is_singular( 'post' ) && has_post_thumbnail() ) ) {
        return;
    }

    // get the URL of featured image.
    $image = genesis_get_image( 'format=url&size=post-image' );

    // get the alt text of featured image.
    $thumb_id = get_post_thumbnail_id( get_the_ID() );
    $alt = get_post_meta( $thumb_id, '_wp_attachment_image_alt', true );

    // if no alt text is present for featured image, set it to Post title.
    if ( '' === $alt ) {
        $alt = the_title_attribute( 'echo=0' );
    }

    // get the caption of featured image.
    $caption = get_post( $thumb_id )->post_excerpt;

    // build the caption HTML if caption is present for the featured image..
    $caption_html = $caption ? '<figcaption class="wp-caption-text">'. $caption . '</figcaption>' : '';

    // display the featured image with caption (if present) beneath the image.
    printf( '<figure class="single-post-image wp-caption"><img src="%s" alt="%s" />%s</figure>', esc_url( $image ), $alt, $caption_html );
}

Cảm ơn Gary Jones trong quá khứ đã giúp tạo mã để đặt văn bản thay thế cho văn bản của hình ảnh, nếu có đối với tiêu đề mục nhập.

Bước 2

Tạo lại hình thu nhỏ.

Bước 3

Thêm phần sau vào style.css của chủ đề con :

.single-post-image img {
    vertical-align: top;
}