Re: Image Size Issue

[RyanRev]

Dear Nabble team .. I would have only one request..

When inserting an image - the image doesn't resize correctly.. like at smaller screens it just keeps as big as is - you know the point..

So it is necessary to add following code: style="width:100%"

While this is no problem for me, it could be a little hard for visitors of my forum. .. would it be please possible to add this option when inserting the image ? Like there are some options to resize - so it would be great to have in default "automatic" and it would just paste that code (style="width:100%" ) to the image's code automatically.

Is that please doable ? (at least at my forum). Thanks so much - you're doing an awesome job!!

[GregChapman]

Hi Ryan,

RyanRev wrote

When inserting an image - the image doesn't resize correctly.. like at smaller screens it just keeps as big as is - you know the point..

So it is necessary to add following code: style="width:100%"

would it be please possible to add this option when inserting the image ? Like there are some options to resize - so it would be great to have in default "automatic" and it would just paste that code (style="width:100%" ) to the image's code automatically.

Is that please doable ? (at least at my forum).

It should be possible to edit the NAML code in your forum so that all images include the code - style="width:100%". Use the "Edit this page" link, open the tools menu (cogwheel button) and search for the macro "editor_insert_image_button" and then the line of code:

var tag = '<nabble_img src="' + name + '" border="0"'; 

 Using the "Override this macro" facility, it should be possible to edit the macro to add the styling code you want there.
(CAUTION: I'm not a NAML expert and have not tried this myself!)

However, you need to consider the implications of this edit alone. Nabble's image re-size facility operates at the upload stage, whereas your suggestion operates on the browser rendering stage. If one of your users selects a re-size to 250px and a user has the forum operating full width on a 1920px screen then that image is going to appear very grainy. You might be able to prevent the worst excesses of this with a combination of "width and "max-width" styling. I can't say I've tried it.

You also need to consider the impact of the float options. Some users will deliberately set float options in combination with a small size with the expectation of text being seen to one side of the image. Forcing all images to display at 100% width would upset this with the possibility of making references in the text to images on the right or left meaningless.

In short, if the aim is to get optimal display of images in all circumstances then the issue is far more complex than displaying at 100% width - and I can't offer an ideal solution. The best I can come up with - and it doesn't really address the issue of mobile-friendly display - is to provide a FAQ on images. A typical example can be found at:
http://seahawk-forum.968426.n3.nabble.com/Inserting-Images-in-the-Forum-tp1599211.html

[Note: I have limited editorial rights on this forum and have moved your post to become a new topic. To help others searching for solutions to this issue, it might be better if you edit the subject line of your post.]

[RyanRev]

Thanks so much Greg for all your help - I appreciate that! You are very correct that there are just so many devices and that's the issue. I wanted to make something like autoresizing by setting the width:100% - but as I can see, by doing this to all images, it will cause some another issues.

We would most probably need something like auto resize the image only if it's bigger that the screen where the image is displayed on. I would be very happy if that could be solved one time as it would add more professional look of the forum.

And sure, I have edited the subject line.

Thanks and have a great day!