0

I would like to get the URL's of my custom image sizes for a featured image - so I can inject them conditionally.

(this in functions.php)
To start off, I'm removing the default crop sizes because I never use them.

// remove all the default image sizes
function sgr_filter_image_sizes( $sizes) {
    unset( $sizes['thumbnail']);
    unset( $sizes['medium']);
    unset( $sizes['large']);
    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'sgr_filter_image_sizes');



Then defining the new sizes that I'll use.

// add custom image sizes
function add_custom_image_sizes() {
    add_image_size ( 'small-screen', 700, 350, true );
    add_image_size ( 'medium-screen', 1200, 600, true );
    add_image_size ( 'large-screen', 2000, 1000, true );
    add_image_size ( 'extra-large-screen', 3200, 1600, true );
}
add_action('init', 'add_custom_image_sizes');



Then in my HTML/PHP, I'm doing something like this

    <?php if ( has_post_thumbnail() ) { ?>

        <?php $thisPostId = get_post_thumbnail_id(); ?>
        <img src="some-blank-image-of-the-correct-ratio.png"
            data-url-small="<?php echo wp_get_attachment_image_src( $thisPostId, 'small-screen' ); ?>"
            data-url-medium="<?php echo wp_get_attachment_image_src( $thisPostId, 'medium-screen' ); ?>"
            data-url-large="<?php echo wp_get_attachment_image_src( $thisPostId, 'large-screen' ); ?>"
            data-url-extra-large="<?php echo wp_get_attachment_image_src( $thisPostId, 'extra-large-screen' ); ?>"
            alt=''>

    <?php } else { ?>

        <img src='http://placehold.it/1600x800/333/&text=No featured image yet' alt=''>

    <?php } ?>



Then in my JavaScript - I can choose white URL to use based on a set of circumstances.

I'm getting a soft failure that returns the full image for each.

This is on a single-customPostType page, and is not in a loop.

4
  • What is the javascript you are using? What are the conditions? – amespower Aug 15 '15 at 20:11
  • The conditions are windowWidth, it's parent element width, if it's a background-image or inline. The javascript isn't really relevant to the problem though. – sheriffderek Aug 15 '15 at 20:16
  • 1
    I think you want wp_get_attachment_image_src. – Milo Aug 15 '15 at 20:19
  • Ah - Yes - I had found that route - but after my initial post. – sheriffderek Aug 15 '15 at 20:25
0

So, I finally noticed that what I was doing, was returning an array, and that I needed the [0] of that array. The code is on the ugly side, but it works.

<?php
    $thumb_id = get_post_thumbnail_id();
    $small_screen = wp_get_attachment_image_src($thumb_id,'small-screen', true);
    $medium_screen = wp_get_attachment_image_src($thumb_id,'medium-screen', true);
    $large_screen = wp_get_attachment_image_src($thumb_id,'large-screen', true);
    $extra_large_screen = wp_get_attachment_image_src($thumb_id,'extra-large-screen', true);
?>

-

<div class='container hero-w'
    data-background-large='<?php echo $large_screen[0]; ?>'
    data-background-extra-large='<?php echo $extra_large_screen[0]; ?>'>

    <div class='inner-w'>

        <div class='image-w hero'>

            <?php if ( has_post_thumbnail() ) { ?>

                <img src="<?php echo get_template_directory_uri(); ?>/images/2x1.png"
                    data-image-small="<?php echo $small_screen[0]; ?>"
                    data-image-medium="<?php echo $medium_screen[0]; ?>"
                    data-image-large="<?php echo $large_screen[0]; ?>"
                    alt=''>

            <?php } else { ?>

                <img src='http://placehold.it/1600x800/333/&text=No featured image yet' alt=''>

            <?php } ?>


        </div>

    </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.