image size controls (small, medium, large)?

Sep 20, 2023

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

7 Replies
Tim St. Clair

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.
Tamara Staton

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

Pat Cummins

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