craft-seomatic
craft-seomatic copied to clipboard
nystudio107
Twitter preview not showing `fit` tranforms correctly
Ok, so I have a portrait orientation image, and with both Twitter and Facebook set to fit, which should (according to Craft docs):
Fit – Scales the image so that it is as big as possible with all dimensions fitting within the specified width and height.
Then I would expect the preview image to show the image completely fit inside the box with whitespace around the left and right edges. However this is what shows:
..the Facebook image is as expected, but the Twitter image is shown incorrectly as cropped, though.
I have not dug into how this all works, but I do note that if I change the css property for
.TwitterCard-image-wrapper {
...
background-size: cover
}
to
.TwitterCard-image-wrapper {
...
background-size: contain
}
Then the display is as I'd expect (except maybe the background tone should be white and not grey?):
(More than likely this is just an issue with how the preview shows, and the actual image served to Twitter is correctly scaled, but I don't know for sure as this isn't live yet...)
Can you tell me if it is just the preview that appears to be wrong, or the actual tweeted image that appears to be wrong?
Not really until I launch this version (~ a month from now) - and actually tweet something out...but no probs coming back to it then if that works for you?
This works using Craft's concept of "fit" which may not be what we intuitively think it should be. But sure, lmk
It's the actual tweet too:
(from https://imagescience.com.au/products/calibrators/x-rite-i1display-pro)
I'm having a similar issue. It seems as if the "SEO Image Transform Mode" field is having no effect.
It seems like whichever option I choose, the image just gets cropped...
Twitter:
Discord:
Slack:
Is this a bug? Or should I be selecting a different option?
SEOmatic: 3.2.9 Craft: 3.1.31
Looking at the code being generated by SEOmatic, it seems like the "Fit" selection is being ignored by the meta tags. Both of these tags are apparently using the crop method.
<meta content=".../_1200x630_crop_center-center_82_none/..." property="og:image">
<meta name="twitter:image" content=".../_800x418_crop_center-center_82_none/...">
Although oddly, the JSON seems to be respecting the fit method...
"image":{"@type":"ImageObject","url":".../_1200x630_fit_center-center_82_none/..."}
So probably you need to set it to fit for Twitter and Facebook too @lindseydiloreto ?
As for it affecting the tweet as well as the preview... Craft's idea of "fit" is that both dimensions of the image fit into what you pass in.
Twitter will crop anything passed in that is not the exact proportions that it's looking for, so the preview is accurate.
What you'd need to do what you think you want would be something that made an image of the exact dimensions passed in, and letterboxed your actual image.
Yep, I think that's a bug @lindseydiloreto -- or at least not what I'd expect either. Go ahead and change those, and explicitly set the transform type
But it's not going to change how it appears on Twitter unfortunately.
On Facebook, it'll look okay.
That other issue is over here @lindseydiloreto https://github.com/nystudio107/craft-seomatic/issues/366
Looks like I have the same issue. No matter what I choose—specific to either the Twitter or FB image or in General—the image gets cropped. Since I'm working with book covers, that's a problem. I'd rather have them 'fit' with white space on left/right. But no matter what I chance, the image remains the same in the preview.
![Screen Shot 2020-03-02 at 13 30 53]
(https://user-images.githubusercontent.com/1124514/75719708-1a9d9a80-5c8a-11ea-9d01-00d8c41519b0.png)
Ok so do we need to petition P&T for a "Contain" mode? I can not imagine any situation where "fit" would be desirable in this use case, but this is how it seems to work intentionally. Despite it being counter intuitive.
