Image control

Oct 28, 2022

Martin Benson
By Martin Benson

I would like to create a divider using an image that I have created. I have made something that is 1920x150 for this purpose. 

I tried it as a centered image and it seems to be downsized. It does not go the full width.  I want the image to go the full width of the lesson page. Is this doable? I see that other Rise images will do this.

If I do image centered, it is sized down so that it will not span the page. If I do Image Full Width it upscales it and cuts off the left side of the image. Is there any way to get the image to display as it was created?

Maybe the width is wrong. What should be the dimensions of a graphic that will go full width without being upscaled?

Thanks.

6 Replies
Domenick Chiddo
11 months ago06/06/23 at 8:00 pm (UTC)

Alyssa, thank you for this workaround. I was having the same problem as Martin and could not figure out what to do. For anyone else who stumbles on this thread, here is a summary of the issue I had:

  1. I wanted to display a full-width image which would scale with the screen size without getting cropped.
  2. I learned that when using the "Image Full Width" block type, Rise automatically crops the image rather than just scaling it. This is problematic if you want the learner to be able to see the entire image. Using this block type, there is no way to predict how much of the image the learner will actually see. 
  3. I learned (in this thread) that using the interactive "Labeled Graphic" block type -- then changing the setting to "full width" -- forces Rise to display the entire image. Using this block type, Rise will scale the full-width image with the screen size rather than cropping the image to fit the screen. 

This is a really helpful tip (which may be subject to change in the future if Rise updates the "Image Full Width" block type to allow scaling rather than auto-cropping). 

Karl Muller
1 month ago03/14/24 at 4:53 am (UTC)

Hi Kate,

Here is how I do this.

Create a Block Type: Divider --> Spacer

This will create a white spacer.

Click on the Style button for the spacer block.

Scroll to the bottom and change the style to Image.

Choose your image.

Change the Overlay value to 0%.

Change the padding to increase or decrease the height of the spacer block.

Sign In to Reply