Images skewed in Process Blocks

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?

Hi. I’m having the same issue. It has happened in different courses/process blocks. Attached is a screen shot of the process block I’m using now - every image in the block is skewed.

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!

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

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!

This "Full width" option in the Process block seems to be poorly implemented.
No matter what the aspect ratio, it wants to crop the image vertically. Why???
This results in the image being distorted, as noted by others. I'd call this a bug.

Also, at times clicking on the image doesn't work right. It might shrink the image or display a truncated version of it.

When I choose the "Full width" image option in the Process block, a little preview shows the image with dark bars that indicate where the image will be trimmed in the vertical dimension.
It doesn't matter what the resolution or aspect ratio, it's gonna chop off part of the image. Why??

Similar behaviour occurs with the Image block. When I switch from "Image centered" to "Image full width", Rise trims the image vertically--again the resolution and aspect ratio are irrelevant. 
Even with an image that's very narrow in the vertical dimension, Rise insists on throwing away the top and/or bottom parts of the image. 

I would call this stretching or squashing, skewing is more like tilting along one axis. Both are bad for your images and probably violates your corporate identity guidelines! I did a quick diagnosis and fix, you can add this as a theme component if you need the fix today, this issue is approaching it's 1-year anniversary of being reported. Please join me as we diagnose and fix our distorted images in Rise:

Remove the max-height which is distorting the aspect ratio of full-width images in process block cards:

.process-card__media img.img-img--fill {
max-height: none;
}

/* bonus- remove the process card step labels completely */
.process-card__number {
display: none;
}