Rise Logo and Cover photo sizes

Jun 02, 2017

I've been searching through the discussions and I haven't found a concrete answer regarding the logo image size and cover photo size.

I am just curious as to what the max width/height of the logo can be as well as the recommended image size for cover photos. 

42 Replies
John Say

We have no maximum width/height for logos.  Rise will automatically shrink down your images even if you import a really big image. 

There is similarly no maximum size for cover photos but avoid images that require exact cropping. 

if you'll take a look at Adam's video here,  he elaborates a bit about responsive images, the recommendation to avoid images that require an exact cropping, and our suggestion to focus on a conceptual scene. This starts around the 2:35 mark in his video.

Leslie McKerchie

Hello Christy and welcome to E-Learning Heroes :)

Is there a reason that you need to modify your logo? Are you having difficulty with something?

It's not an exact size that the logo will be. Since Rise is responsive, the max height varies depending on the screen size of the device you're using. 

Rise will scale the logo size up or down to fit the max height, while also keeping the proper aspect ratio. That prevents the logo from looking stretched or distorted. 

If you have something you wish for us to take a look at, please feel free to share.

Anna Rabassó

I have the same doubt. Every time I upload the cover photo in different sizes I've got different positions and results. I would like to know which is the size that works better but as I see no one really define it. What everyone says is "the bigger the better", that Rise is responsive and will shrink the image if is too big.  Hope anyone gives us an answer. 

Adam Schwartz

Caryn - YouTube videos have a fixed size of 16x9 regardless of the device
that they are played on. That’s why they can specify a specific ratio. But
cover photos have different ratios depending on the device they are viewed
on. Play with the responsive previews and you’ll see what I mean. For
example, compare portrait phone to landscape phone.

If you can upload a cover photo you’re working with I can make some
recommendations.

CINDY LYONS

I am also experiencing unexpected results with the cover image. I have tried images of all sizes, and the end result is always blurry, with some of the image bleeding off the sides. Can you please take a look at the attached images? The Header_Team_GSII_HiRes.png is the cover image I want to use. The Cindy_Lyons_CoverImage.png is a screenshot of what it looks like, uploaded.

Thank you.

Donald Kerns

I have tested this extensively and you will never be able to ensure that your Rise cover image with logos or text will appear properly using Articulate's one-image approach. Unfortunately, Articulate frequently points to https://articulate.com/support/article/Best-Practices-for-Images-Videos-and-Audio-in-Rise-Courses#images, which doesn't really address how to control what appears in the available screen space on any specific device.

Because of the limitations to the one-image cover image in Rise, our branding solution was to use a logo watermark with a 50% text contrast (see attached file: rise_coverimage.jpg). The second attached file (Rise - logo1.png) shows it placed in a Rise course.

Earlier this year, we published an Apple iMessage add-in app as a charitable fundraiser and we had to provide the iTunes Store with more than a dozen different images to handle all the devices, screen sizes, orientations, etc. Creating the extra files was not that onerous if the graphic designer knows the size specifications. While there may still be some Rise image zooming required (depending on the device), there would be far less chance that a logo/text will be covered up using the multiple vs single cover image approach. With media queries, it is virtually instantaneous.

For example, try the following w3schools.com example (resize the browser window and the image swaps at 400px).

https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image_mediaq

FEATURE REQUEST: Provide Rise authors with the option to design and upload additional cover images that will show based on device size and orientation. Articulate can specify the required dimensions for each uploaded image; then automatically swap out the image(s) using CSS based on the user's device size/orientation. 

Note: The same image control problem occurs with the "Image full width" and "Text on Image" blocks and these blocks would also benefit from Articulate allowing Rise authors to design and upload additional alternative images. 

Ashley Terwilliger-Pollard

Hi Donald and Cindy,

Thanks for sharing those images here. Our team was also recently discussed this and submitted a feature idea on cropping of images and allowing for more author control of that. We'll include this discussion in that feature request - so that we can keep you posted here! 

In the meantime, the best practices for working with images in Rise are detailed here. 

Quinn Kampschroer

Hello, Robert,

The cover photo is set to "cover," which means it is going to cover the entire width of the image space no matter what.  Your image space is always going to be different depending on what kind of device you're using.  You can, however, change the height of the image by modifying the HTML.  This will show more of the photo (vertically).  If you are not sure how to do this, let me know and I'll post.

Hope you've found your solution!

David Tait

It would be great if there was a page we could reference that had the size ratios for all of the different image types we can use in Rise. 

For example I have included a link to a reference page I use when developing Wordpress websites using a particular theme: https://www.elegantthemes.com/blog/divi-resources/the-ultimate-guide-to-using-images-within-divi 

This is slightly more detailed than such a page for Rise would need to be but gives a flavour of what users might find helpful.

Peter Johnson

I found that if I set up a photo with the main point of interest centered vertically and horizontally in the image frame, it works for both landscape views and portrait.

I also had trouble with the cache keeping the older version as I tried out various positions of my image in the frame. I fixed that by adding a number to the file name for each new version. ftpLogo1.png  ftpLogo2.png, etc.

Here are some samples showing the whitespace in my uploaded image and how the logo itself displays on various devices.

(I don't normally include text in my cover photos but wanted to emphasize to the learners what FTP stands for.)

This discussion is closed. You can start a new discussion or contact Articulate Support.