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.
I was recently trying (and failing) to display an image without allowing Rise to auto-crop the image. I ended up finding a good workaround in this thread, which may address some issues brought up above: https://community.articulate.com/discussions/rise-360/image-control.
(Basically, using the "Labeled Graphic" block type and adjusting the settings as needed creates an image which prevents Rise from auto-cropping it.)
I would love it if the image on a desktop shoed more than just that small slice. Most of my learners will be using lap tops or desk tops and the image show up large and cut off with text on them.
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.
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.
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.
Still, you could create a resource that shows image dimensions for a sample desktop size, tablet size, and phone screen size for each type of image, such as full screen, text on image, text with image, columns with images.
I'm sure someone on your creative team could provide general guidance for those three screen sizes (desktop, tablet, phone) that is close - we all know that the cropping can make things difficult.
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.
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.
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?
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.
@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.
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.
91 Replies
I was recently trying (and failing) to display an image without allowing Rise to auto-crop the image. I ended up finding a good workaround in this thread, which may address some issues brought up above: https://community.articulate.com/discussions/rise-360/image-control.
(Basically, using the "Labeled Graphic" block type and adjusting the settings as needed creates an image which prevents Rise from auto-cropping it.)
I would love it if the image on a desktop shoed more than just that small slice. Most of my learners will be using lap tops or desk tops and the image show up large and cut off with text on them.
Thank you
@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
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.
Took a bit of searching to find this response but the doc had the info I needed to understand how to control image appearance in the Tab interaction.
Thank you!
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.
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.
That's so helpful, Tom, thank you! The images you used to show the center point were great.
This post was removed by the author
Still, you could create a resource that shows image dimensions for a sample desktop size, tablet size, and phone screen size for each type of image, such as full screen, text on image, text with image, columns with images.
I'm sure someone on your creative team could provide general guidance for those three screen sizes (desktop, tablet, phone) that is close - we all know that the cropping can make things difficult.
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.
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
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?
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.
@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.
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.