When I add an image to a tab, I see a strange down-scaling behavior:
If I add image as in a screenshot 1.jpg : image size is 1064 x 784 px, in PNG format. It looks smaller, does not take the full width, compared to the second screenshot (2.jpg) --
For 2.jpg I used actually smaller image (1012 x 630 px, and in GIF), but it is spread on larger area inside the element.
I am interested in taking as much width as possible for the image.
What is the logic behind the scaling? How should I optimally use image proportions and size, so that it won't be shrunk like in 1.jpg, though the original uploaded image into Tab is larger than the image in 2.jpg?
(Had to blur the content due to confidentiality, but the purple thin stroke indicates width differences)
I am here searching for the same answer for the Process Lesson. I've visited the Best Practices article, but that does not explain the image constraints. It appears to be constrained based on the length of images. The images I have that are shorter in length, usually fill the entire screen, but images that are longer in length, usually get constrained by Rise and do not fill the screen. If someone from Articulate Staff could explain the cut-off point, it would be very helpful. Thanks!
Thank you for sharing your observation, I shall give it a try.
Indeed, I would too appreciate if Articulate Staff could instruct on best practices in proportion choices: of course ,due to the responsive courses' nature we cannot expect any fixed sizes, but the proportions of the invisivble grid sizes of containers , used "behind the scenes" , and their expected behavior - could help us very much!
Since Rise is responsive, the width changes depending on your device and orientation.
For example, the sample image in a tabs block might not fill the entire width in desktop view (depending on the size of your browser window), nor does it fill the width in tablet-landscape view. However, the image may fill the width in the other (narrower) views.
So in short, an image might not always fill the available width, depending on the size of your image and the device/orientation you're using.
I believe the only images in Rise that always fill the available width are Image full width, Text on image, and Quote on image blocks. Keep in mind that to always fill the available width, the image will be cropped, and the crop depends on the device and orientation.
I probably miss the intention behind Articulate design decision, but I can see that the solution to responsive mobile design does allow an image in a tab element to take the whole width, whereas the same image is majorly scaled down in the PC version, though it has a lot of space on the right.
Ttabs element does not seem to have height limitation, so the image in PC version could theoretically be scaled so that it uses most of the width, just like in mobile version, and its height would then adjust accordingly. This would help a lot.
I attach here two screenshots for PC and mobile use of image in a tab.
Since this discussion thread is a bit older, let's start fresh. It sounds like you're using an image in a Tab Block. Can you tell me more about the problem you're seeing?
7 Replies
I am here searching for the same answer for the Process Lesson. I've visited the Best Practices article, but that does not explain the image constraints. It appears to be constrained based on the length of images. The images I have that are shorter in length, usually fill the entire screen, but images that are longer in length, usually get constrained by Rise and do not fill the screen. If someone from Articulate Staff could explain the cut-off point, it would be very helpful. Thanks!
Dear Molly,
Thank you for sharing your observation, I shall give it a try.
Indeed, I would too appreciate if Articulate Staff could instruct on best practices in proportion choices: of course ,due to the responsive courses' nature we cannot expect any fixed sizes, but the proportions of the invisivble grid sizes of containers , used "behind the scenes" , and their expected behavior - could help us very much!
Hi Molly and Irina,
Since Rise is responsive, the width changes depending on your device and orientation.
For example, the sample image in a tabs block might not fill the entire width in desktop view (depending on the size of your browser window), nor does it fill the width in tablet-landscape view. However, the image may fill the width in the other (narrower) views.
So in short, an image might not always fill the available width, depending on the size of your image and the device/orientation you're using.
I believe the only images in Rise that always fill the available width are Image full width, Text on image, and Quote on image blocks. Keep in mind that to always fill the available width, the image will be cropped, and the crop depends on the device and orientation.
You can see a good example of this in the landscape vs. portrait view here.
Dear Ashley,
I probably miss the intention behind Articulate design decision, but I can see that the solution to responsive mobile design does allow an image in a tab element to take the whole width, whereas the same image is majorly scaled down in the PC version, though it has a lot of space on the right.
Ttabs element does not seem to have height limitation, so the image in PC version could theoretically be scaled so that it uses most of the width, just like in mobile version, and its height would then adjust accordingly. This would help a lot.
I attach here two screenshots for PC and mobile use of image in a tab.
Thank you very much!
Thanks, Irina. I can definitely understand where you're coming from, and I'll be sure to pass your thoughts along to my team!
is there any answer to this trobule / concern ?
Hi Jose,
Since this discussion thread is a bit older, let's start fresh. It sounds like you're using an image in a Tab Block. Can you tell me more about the problem you're seeing?
This discussion is closed. You can start a new discussion or contact Articulate Support.