What are the optimal dimensions/resolution for a blog banner?

I always have felt it's a best practice when a UI that allows the uploading of images in a way that significantly impacts a page, that the suggested resolution or an ideal dimension should be offered. I feel like I've seen this somewhere in Telligent but it would definitely be nice to have throughout the system... or at least some single documentation that outlines suggested dimensions for all uploaded images.

This particular question is geared towards finding out the recommended dimensions for the main image that's used as the "Group - Banner" for blog posts.

, it would be pretty cool if you had some kind of documentation around optimal image sizes, dimension, resolution, etc. for all places within Telligent where you can upload an image. e.g. a few - blog post images, blog banner, group avatars, user avatars, user banners, badges, featured items, etc. etc. Maybe something like this already exists??

  • There are certain dimensions for these images based on the actual Theme, however since widgets can be changed, themes can be altered, and images resized and cropped (using $core_v2_ui.GetResizedImageHtml) it is kind of a difficult question to answer.  For instance, if I upload a group avatar that is 500x500, it might actually get rendered with a ZoomAndCrop format and be scaled down to 50x50 by the system.  So my rule of thumb is to upload an image that is slightly bigger than where it will be rendered.

    There are some standards when using 2x images for phones and high resolution displays, not sure if that is what you are asking or not.

  • is right.

    There is really only one place where a specifically sized image is used: in the site banner widget for the logo. In this widget, we do identify the recommended size.

    In other areas, the image will be adjusted either because of the viewing window (aspect ratios change for handheld devices and small browser windows), usage (avatars can be rendered in multiple sizes throughout  the site), or pixel density (high DPI screens show higher resolution/larger images in the same physical area as lower DPI screens).