Added args for sizes, aspect ratio, included/excluded sizes.

[jhned]

Like @joemcgill suggested, I added support for $args to the tevkori_get_src_sizes function. I also added a few more options:

1. maintain_aspect_ratio is used during the $default_sizes loop: if set to true, it executes the aspect ratio (or crop) check.
2. included_sizes allows a developer to specify which WordPress image sizes to include in the srcset string.
3. excluded_sizes allows a developer to specify which WordPress image sizes to exclude from the srcset string.

In order to give a developer a way to hook into the srcset/sizes function, I added two filter functions: tevkori_apply_content_src_filter and tevkori_apply_post_thumbnail_src_filter, which tevkori_extend_image_tag and tevkori_filter_post_thumbnail_html use, respectively. They can probably be condensed, but it's late and I'm tired.

The two filter functions first run the tevkori_get_src_sizes function, and then apply any filters added to tevkori_get_content_src_sizes_filter and tevkori_get_post_thumbnail_src_sizes_filter.

Here's an example of modifying content images:

function debug_modify_content_images( $src_sizes, $id, $size, $args ) {

    $args = array(
        'sizes' => array(
            array(
                'media_query' => '(min-width: 36em)',
                'width' => '33.3vw'
            ),
            array(
                'width' => '100vw'
            )
        ),
        'included_sizes' => array(
            'tevko_content_image_small',
            'tevko_content_image_medium',
            'tevko_content_image_large'
        ),
        'maintain_aspect_ratio' => TRUE
    );

    $new_src_sizes = tevkori_get_src_sizes( $id, $size, $args );

    if ( '' != $new_src_sizes ) {
        $src_sizes = $new_src_sizes;
    }

    return $src_sizes;
}
add_filter( 'tevkori_get_content_src_sizes_filter', 'debug_modify_content_images', 1, 4 );

And modifying post thumbnails:

function debug_modify_post_thumbnails( $src_sizes, $id, $size, $args ) {

    $args = array(
        'sizes' => array(
            array(
                'width' => '100vw'
            )
        ),
        'included_sizes' => array(
            'tevko_post_thumbnail_small',
            'tevko_post_thumbnail_medium',
            'tevko_post_thumbnail_large'
        ),
        'maintain_aspect_ratio' => FALSE
    );

    $new_src_sizes = tevkori_get_src_sizes( $id, $size, $args );

    if ( '' != $new_src_sizes ) {
        $src_sizes = $new_src_sizes;
    }

    return $src_sizes;
}
add_filter( 'tevkori_get_post_thumbnail_src_sizes_filter', 'debug_modify_post_thumbnails', 1, 4 );

Here's my full debug code that I used when testing:

<?php

add_image_size( 'tevko_post_thumbnail_small', '400', '400', true );
add_image_size( 'tevko_post_thumbnail_medium', '600', '400', true );
add_image_size( 'tevko_post_thumbnail_large', '900', '400', true );

add_image_size( 'tevko_content_image_small', '300', '200', true );
add_image_size( 'tevko_content_image_medium', '600', '400', true );
add_image_size( 'tevko_content_image_large', '900', '600', true );


function debug_image_sizes_to_media_uploader($sizes) {

    $addsizes = array(
        "tevko_content_image_small" => __( "Content Small"),
        "tevko_content_image_medium" => __( "Content Medium"),
        "tevko_content_image_large" => __( "Content Large")
    );

    $newsizes = array_merge($sizes, $addsizes);

    return $newsizes;
}
add_filter('image_size_names_choose', 'debug_image_sizes_to_media_uploader');


function debug_modify_content_images( $src_sizes, $id, $size, $args ) {

    $args = array(
        'sizes' => array(
            array(
                'media_query' => '(min-width: 36em)',
                'width' => '33.3vw'
            ),
            array(
                'width' => '100vw'
            )
        ),
        'included_sizes' => array(
            'tevko_content_image_small',
            'tevko_content_image_medium',
            'tevko_content_image_large'
        ),
        'maintain_aspect_ratio' => TRUE
    );

    $new_src_sizes = tevkori_get_src_sizes( $id, $size, $args );

    if ( '' != $new_src_sizes ) {
        $src_sizes = $new_src_sizes;
    }

    return $src_sizes;
}
add_filter( 'tevkori_get_content_src_sizes_filter', 'debug_modify_content_images', 1, 4 );


