Hello I've just started using Rise and I have some questions. Is there place that tells me the image dimensions (ie: Image and Text, Image size for the accordion, etc.). My client thinks the font is too small in the image description, so I was going to overlay it on the image, but it keeps cutting it off and I'll be here all day trying to figure out the image size.

Generally, here's the advice I give for the Rise workshops: I try to keep in images at either 1x1 or 16:9. Some blocks like the image grids, display 1x1 but when clicked will open to the full image. 16x9 helps keep it consistent looking. All image blocks scale the image except the images with text on them. I consider those decorative images and they will crop as noted above. Here's a doc I created with some tips on the blocks and the settings/media they support. A blog post that explains how I created the flashcards in a demo so I had text on image.

Here's a quick help when working with images: Create a square PowerPoint slide. Design tab, slide size. 10x10 Add the image to the slide when using a square image block (grids, flashcard) to the slide. Save the slide as an image .png Of course you can crop the image in other tools, but I usually have PowerPoint open when working with Rise.

Hi Irina! Rise displays images in different sizes and ratios depending on the device you're using, especially in those full-width image blocks. For example, the way an image is cropped on a tablet is completely different than the way it's cropped on a phone. In other words, there's no ratio rule to follow since the image will be cropped differently depending on the device that's used. That's the beauty of fully-responsive content--it reflows and resizes to fit the device/screen you're using.

The cropping tool helps a lot but in order to address the issue that a lot of folks indicated on this thread I'd love to see a Focal Point tool that allows you to drag the image in the frame to identify what should always be at the center of the image frame. Something like this:

I am also having trouble with images chopping within the gallery frames. No matter what device or what format (landscape or portrait, the frame chops off part of the image. If I knew two aspect rations (one for landscape and one for portrait), I think I could figure out how to size images so that they look like they fit into the frames.

Image Dimensions in Rise | Articulate

LisaGoans-a15b7
Community Member
2 years ago
@Tom: The resource you published in this thread in 2018... is there an updated version or is this one still relevant? http://articulate-heroes-authoring.s3.amazonaws.com/Live/Content/_2018/_Series_GettingStarted_Rise/03_Interactivity/Rise_%20Lesson%20Types.pdf

Smiles,

Lisa
TomKuhlmann
Staff
2 years ago
Generally, it's still relevant but we've made changes with some editing options in images. We used to use that to encourage people to create their own list and go through the blocks to become familiar with what they can do and support.

There's no updated version of that doc, though.
JillianCanode-f
Community Member
2 years ago
I'm not sure if it's posted elsewhere, but is there a recommended size for images when using the split left image for the cover page? It doesn't seem to be the 1:3 suggested ratio, but it's also not a 1:1.
- TomKuhlmann
  Staff
  2 years ago
  I'd use the 3:1 because of the square center. There really is no perfect image since teh image crops to teh device. In those split screen demos, a more square image probably works best. You could try 4:3.
  
  I did a recording to show why I like the 3:1.
  - JillianCanode-f
    Community Member
    2 years ago
    That's so helpful, Tom, thank you! The images you used to show the center point were great.
DorothyMiller
Community Member
7 months ago
Hi

I am having similar issues when I add an image - I don't get to see the full image as it uploads bigger than the text on image space and cropping doesn't work either. Is there a way to resize or move the image around? On another system, when the image is too large, I can move an image about to decide which part to display.

Thanks.
DomenickChiddo-
Community Member
7 months ago
Dorothy,

When using the "Text on Image" block type, the image is cropped automatically (responsively) based on the user's device type. In other words, the developer cannot predict or control exactly which portion of the image the user will see. That makes this block type a little bit tricky to use, especially because you won't know how the text will overlay on different elements in the image. For example, if there are any white elements in the image, your white text might end up over top of those elements for some users, making it illegible. (You can remedy that problem by darkening the overlay.)

With this block type, the image is really meant to be used more as a background than as a way to convey information, so you would want to choose an image that can be auto-cropped in unpredictable ways and still be functional. Or just do a lot of testing with different screen sizes.

Hope that helps!

-- Dom
KayanaMcCallaPe
Community Member
7 months ago
Hi All. I am trying to rescale an PNG image for the cover page of my Rise 360 training series I am developing. The dimensions are 1920x1080 pixels. When I upload it as a "split cover" in the course, the image is cut off, specifically on the left and right sides. Any suggestions?
- JoseTansengco
  Staff
  7 months ago
  Hi Kayana,
  
  Happy to look into this for you!
  
  The "split right image" and "split left image" layouts shouldn't crop your images, but this depends on the size of the image uploaded to the block. I've tested and found that smaller-sized images get cropped, while higher-resolution images get displayed as a whole. Please share a screenshot of what you're seeing and a copy of your cover photo so we can test what's happening. You can also open a case with our support team here if you prefer to share your media files in private.
AnneYoukey-366f
Community Member
7 months ago
@Tom, thanks for your feedback. Using 16:9 ratio yields the best results. The image will cut off height on desktop but will look good on tables, mobile, etc.

There are ways to resolve this image sizing in responsive design. I use many platforms that have image optimized for each screen. Can this be a ticket for your dev department? It seems like the problem is primarily with full width. For the particular image I am using, the top and bottom of the image are key to the story. So my options are, allow the cut-off of the top or replace the image. It took me awhile to find the perfect image but most of my users are on desktop so I need that view to look good.
- JoseTansengco
  Staff
  6 months ago
  Hi Ana,
  
  Thanks for the update! I recommend opening a case with our support team here so we can take a closer look at the display issue you're experiencing. They'll create a bug report with our engineering if they confirm that the behavior is a bug.