metabox - Serving a custom featured image for mobile

admin管理员组

文章数量:1130349

is it a good approach to serve multiple featured images to have a proper scaling?

Right now the featured image size on "Desktop" is up to 1140x250. Pretty wide and will shrink way too far on "Mobile 1", until you can't really recognize the image anymore.

My idea was to just serve a second featured image for mobile phones up to like 500px. The size of this "Mobile 2" featured image would be something like 500x250.

Pro: Ability to serve different images on mobile/desktop and crop/scale ourselves.
Con: Every image needs to be uploaded and edited twice.

Is there a WordPress native way to do this I completely missed?

is it a good approach to serve multiple featured images to have a proper scaling?

Right now the featured image size on "Desktop" is up to 1140x250. Pretty wide and will shrink way too far on "Mobile 1", until you can't really recognize the image anymore.

My idea was to just serve a second featured image for mobile phones up to like 500px. The size of this "Mobile 2" featured image would be something like 500x250.

Pro: Ability to serve different images on mobile/desktop and crop/scale ourselves.
Con: Every image needs to be uploaded and edited twice.

Is there a WordPress native way to do this I completely missed?

• metabox
• post-thumbnails
• mobile
• add-theme-support

Share Improve this question edited Jun 15, 2020 at 8:21 CommunityBot 1 asked Nov 16, 2018 at 16:32 BensenBensen 1122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I would do this with Advanced Custom Fields and a Sass mixin:

@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    background-image: url($image);
    background-size: $width $height;
  }
}
//Usage
div.logo {
  background: url("logo.png") no-repeat;
  @include image-2x("logo2x.png", 100px, 25px);
}

Featured images or native custom fields could also be used instead of ACF. For an automatic solution that removes the need to upload multiple image versions you can use a retina plugin - WP Retina 2x.

is it a good approach to serve multiple featured images to have a proper scaling?

Right now the featured image size on "Desktop" is up to 1140x250. Pretty wide and will shrink way too far on "Mobile 1", until you can't really recognize the image anymore.

My idea was to just serve a second featured image for mobile phones up to like 500px. The size of this "Mobile 2" featured image would be something like 500x250.

Pro: Ability to serve different images on mobile/desktop and crop/scale ourselves.
Con: Every image needs to be uploaded and edited twice.

Is there a WordPress native way to do this I completely missed?

is it a good approach to serve multiple featured images to have a proper scaling?

Right now the featured image size on "Desktop" is up to 1140x250. Pretty wide and will shrink way too far on "Mobile 1", until you can't really recognize the image anymore.

My idea was to just serve a second featured image for mobile phones up to like 500px. The size of this "Mobile 2" featured image would be something like 500x250.

Pro: Ability to serve different images on mobile/desktop and crop/scale ourselves.
Con: Every image needs to be uploaded and edited twice.

Is there a WordPress native way to do this I completely missed?

• metabox
• post-thumbnails
• mobile
• add-theme-support

Share Improve this question edited Jun 15, 2020 at 8:21 CommunityBot 1 asked Nov 16, 2018 at 16:32 BensenBensen 1122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I would do this with Advanced Custom Fields and a Sass mixin:

@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    background-image: url($image);
    background-size: $width $height;
  }
}
//Usage
div.logo {
  background: url("logo.png") no-repeat;
  @include image-2x("logo2x.png", 100px, 25px);
}

Featured images or native custom fields could also be used instead of ACF. For an automatic solution that removes the need to upload multiple image versions you can use a retina plugin - WP Retina 2x.

本文标签： metaboxServing a custom featured image for mobile