I have trouble with facebook, twitter, mix.com basically with every social site. When I share my post all my images are automatically cropped from the center leaving peoples on images headless. How to force og:image to be cropped from the bottom only leaving the upper part of the image visible? I am using WordPress theme GeneratePress.
Make sure you are following the guidelines: https://developers.facebook.com/docs/sharing/webmasters/images
The minimum allowed image dimension is 200 x 200 pixels.
The size of the image file must not exceed 8 MB.
Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that
are 600 x 315 pixels to display link page posts with larger images.
...
If you make sure to use the correct aspect ratio, you can limit the chance of getting cropped images:
Try to keep your images as close to 1.91:1 aspect ratio as possible to display the full image in News Feed without any cropping.
Related
This question relates to web development.
I'm going to start by apologizing for the horrible title but I wasn't sure how to title this. CSS pixels and how they interact with screen resolutions confuse me a bit already, when you add "intermediate pixel layers" and image drawing it's even more nebulous. So here's my actual question:
Let's say that we have an image set to display as 2x1 (css pixels) on a web page. And we instead feed it a 4x1 image (rasterized). The browser will fit this image to the 2x1 css pixels we specified earlier. But, would we technically be able to see all 4x1 pixels on a setup where 1 CSS pixels = 2 device pixels? Or would it instead resize the 4x1 image to 2x1 then display each pixel twice? And does this change on a per browser/device basis?
Bonus points: How does this play into accessibility tools that zoom into web content for the visually impaired? (if at all).
Answering my own question. The short answer is YES browsers will show different amounts of detail based on screen resolution.
CSS pixels ARE NOT screen pixels. If an image is 600x600 pixels and you decide to display it in a CSS-defined area of 300x300 (img:{width:300px;height:300px}), it could display as 300x300 screen pixels or it could display as 600x600 screen pixels. Which of the two it is will depend on the end user's OS screen resolution.
Example:
I created a 4x1 pixel png image:
I added this image to an html page and sized it with a img:{width:2px; height:1px;}. For good measure, I also added a blue div with div:{width:2px; height:1px;} bellow it.
I then set the "css resolution" of the page to half that of my OS screen resolution (If the OS was set to 2000x2000 I made sure that the full html page had a css widthxheight of 1000x1000px). So each css pixel would contain 4 screen pixels.
This is how it displayed:
Both the image and the blue div are 2px wide (that's css pixels) but they display as 4 screen pixels. In the case of the blue div, it duplicates the pixels to fit the screen resolution. But in the case of the image, it displays all 4 individual pixels. In both cases, it duplicates the pixels vertically to fit the screen resolution (technically it's probably more of a stretch than a duplication, but you get the idea).
I'm not entirely sure about this but I'm assuming at this stage that all browsers act in a similar fashion.
I use linkedin v2 api and i`m having two problems:
1 - We have customer reports that when posting with us, the reach of the post is reduced dramatically.
2 - In addition, we find that when you publish an image via the API, Linkedin is adding a gray border. Even for images that follow the pattern indicated by your documentation.
Can you help with this issues?
unfortunately, LinkedIn is still sending people here from there support. I will not be able to answer question 1. But for question 2 you should check out the following:
Click here for more information about the images
We recommend that you upload rich media in 1200 x 627 aspect ratio. Images uploaded in the recommended 1200 x 627 ratio are automatically displayed on the mobile app with white padding on the top/bottom or sides of the image, to fit the ratio without being cropped. Although a 3:2 aspect ratio, or 1200 x 800, displays fully without padding, we recommend using the industry-standard 1200 x 627 ratio. Link share thumbnail image uploads are displayed in a 2:1 ratio. Limit text in rich media images to the center of the image in a title-safe area.
Please go through this link https://www.linkedin.com/help/linkedin/topics/6227/6237/81310/customizing-an-image-and-title-when-posting-a-url-on-your-linkedin-page?lang=en
Our developer has disappeared off the face of the planet and when our web server updated it's PHP version, formerly square images have cropped to landscape.
https://www.weareabsoluteuk.com/retail/
The section in question is the portfolio (screenshot attached) these were previously square but not display landscape despite the featured images still being a 1:1 ratio.
I'm familiar with Divi but this seems to be a custom built slider the developer has made and I'm just trying to figure out how I can make these images display as square again as we've sent countless requests to our developer to no avail
enter image description here
Would really appreciate a point in the right direction as I can get the containers to the size they should be but the image never fills them
Thanks
.et_pb_row
for this class max-width: 1080px is there, so it is restricting the images to look like rectangle instead of square, and your images are not square
your images are of resolution 400 x 284, so it wont look like square. You can try images as background images in order to appear them as square.
Is an image displaying in a lightbox script (e.g. prettyPhoto, lightbox, thickbox, etc) affected by high pixel ratio devices?
For example, if I had an 800px wide image up in a lightbox, will it be shown at 800 CSS pixels or 800 actual pixels? To probe further, is an image displayed raw in the browser affected in the same way?
If images displayed with lightboxes are affected by retina screens, what's the solution? Simply link to a larger image? (assuming the script auto resizes images to fit in the viewport)
Perhaps someone needs to develop a new jQuery plugin. :)
I am having trouble with the banners on this Drupal Site (www.ciob.org.uk) The static banners are somewhat pixelated when viewed in the front end. In the back end they are listed and shown as they would appear. These seem fine and have no pixelation.
I also have an issue where the banner is 700x230 on the image info yet when I have uploaded an image it cuts 30 pixels off the right side.
Any help on either of these issues would help.
Thanks
You use Imagecache to process your images. ImageCache will resize all images to the dimensions that are configured in his preset. For your case, 700*230
This is your image proccessed with imagecache : http://www.ciob.org.uk/sites/ciob.org.uk/files/imagecache/700x230sc/images/Skills%20Survey%202011%20Banner_1.jpg
This is the image you uploaded : http://www.ciob.org.uk/sites/ciob.org.uk/files/images/Skills%20Survey%202011%20Banner_1.jpg
Th original image is 680*230 pixel, and imagecache will upscale it to 700 pixel wide, that's also why you loose some content on the right.
You can either :
Use an Original image with correct
dimension (700*230)
Don't allow
imagecache to upscale images (there
is an option for that), but you will
probably some blank area in the
banner, on the front page.