Cover Photo Size - Blog

[Toby]

Good day all,
I am trying to find the best size dimensions for the Cover Photo in a blog, please.
Thank you,
Toby

[StanGromer]

Actually curious myself what others do. We set an official standard which our content team uses (which I can't remember off the top of my head), but we redesigned our community and thus hardcoded the image resolution into our message feeds to maintain the consistency.  The problem is 'official' content vs. Community created content which is the wild west, and anytime the two mingle together, it can get weird/ugly in our Community as a result.

[Toby]

I hear  you @StanGromer 

In this case, the blog is under my control so I'm not worried about clients creating and mis-sizing. I would like to hear from Khoros on what the sizing is. We build pages like these for our clients and supply all the sizing info for banners, post, etc.
I also could not find it in the documentation 😞
Cheers,

Toby

[CarolineS]

Seems like a square image is best, since that's what's recommended by Facebook for shared links (which is the main use of cover images that I know of).

Here is some extra info about cover images that may be useful:

(1) By default, w/ the default blog page / blog post page layout, the cover image doesn't actually show up in Khoros

(2) Cover image is selected by Twitter / Facebook as the featured image when you share the content on those platforms. Here's some documentation I found from Facebook about the best dimensions for images in shared links: 

Use images that are at least 1080 pixels in width for best display on high resolution devices. At the minimum, you should use images that are 600 pixels in width to display image link ads. We recommend using 1:1 images in your ad creatives for better performance with image link ads.

(from https://developers.facebook.com/docs/sharing/best-practices/ )

(3) If you have "masonry" layout turned on for the blog page, the cover image shows up on the masonry "tile". Probably looks best square or a rectangle that is shorter than it is wide (tall images make the tiles super tall!)

(4) There are custom uses for the cover image - maybe such as a pretty display of blog posts on your home page? Other stuff?

Hope this helps!

[Toby]

Thank @CarolineS it is funny, here is an example of what I am having trouble with and maybe it is the design of the picture.

When I play with the size, things get cut on the left or my resolution fails.
Cheers,

Toby

[CarolineS]

Where is the image displaying? In a Facebook / Twitter share or somewhere else?

[Toby]

Hi Caroline,
Within my Community - maybe we need to use a different format for the picture if Khoros does not have a standard sizing.
Best,
Toby

[CarolineS]

There may be official guidelines! I just don’t know what they are 🙂

[Toby · Accepted solution]

No worries, I have reached out to my rep for assistance. 

Cheers!

[bburke]

Toby, 

Did you ever receive an answer? I had the same question and cannot find an answer. From the code on the page it appears to be 626 x 230 - you can see in the upper left of the image it has 625.6 x 230 and in the code on the left 626 x 230 (I assume the intrinsic size is the original photo since it changes when I view other pages.)

If you received a confirmed answer I would appreciate the info. 

Thanks

Brian

[Miran]

Hey there! Has there been any official word on this? Thanks so much.

[ccanada]

After some trial and error I found that 620px X 340px works the best for me. 

[JeanineS]

For those using Hermes, I generally recommend this as a starting point. Your design may change the ratio, but this gives a good image without them being too large and slowing down site speeds. Please note that Hermes sometimes crops the images based on the viewport, so text on the images isn't recommended.

Hermes cover photo recommendation: jpg or png format, 600px wide by 420px high