Twenty Fourteen: Add full-width featured image size

[iamtakashi]

Since #25031 and changeset:25624 the content sidebar is optional and users can have cleaner full-with layout when the content sidebar is not active, and this is the default layout.

However the maximum width of the featured image is currently 672px and the layout option is a kind of a half baked layout feature at the moment.

​Before and after comparison.

There is no set proportional ratio like the default thumbnail so users can upload more slim, panorama like image if they want to.

In my opinion, this makes sense especially with ​the slider design and it's what the design needs. I believe users would find this useful, especially photo centric magazine sites, but we're not forcing users to have such a large image with this, it's optional and they can still upload smaller images if they want to.

Related: #25031

[lancewillett]

I thought we'd decided to use the smaller image because of performance (especially on mobile). Does your patch take into account cases like small screens where you don't need to load the 1038 pixel-wide image?

Let's discuss more in office hours, I also know @obenland was very against adding a bigger image size, so I'll want his opinion also.

[lancewillett]

Noting that in r25979 we added the bigger size anyway. :) So let's re-look at this soon, in the context of:

1. Performance: we shouldn't load huge images unless they can be displayed at that size
2. Design: is the wider image essential to the design? (Takashi argues "yes" in this ticket)

[iamtakashi]

Replying to lancewillett:

I thought we'd decided to use the smaller image because of performance (especially on mobile).

Just to note that ​we didn't decided to not to add but we planed to revisit this later.

[iamtakashi]

Replying to lancewillett:

Noting that in r25979 we added the bigger size anyway. :) So let's re-look at this soon, in the context of:

1. Performance: we shouldn't load huge images unless they can be displayed at that size

The current trend of having large images on websites and the growing mobile usage are against each other for sure. We need an elegant way to handle responsive image loading. But what I'm not sure is whether a theme should handle responsive image loading or leave it to plugins or even the core. What's your opinion on this?

2. Design: is the wider image essential to the design? (Takashi argues "yes" in this ticket)

Yes, it is absolutely essential for the full-width layout in my opinion. It just looks bad and because of the feeling of "missing", it could look like a bug in a way. If the theme doesn't let users upload full-width featured images, it's better to remove the full-width layout option.

[lancewillett]

@iamtakashi Can you refresh this patch please?

[iamtakashi]

Attached a refreshed patch.

wp_is_mobile() certainly helps to not to send the full-width thumbnail to mobile devices but since it also returns true for iPad which is wider than the width of the regular post thumbnail, it ends up like this: ​https://cloudup.com/cJhJD8LDg6C

I think using wp_is_mobile() is outweigh that iPad users won't see the full-width thumbnail until the core has better dynamic image loading, but what do you guys think? Is there any better approach that makes sense to have in a theme?

[lancewillett]

Replying to iamtakashi:

I think using wp_is_mobile() is outweigh that iPad users won't see the full-width thumbnail until the core has better dynamic image loading

I agree, for now. It'd be nice if core had more granular methods, like is_tablet().

Is there any better approach that makes sense to have in a theme?

Good question; let's explore other ways.

One possibility is a lightweight JS file that handles loading the correct image size based on viewport width. It would run once for each page load and update the featured images in the page.

[lancewillett]

In 26026:

Twenty Fourteen: add full-width featured images for layouts without a content sidebar, but use wp_is_mobile() to load smaller-sized images for mobile. Props iamtakashi, fixes #25758.