Forum Discussion

TamaraStaton's avatar
TamaraStaton
Community Member
2 years ago

image size controls (small, medium, large)?

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

  • PatCummins's avatar
    PatCummins
    Community Member

    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

  • Tim_'s avatar
    Tim_
    Community Member

    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.
  • KarlMuller's avatar
    KarlMuller
    Community Member

    Hi Tamara,

    The Image & Text block allows you to set the image size to 20-, 50-, or 75%.

    • TamaraStaton's avatar
      TamaraStaton
      Community Member

      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's avatar
    TamaraStaton
    Community Member

    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

  • 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.

  • 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.