Skip to content

Instantly share code, notes, and snippets.

@moxdev

moxdev/focal-point-cropping-picture-tag-for-post-thumbnail.php

Last active July 1, 2019 19:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save moxdev/ab2267b27193603c107f2f1297c5b63a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save moxdev/ab2267b27193603c107f2f1297c5b63a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. moxdev revised this gist Jul 1, 2019. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions focal-point-cropping-picture-tag-for-post-thumbnail.php
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,6 @@
    <?php
    // UPDATE: This may also be accomplished with object-postion css property depending on your needs. Check that first.

    /**
    * Focal Point Cropping using post_thumbnail(); featured image of page.
    * - displays post_thumbnail() at different crops at different breakpoints
  2. moxdev created this gist Jun 28, 2019.
    69 changes: 69 additions & 0 deletions focal-point-cropping-picture-tag-for-post-thumbnail.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,69 @@
    <?php
    /**
    * Focal Point Cropping using post_thumbnail(); featured image of page.
    * - displays post_thumbnail() at different crops at different breakpoints
    * - using the <picture></picture> tag srcset to returnt the correct img
    * - decide on image widths and change crop sizes
    * - edit source "media" widths to coorespond with crop sizes
    */

    // Add crop sizes to functions.php.
    add_image_size( 'cropped-front-page-hero-xs', 400, 667, array( 'right', 'top' ) );
    add_image_size( 'cropped-front-page-hero-sm', 600, 667, array( 'right', 'top' ) );
    add_image_size( 'cropped-front-page-hero-md', 800, 667, array( 'right', 'top' ) );
    add_image_size( 'cropped-front-page-hero-lg', 1000, 667, array( 'right', 'top' ) );
    add_image_size( 'cropped-front-page-hero-xl', 1366, 667, true );

    /**
    * Get the id, alt, title, urls of post_thumbnail.
    * - [0] returns the image url from array
    * - wp_get_attachment_image_src( $img_id, 'cropped-front-page-hero-xl' )[0]
    * - See docs - https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/#user-contributed-notes
    */
    $img_id = get_post_thumbnail_id();
    $img_alt = get_post_meta( $img_id, '_wp_attachment_image_alt', true );
    $img_title = get_the_title( $img_id ) ? get_the_title( $img_id ) : $img_alt;
    $img_url_xs = wp_get_attachment_image_src( $img_id, 'cropped-front-page-hero-xs' )[0];
    $img_url_sm = wp_get_attachment_image_src( $img_id, 'cropped-front-page-hero-sm' )[0];
    $img_url_md = wp_get_attachment_image_src( $img_id, 'cropped-front-page-hero-md' )[0];
    $img_url_lg = wp_get_attachment_image_src( $img_id, 'cropped-front-page-hero-lg' )[0];
    $img_url_xl = wp_get_attachment_image_src( $img_id, 'cropped-front-page-hero-xl' )[0];

    ?>
    <figure class="feature-wrapper">
    <picture>
    <source type="image/jpg"
    media="(min-width: 1001px)"
    srcset="<?php echo esc_url( $img_url_xl ); ?>"
    alt="<?php echo esc_attr( $img_alt ); ?>"
    title="<?php echo esc_attr( $img_title ); ?>" >

    <source type="image/jpg"
    media="(min-width: 801px) and (max-width: 1000px)"
    srcset="<?php echo esc_url( $img_url_lg ); ?>"
    alt="<?php echo esc_attr( $img_alt ); ?>"
    title="<?php echo esc_attr( $img_title ); ?>" >

    <source type="image/jpg"
    media="(min-width: 601px) and (max-width: 800px)"
    srcset="<?php echo esc_url( $img_url_md ); ?>"
    alt="<?php echo esc_attr( $img_alt ); ?>"
    title="<?php echo esc_attr( $img_title ); ?>" >

    <source type="image/jpg"
    media="(min-width: 421px) and (max-width: 600px)"
    srcset="<?php echo esc_url( $img_url_sm ); ?>"
    alt="<?php echo esc_attr( $img_alt ); ?>"
    title="<?php echo esc_attr( $img_title ); ?>" >

    <source type="image/jpg"
    media="(max-width: 420px)"
    srcset="<?php echo esc_url( $img_url_xs ); ?>"
    alt="<?php echo esc_attr( $img_alt ); ?>"
    title="<?php echo esc_attr( $img_title ); ?>" >

    <img src="<?php the_post_thumbnail_url(); ?>" alt="<?php echo esc_attr( $img_alt ); ?>"
    title="<?php echo esc_attr( $img_title ); ?>" >
    </picture>
    </figure>
    <?php