function debug_modify_post_thumbnails( $src_sizes, $id, $size, $args ) {

    $args = array(
        'sizes' => array(
            array(
                'width' => '100vw'
            )
        ),
        'included_sizes' => array(
            'tevko_post_thumbnail_small',
            'tevko_post_thumbnail_medium',
            'tevko_post_thumbnail_large'
        ),
        'maintain_aspect_ratio' => FALSE
    );

    $new_src_sizes = tevkori_get_src_sizes( $id, $size, $args );

    if ( '' != $new_src_sizes ) {
        $src_sizes = $new_src_sizes;
    }

    return $src_sizes;
}
add_filter( 'tevkori_get_post_thumbnail_src_sizes_filter', 'debug_modify_post_thumbnails', 1, 4 );

[joemcgill]

@jhned a lot of good thinking here. I've got some questions, mainly about the use of the maintain_aspect_ratio argument you're proposing.

This looks to me to be trying to solve the art direction use case instead of simple source switching based on the viewport size or pixel density of the screen. If that's the case, I believe that art direction should be handled by using the <picture> element instead, which I believe is outside the scope of this plugin. If I'm misunderstanding why you would want to short circuit the aspect ratio check, could you explain the use case where you think it would be beneficial?

I like the idea of adding arguments that allow developers to be more selective about which image sizes get included/excluded. Would you be open to shortening the argument names to include and exclude to match similar arguments in WP core functions like get_posts()?

[jhned]

@joemcgill, that's true, I was trying to provide for an art direction use case with the <img> tag. I'm not as familiar with the spec as you probably are, but is that specifically against the spec? Or is the <picture> just the recommended way to do it?

If it's all the same to everybody else, I would prefer to keep it in, because srcset is already supported, but we're going to have a much longer wait for <picture>.

Here's a beneficial use case: say you had a 16:9 featured image on desktop, but you want that featured image to be 3:2 on mobile. Technically that's art direction, since you're not just doing simple source switching. But if you didn't do that, the featured image would be about 50px tall on mobile.

And of course, shortening the names of the arguments is peachy. (Do I do that before the merge, or do we do that after? If I do it, should I create a new pull request? I'm still relatively new to Github processes)

I also updated a couple of function and variable names in the process, to keep the code clear. We may need to update them as well.

[aFarkas]

@jhned
@joemcgill is right here. You shouldn't do the aspect_ratio thing. aspect_ratio is a lot about layout pixels, while srcset is a lot about device pixels.

An example: Someone uses your aspect_ratio option and only tests on a 1x device. He will like the fact, that on a small screen (less than 500px) another image is used. As soon as he tests this with his mobile device the result is totally different, than he has expected it. Although he only has 320-400 layout pixels the wrong image for his layout is used (because 320 - 400 is multiplied with 2).

Additionally currently the srcset selection by browser is quite predictable. Chrome uses something like the nearest match for the required resolution, but don't expect that this will be always the case in the future.

About picture support. This is really something, that can be indirectly already achieved by using the get srcset API.

[aFarkas]

oh by the way in chrome 40+ is already some code, which make it less predictable. In case an image candidate is in cache and has enough resolution this images is chosen.

[jhned]

Ok, I can take the aspect ratio argument out. @joemcgill, is there anything else besides that and the argument names I should change in order for the pull request to be accepted?

I saw that @tevko changed tevkori_get_src_sizes to tevkori_get_srcset_array. Would it be best to have one function for tevkori_get_src_sizes, or two functions, tevkori_get_srcset_array and tevkori_get_sizes_array?

[joemcgill]

I haven't tested the code, but in principle I would be cool with the PR once the aspect ratio arg is stripped and the others are renamed. @tevko will have to pull the trigger, so he can better speak to the function names. Thanks again!

[jhned]

Ok, good deal. @tevko, do you have a preference on the functions?

[joemcgill]

I was looking over this tonight after spending some time thinking about how to best deliver the sizes functionality we discussed in #34 along with the right mix of dev hooks. We may want to push pause until we get our heads around the big picture.

For example, I'd like to see us separate the functionality that sets up the sizes and srcset attributes into two separate paths, both of which return attribute strings in a consistent manner, which could be used as standalone functions by developers wanting to extend/override our filters or create their own template tags out of the functionality we provide.

Even so, this is a useful proof of concept to help us get the ball moving in that direction.

[jhned]

I'd agree with that. The more flexible the code is, the better.

[tevko]

@jhned thank you for this, it is very helpful. I will close this for now as we regroup and plan for the next iteration of the plugin. More than likely some of this will still make it into the core plugin as we will definitely be using this as a reference