Hi everyone, Quick question about the size at which images display in Rise. I want to insert smaller icon graphics into image blocks and prevent them from being expanded to fill the space. Any suggestions on the best way to accomplish this? On a related note, didn't there used to be a size option (small, medium, large, or percentages) with some image blocks? I don't see this option any more. Thanks in advance for any help! Tamara

Early in our use of Rise, I did some experimentation with all the image container sizes in Rise, looking to have some control over this. If you create your graphic to match the container size, it won't scale to fit, leaving you with consistent line weight on your graphics. I've found that it's best to design for the width of the container, and then you're free to make the height smaller if needed.This isn't a complete list, but it's most of them.These are the specs we build graphics to: Image maximum Width/Height before Rise starts to scale to fit into the feature/lesson type. Centered Image1150 x 1125 Banner Image1920 x 800 Labeled Graphic1100 X 745 Process Lesson938 x 475 GalleriesCarousel 1150 x 6782 column 566 x 5663 column 371 x 3714 column 273 x 271 Image and Text25% 556 x 34550% 655 x 40775% 915 x 568 Tabs875 x 475 Accordion870 x 475 Flip Cards3+Centered 208 x 208Full 346 x 346 1-2Centered 473 x 473Full 571 x 571

Thanks for providing this extremely useful information, Pat!

Hi, articulate1 birtlh, Thanks for reaching out! Currently, you can adjust the width of a Storyline block to Small, Medium, or Full using the Format tab. If you have additional questions or need assistance with your project, please let us know here or privately in a support case.

I am looking for image size dimensions for three column grid. I tried 371 as noted above and that just made the image blurry. help! If I could control where the square placement is then this would be fine. but crop is my only option. I used AI to generate a square image and then looked at the image size in my editor. that square is 640x640. so I tried setting image to 640 width and that just made things worse.

If you can get the icons in SVG format, there is a trick you can do in the tag to make it not scale. SVG files are just text, you can edit them in a text editor. Here is the start of a normal svg file: <?xml version="1.0" encoding="UTF-8"?> <svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 858.99 844.33"> <rect x="142.74" y="150.25" ... etc Here's what you add to make it not scale - preserveAspectRatio, width and height: <?xml version="1.0" encoding="UTF-8"?> <svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 858.99 844.33" width="100" height="100" preserveAspectRatio="xMidYMin slice"> <rect x="142.74" y="150.25" width="574.56" ... etc I also find adding _NOPROCESS_ to the filename useful to ensure Rise's file compressor doesn't mess it up. I've added files with and without as an example.

image size controls (small, medium, large)?

PatCummins
Community Member
2 years ago
Early in our use of Rise, I did some experimentation with all the image container sizes in Rise, looking to have some control over this. If you create your graphic to match the container size, it won't scale to fit, leaving you with consistent line weight on your graphics. I've found that it's best to design for the width of the container, and then you're free to make the height smaller if needed.

This isn't a complete list, but it's most of them.
These are the specs we build graphics to:

Image maximum Width/Height before Rise starts to scale to fit into the feature/lesson type.

Centered Image
1150 x 1125

Banner Image
1920 x 800

Labeled Graphic
1100 X 745

Process Lesson
938 x 475

Galleries
Carousel 1150 x 678
2 column 566 x 566
3 column 371 x 371
4 column 273 x 271

Image and Text
25% 556 x 345
50% 655 x 407
75% 915 x 568

Tabs
875 x 475

Accordion
870 x 475

Flip Cards
3+
Centered 208 x 208
Full 346 x 346

1-2
Centered 473 x 473
Full 571 x 571
- SoumyaNarayan-6
  Community Member
  10 months ago
  Thank you for putting this together Pat! This has been super helpful for me.
- MarkDempsey-cdf
  Community Member
  7 months ago
  Brilliant Pat, thank you very much!
- PaulaOBrien-73b
  Community Member
  5 months ago
  Thanks!
  
  Quiz question image size?
JoyMcGinty1
Community Member
10 months ago
Thanks for providing this extremely useful information, Pat!
KellyAuner
Staff
7 months ago
Hi, articulate1 birtlh,

Thanks for reaching out!

Currently, you can adjust the width of a Storyline block to Small, Medium, or Full using the Format tab. If you have additional questions or need assistance with your project, please let us know here or privately in a support case.
MichelleHenry-7
Community Member
3 months ago
I am looking for image size dimensions for three column grid. I tried 371 as noted above and that just made the image blurry. help! If I could control where the square placement is then this would be fine. but crop is my only option. I used AI to generate a square image and then looked at the image size in my editor. that square is 640x640. so I tried setting image to 640 width and that just made things worse.
- PaulaOBrien-73b
  Community Member
  3 months ago
  @micheleHenry-7 The placeholder images in Rise 3ximage gallery are 1680 x 1120 at 96 dpi for web. Does this help? You can also check the box to constrain them to a square and then use the image crop function (under edit) to move the part of the picture you want to be in view to the center of the square.
Tim_
Community Member
2 years ago
If you can get the icons in SVG format, there is a trick you can do in the tag to make it not scale. SVG files are just text, you can edit them in a text editor.

Here is the start of a normal svg file:

<?xml version="1.0" encoding="UTF-8"?>

<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 858.99 844.33">

<rect x="142.74" y="150.25" ... etc

Here's what you add to make it not scale - preserveAspectRatio, width and height:

<?xml version="1.0" encoding="UTF-8"?>

<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 858.99 844.33" width="100" height="100" preserveAspectRatio="xMidYMin slice">

<rect x="142.74" y="150.25" width="574.56" ... etc

I also find adding _NOPROCESS_ to the filename useful to ensure Rise's file compressor doesn't mess it up.

I've added files with and without as an example.

icon.svg4 KB
icon-small_NOPROCESS_.svg4 KB
KarlMuller
Community Member
2 years ago
Hi Tamara,

The Image & Text block allows you to set the image size to 20-, 50-, or 75%.
- TamaraStaton
  Community Member
  2 years ago
  Thank you! Apparently I was missing the new edit bar on the right. Was
  looking for it where it used to be on the left.
  
  =)
  Tamara
  
  *Tamara Staton*
  
  *Greater Pacific NW Regional CoordinatorEducation & Resilience Coordinator*
  ( 503) 703-7058
  citizensclimatelobby.org
  
  *Eager for Hope? Ready for Action?*
  
  - Watch a 2 min video about who we are at
  CCL!
  - Log your CCL
  Actions
  - Enjoyify Your Meetings
  
  !
  - Deepen your resilience
  for the
  climate
  - Join our Info Session
  and our CCL
  Community
TamaraStaton
Community Member
2 years ago
Hi Tim and Karl,

Both of your posts are super - helpful. I appreciate it! For some reason, I was not noticed the design icon on the right that lets you set the control.

Best,

Tamara
articulate1birt
Community Member
7 months ago
Is there any trick to change the size of the storyline within Rise 360? Rise only allows 3 sizes but I need an intermediate size.