Level: EnlightenedPosts: 89We’re still not quite there with the featured image on WordPress and the way it interacts with mobiles and social media.
This is currently what my front blog posts look like from the front site.
https://www.dropbox.com/s/sp4v4jm7qbitu1x/Screenshot%202017-03-03%2002.09.46.png?dl=0As per your advice they’re restricted so that they’re responsive on mobiles
https://www.dropbox.com/s/h72xisw6xpeus1g/Screenshot%202017-03-03%2002.10.26.png?dl=0But reading into the post the cropped aspect makes the image look rather rubbish.
https://www.dropbox.com/s/pbmfzul8o0r4c4i/Screenshot%202017-03-03%2002.12.23.png?dl=0The size also means Facebook will not use the featured image on their ‘share post’, opting instead to use a default image or the first image in the post.
So what we really need is either more options, or some way of doing the following:
1. Upload featured image for front page that is responsive, scaling with screen size to allow for mobiles.
2. Scale up to a decent size while inside the blog post
3. Keep orginal size for Facebook opengraph:image share?
4. Advice on image sizes so we don’t end up with the random appearance of image sizes across the multiple site:
https://www.dropbox.com/s/il1o3hdiifzss1c/Screenshot%202017-03-03%2002.15.00.png?dl=0- (BuddyDev Team)Posts: 24706
Hi Graham,
Thank you for posting.The best strategy is to use larger images whenever possible. The aspect ratio used makes it tricky. The normal strategy is to set image size to cover on the container but that was causing issue on the site for smaller images.
We have the grid image now more in line( Not yet available for download ). I am going to look a little more into the featured size today and tomorrow and weigh on the options. Based on that using a larger image and scaling down or using a recommend size may be an option. Since you are using theme with fixed width layout, It will be easier for us to do it.
PS: WordPress will always keep the original image. A social sharing plugin may use that for the og:image tag.
Thank you
Brajesh - Level: EnlightenedPosts: 89
Just to follow on this with, I’ve just done an interview piece with a player. As you advised, I went with a big image.
1080×1080 – https://www.dropbox.com/s/zp3ar2xr6hgdyvy/PLAYER%20SPOTLIGHT-2.png?dl=0
It just doesn’t really work across the website or social platform though.
Post Header – https://www.dropbox.com/s/feih7ky18qur1n4/Screenshot%202017-03-08%2005.48.44.png?dl=0
Social Link (Facebook) – https://www.dropbox.com/s/ku545oow851vmgg/Screenshot%202017-03-08%2005.54.00.png?dl=0
Website on Mobile – https://www.dropbox.com/s/zgodlc581ulxnpx/Screenshot%202017-03-08%2005.55.17.png?dl=0
Website on Desktop – https://www.dropbox.com/s/bim91f07sadd98x/Screenshot%202017-03-08%2005.55.26.png?dl=0 - (BuddyDev Team)Posts: 24706
Hi Graham,
Thank you for posting again.Please allow me till tomorrow evening. We have been working on a few thing. to be honest, I have been finding it very difficult to have a universal solution for this.
Even looking at some of the theme, all use only two strategies:
1. Either hard crop to different size
2. or scale and use a solution like imgLiquid or the background-size property(set to cover) to fill the space.This is one of the things which has been problematic for a long time. I am trying to explore a little more and will recommend accordingly.
Also, the update has some other layout fixes and Sensei compatibility.Thank you
Brajesh - (BuddyDev Team)Posts: 24706
Hi Graham,
Thank you for the patience.The issue is fixed now. Here is the recommended way to make it work.
1. Please upgrade to 1.0.9
2. Please install the Simple Image size plugin and visit settings->Media, there you will see the image sizes listed and the control for cropping/resizing– For post-thumbnail and featured-mid size, please select “Center center” in the cropping box. I will also suggest to use square images for better scaling. Please update it.
Link:- https://wordpress.org/plugins/simple-image-sizes/3. To make older images work, please install regenerate Post thumbnails plugin(https://wordpress.org/plugins/regenerate-thumbnails/)
4. Please Visit Tools-> Regen. Thumbnails and click regenerate. once you are done, you may disable this plugin.
Please visit the home page and let me know if it works or not?
The simple image size plugin gives you complete control over the image size, so you can experiment with it for more suitable size. For the images that you have used(square), using a square size worked perfectly for me.
Regards
Brajesh
You must be logged in to reply to this topic.