Theme defined image sizes

[arraypress]

While staying strict to EDD the download featured images are set based on the WordPress media/thumbnail sizes, which isn't ideal within a theme like this that uses larger images on the product grid, etc.

Ideally theme specific image sizes would be set up in the functions.php file that could be overridden by child themes for the various parts of EDD.

[arraypress]

What are your thoughts on this one @amdrew? Feel theme specific image sizes are a good idea to people don't need to manually configure them (room for error).

[amdrew]

Need to find my notes on why I didn't include any add_image_size calls initially.

[arraypress]

@amdrew, did you find anything in your notes regarding this? Curiously is there a way via filters to set custom image sizes for EDD, and if so do you have any example code? I would be looking for the grid (archive pages) and featured image on the product page itself.

[amdrew]

@davidsherlock Yes, will post something today.

Custom image sizes don't require the use of any filters, you can set them from the child theme using add_image_size(): https://developer.wordpress.org/reference/functions/add_image_size/

Note, you can't specify custom image sizes for a specific post type, images are generated no matter where the image is uploaded from.

[amdrew]

@davidsherlock + @SDavisMedia

I'd love to hear any feedback on why we need custom image sizes for any EDD theme. Perhaps I'm missing something obvious.

If you upload an image through the media library of WordPress, 6 images are created (incl the one you uploaded) with Themedd:

indranil-roy-57688.jpg This is the original image I uploaded.

indranil-roy-57688-1024x679.jpg This is the large size defined in Media Settings.

indranil-roy-57688-800x531.jpg This is the medium size defined in Media Settings.

indranil-roy-57688-771x511.jpg This sets the default Featured Image dimensions and is generated from the set_post_thumbnail_size() function: https://codex.wordpress.org/Function_Reference/set_post_thumbnail_size

indranil-roy-57688-768x509.jpg This image is what WordPress (since v4.4) calls the medium_large image. See https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

indranil-roy-57688-480x318.jpg This is the thumbnail size defined in Media Settings.

Notes:

1. add_image_size() cannot be limited to a specific custom post type. This means that if the theme adds an additional 3 custom image sizes, 9 images will be created for every image uploaded to WordPress, regardless of whether they were uploaded for a download in EDD. This takes up a lot of server space over time.

2. EDD already uses the thumbnail size (from WP media settings) for images on the download grid. If you were to create a custom image size, you would need to modify this template file. https://github.com/easydigitaldownloads/easy-digital-downloads/blob/master/templates/shortcode-content-image.php#L4

3. The size of an image on the single download page is generally going to be the same size as an image that you use for a post. At least in Themedd it is.

Between the 6 image sizes above it looks like all bases are covered for images?

[SeanTOSCD]

You don't need them at all. I sometimes put them in my themes if I want hard cropped images to demand uniformity, as dictated by my design choices.

Outside of that, there's zero reason why they have to be built into Themedd... especially if you provide a filter for the size parameter in the thumbnail function. The rest can be done from a child theme.

[amdrew]

Thanks for your feedback @SDavisMedia!

[amdrew]

Pretty sure you can also filter the thumbnail without needing to add any additional filters.

[SeanTOSCD]

I was thinking that but didn't feel like going to confirm lol. Would be important to make sure it could be targeted in specific places, though. Perhaps you only want full modified on products, but not on posts or pages.

[arraypress]

@amdrew, I see what you are saying here - however I need some example code to get me going in my child theme. Still getting to grips with the WP theme/dev stuff! :)

What dictates the size of the image on the single download page and how do I override this? isn't the set by something like this in the parent theme:

if ( ! isset( $content_width ) ) {
    $content_width = 770; /* pixels */
}

Since the $content_width seems to control how the images are resized in themes?

I guess my questions would be:

1. The thumbnail size is used for the archive pages, but where are the medium and large sized used by EDD, or in the theme?

2. How do I override (or apply a filter) to the single download page image size to allow for larger images/cropping, etc from my child theme? Can you post a little example on how to achieve this?

3. I need to apply some logic to the feature image on the product page (i know how to do this on the archive page via modifying the edd shortcode template), but how would I override your function to use my own on the single download page? For example I have set custom post format types to allow galleries, audio, etc and need to resize accordingly.

4. EDD provides the ability to set "columns" on the archive page, so if a single column layout is used the same thumbnail size is used. It would make more sense if 3 columns were used to load smaller images to save on download size, is it possible to conditionally set the image size used based on the column attribute set on the [downloads] shortcode?

[amdrew]

@davidsherlock I'm going to close this issue but will flick you an email when I get time that hopefully answers your questions above.