Images skewed in Process Blocks

Jul 05, 2023

Hi there, 

This post is about Process Interactive block in Rise 360. 

It seems that whenever I choose the image placement option to "full width" it is skewing the images rather than cropping them. 

The only fix I've found is to crop the images manually with the "Align center" option instead. However, this means re-applying alt tags which is cumbersome.

Wanting to know if anyone else has come across this issue. Hopefully, there is a quicker solution to fixing skewed photos, possibly a bug that can be easily amended.

Thanks.

images skewed in process block

8 Replies
Angelo Cruz

Hello Rachel! I understand your encountering some issues with the images on your Process block when applying full width.

Does this happen to any images you upload to your Process block or just a specific one? I tried it from my end and it appears that the image is cropped and not stretched or skewed. Would you be able to share the image file with me so that I can test it?

Angelo Cruz

Hi Jessica! I'm sorry to hear that you are encountering issues with the images in your process block.

What is the resolution (and/or aspect ratio) of the images in your process block? Would you be willing to share the source image files that you are using so that we can run some tests from our end? If you can also share the screenshots of the skewed images, that would be very helpful!

Jessica Luke

Hi Angelo!

I’ll attach the images here (please note they are copyrighted).

I just realised this morning that the “man-getting-electric-massage-his-arm” image was larger than the others and NOT skewed, so I tried uploading a larger size of one of the other images but it remained skewed. The sizes I tried were 1000 x 667, 1500 x 1000 and 2000 x 1333.

Weirdly, I have another process block on the same page in the course and none of those images are skewed 🤔

Thanks for your help!

Eric Santos

Hello Jessica!

I'm happy to chime in; thanks for sharing the screenshots and the image files! Feel free to remove the copyrighted content from your post above; I already downloaded them and will delete my copy of the images and the test course after troubleshooting.

When you select Full Width for your Process Block image, are you presented with the cropping screen below? This indicates that the images will be cropped in the block.

Proccess block full width

I added the images in a sample Rise course and did not see them being skewed. If you notice, the top and bottom portions of the pictures have been cropped to account for the resolution difference.

Sample Rise course with process block

If the issue persists, can you remove the erratic Process Blocks, recreate them using a new block, and see if it helps? It's possible that a network glitch corrupted those Process Blocks.

Looking forward to your test results!

Jessica Luke

Hi Eric

Thank you for investigating the problem.

Yes, when selecting Full Width I do see the cropping screen. It appears to work as normal.

I created a new process block and added the first image but still had the same problem. I also noticed something strange when I zoom the image - the aspect ratio corrects itself (the image ‘un-skews’). When I zoom back out, the image skews again. You can see it in this screencast...

Eric Santos

Hi Jessica!

Thanks for sharing your test results and the screen recording! It helps a lot to understand the issue better.

Since Rise 360 is responsive, images that span the entire screen width get cropped to fit different screen sizes and orientations. We observe this in the Process block when using image-full-widths. I tried using Align Center in Step 1 of my sample Rise course, and the issue is not happening. Try testing the share link of my sample course here and compare the Zoom-on-click behavior of Step 1 and Step 2.

Let me know how it goes!

Jessica Luke

Hi Eric!

Thanks again for your help and explanation.

I had a look at the sample course and I actually think the image in Step 2 looks skewed (squashed from top to bottom). It’s only subtle, but the woman’s face doesn’t look quite right.

I’ve realised this is actually happening in all my process blocks (whenever images are set to full width) - it’s just that sometimes the skewing is obvious and sometimes it’s not. It seems to depend on the type of image. Attached is another example that I think is a bit more obvious...

So this appears to be normal Rise behaviour (for the current version), but I still think it’s a bug. The images don’t look right.

Thanks again for your assistance!