NEW RCE Maintain Attributes When Replacing Images

[garrett_william]

Embedding images with the new RCE Enhancements is causing major development problems when I am working on our course designs. For this reason I am a posting feature idea to address one of these concerns.

There are other ideas worth voting on related to images and you can find them here:

New RCE: embed images from folder view 

New Rich Content Editor: Open Links in New Window 

Image Replacement. When selecting an image to replace another image, none of previous attributes are persevered. Embedded hyperlinks are lost. Size and position are lost. This is not how the old RCE worked. This functionality needs to be restored. Most image replacement schemes keep embedded attributes and sizes (Microsoft, Google, etc).

I propose that the an image maintain its size and embedded hyperlink when replaced by another image.

🔎 This idea has been archived. While this idea isn't open for comments, it is an important part of Instructure’s idea conversations and development process. Contributions like this are valuable as Instructure prioritizes work on new or existing features.

[James]

I haven't used the new RCE much and when I have, it has been a terrible experience, so I don't doubt that something could be improved. That said, I cannot get on board with this change.

When I change images in the old RCE, it does change the dimensions to match that of the new image.

That's a good thing because I want the size to change when I change the image. Keeping the ALT attribute would be nice, though.

One of HTML design features I learned a long time ago was to scale the image for its desired size.  In other words, if you want it to be 320 by 240, you make it that size. You don't make it 2560 by 1920 and then scale it within the browser. The ability of the new RCE to go with small, medium, large, or extra large images goes against this, but it does lead to consistency in height of images and as I use it, I find it nice. I have my students do screenshots and being able to make it a "medium" image is going to be a lot easier than trying to get them to scale it. My one complaint there is that there is no easy way to get back the original size of the image.

Okay, now I've got two complaints. I replaced an image with a course file and made it medium sized. I canceled the edit. Then I reloaded the page. Every image that I insert now is automatically scaled to "medium" and there doesn't appear to be a way to reset that or to embed images at their default size.

This is remembered cross-browser and so now there's no easy way for me to get back to inserting files at their original size. I change it to custom, but there's no way to get my original size and if I put in a custom scale, then it reverts back to Medium the next time I insert an image.

I changed the size to large, thinking it would remember that. No, the next image I inserted went back to medium. This is screwed up. 

If anything, this feature idea should be the opposite of what you're asking for -- that replacing images resets the size.

Keeping the replacement image the same size would only make sense if the width to height ratio is the same for both images. Even then, I would want the ability to reset the size of the image to its true proportions.

Hyperlinks are separate than images. href is not an attribute of img. You cannot have an image with an embedded hyperlink. You do not apply a hyperlink to an img element, you wrap the img element inside an anchor element to get the hyperlink.

When I was testing right now as I wrote this message, the new RCE kept my hyperlink when I replaced an image. That would be what was expected since the hyperlink is not part of the image.

[garrett_william]

Good to know. When I posted this I lost those embedded/ anchored links. I will go back and see if they work now. I do, however, want the image I replace to stay the same or similar size. I think the implementation that was supported by the old RCE is ideal in this regard. I've never used a program where this wasn't the case (Microsoft Office, Articulate, Google Apps, etc). If you want the original sized image you would simply delete and upload the replacement. This need for similar size also has a lot to do with tables and using these images as "linked menu items." Original sized images can make working with tables difficult, so if I am replacing an image I would like it to conform closely to its replacement. This table/linked image use case is actively promoted by Canvas. Having the ability to reset the image format (which is often included in other image replacement schemes would be helpful.

[James]

With the new RCE, you get this "options" pop-over. When just the image is selected, it's at the top. When you're to the side of the image, but inside the anchor element, it's near the text (which puts it in the middle of my image). Today is the first I've seen that, but I try not to use the new RCE. I only have it turned on in one sandbox course so I can test it.

I'm picking images from my course files or user files. I shouldn't have to reupload them to use them and that's contrary to the whole point of uploading images ahead of time. I'm not totally convinced that reuploading them would fix the size, either if I want to use them a second time. The decision to make them medium sized does not appear to be related to the image itself, it happens with images I haven't attached with the new RCE and different browsers.

At this point, every oversized image from my course files is getting resized to be medium. I did get one smaller file to stay its original size. I don't know if "medium" is the default or if medium is because I first chose medium. Either way, it's very frustrating. Good for students maybe --- maybe -- but bad for content creators. The strange thing is that I don't remember seeing anyone refer to this in the Community (but I don't follow the RCE group).

As a side-note: using tables for layout purposes is heavily frowned upon by the accessibility people.

[garrett_william]

James, I'm curious about your side note. When we first started out with Canvas, we were coached by their team to use images and tables for menus. It's even in their own templates. I do use some labeling conventions in the tables to help with accessibility. Is there a way to achieve similar layouts without the use of a table? Where could I learn more about this?

[Stef_retired]

 @garrett_william ‌

I generally find this oldie-but-goodie to be a good starting point for creating inviting page layouts: Home Sweet Homepages without Tables —and other resources in the Instructional Designers‌ group provide examples.

[dlyons]

@garrett_william, this behavior appears to have been fixed in my testing. Apologies that this feature idea was not updated sooner.

Please let me know if you're still seeing links get lost when replacing an image in the RCE.