Forum Discussion

johncrabtree's avatar
johncrabtree
Community Member
4 years ago

Preventing images from auto-cropping

Is there no way to prevent an Rise from auto-cropping an image? I inserted an image from the content library and rise crops out half of it... I've been searching for this trying to figure it out and I can't find any way to stop this. 

  • Hi Michael! Square images work best in the two-column grid block. If your image isn't square already, you can use PowerPoint (or any image editing tool) add white space around the image before uploading it to Rise 360. Here's how:

    • Open PowerPoint.
    • Adjust the slide size to a square.
    • Insert the image on the PowerPoint slide. Scale up the image until it fills the height or width of the slide.
    • Align the image to the center of the slide.
    • Save the PPT file as a PNG image.
    • Upload the image to the two-column grid block.

    After following these steps, your full image will display without being cropped! 

  • KarlMuller's avatar
    KarlMuller
    Community Member

    Hi John,

    Welcome to the Rise forums.

    Based on my experience with Rise, this is what I've found:

    Course Theme Cover photo

    • Maintains the image width, but crops the top and bottom a lot.

    Image Centered Block

    • Does not auto-crop.

    Image full width block

    • Maintains the image width, but crops the top and bottom a bit.

    Image & text

    • Resizes image to a smaller view. The original size is available on zoom.

    Text on image

    • Maintains the image width, but crops the top and bottom a lot.

    Carousel

    • Does not auto-crop.

    Two, three and four column grid

    • Resizes image to a smaller square view. The original size is available on zoom.

    Does this match what you are seeing?

  • Thanks so much for stepping in to help, Karl!

    I wanted to also mention that Rise 360 has a built-in cropping tool. You can use this tool to control which part of the image appears within the frame, and which part is cropped. 

    Let us know if you have any more questions about images in Rise 360!

    • DeborahDaigle-5's avatar
      DeborahDaigle-5
      Community Member

      What are there the dimensions, or ratios, that we could use for graphics  to prevent the auto cropping from happening within the various image types (especially for images with text and full screen images). I can't seem to find this information anywhere. The cropping feature isn't much help when you need the entire image to appear, say for a chart or something similar. 

  • I also have the problem with the two column grid. One image is not reduced in size to fit the column, but randomly cropped. I want to show the complete image, not a cropped version. The onboard crop-feature is no help here. Please allow us to show the full image and Rise should reduce it automatically to the right size.

    • DenisePatric419's avatar
      DenisePatric419
      Community Member

      Agreed. In the flip card interaction, I am trying to add an icon as the picture and no matter how much I reduce image size, I cannot get Rise to let me use the entire image. It crops half of it out and leave the rest. Cropping to square also does not work.  It be nice to see this fixed without needed to do yet another step in PPT.

  • Why does the temp image in the full width image block show a full 16:9 image and then when I insert my own image it crops to a strip of the image severely cutting off the top and bottom of the image. If I try and adjust the crop, the image strip gets cropped even further vertically and my image is still cut off. 

    The crop tool is pretty useless from what I have experienced. 

    • LeaSAgato's avatar
      LeaSAgato
      Staff

      Rise 360 content is fully responsive, so your images may have different dimensions as they adapt to different devices and orientations. Blocks like image full-width, text on image, and quote on image cover the entire width of your screen so they get cropped to fit different screen sizes and orientations. For these image block types, we recommend using images where important details won't be lost if the image gets cropped.

      Feel free to check out our best practices for images here.

      • ChristopherA538's avatar
        ChristopherA538
        Community Member

        I believe the issue we're experiencing is that the full-width image is preserving the same vertical height regardless of the screen width. While I appreciate that the image will load differently on a narrower screen, in my circumstance it would be better if the entire ratio of the image (vertical and horizontal) scaled to the width of the screen. This would make the full-width image taller on a wider screen, by necessity, but would keep any information from being cropped out. 

        It feels like the current functionality is built around cosmetic stock images, like the ones in the asset library, that work perfectly fine when cropped away. While building a technically-focused learning module, however, I'm using the full-screen image block to include screen shots as examples where all edges of the image are important. Instead, I use Image Centered to make sure the entire image is viewable, but to see detail the learners will have to click to expand. 

        An option in the Format options for the full width image block that locks the ratio would do exactly what I need. 

  • This would work for very high resolution single images But this doesn't work for the gallery option which is more desirable for instructional videos with comparative images. I spend a lot of time resizing images for this use and have not found tools that expedite this process. Would a feature that allows a square background upon which you can position your image be something Articulate would do? Thanks!

  • Consider adding

    _NOPROCESS_ 

    to the end of the name of your image file. This title extension is intended to upload and display the image exactly as you saved it. This method bypasses compression, so as mentioned above by Rise360 staff, learners may encounter issues with viewing the image across different devices. We typically use this approach for images; however, my understanding is it can also be used with video files.

    See this forum: https://community.articulate.com/discussions/discuss/using-the-noprocess-option-to-prevent-responsive-design-on-graphics/854142