Responsive images inserted with [img]

Topic: Responsive images inserted with [img] (Read 7143 times) previous topic - next topic

0 Members and 1 Guest are viewing this topic.

Responsive images inserted with [img]

January 03, 2015, 05:45:33 am

In SMF and also on elkarte we have Max display width of posted or attached images. In smf I used 750px for max width because if images were larger they "broke" the template.

Imo this option is useless in elkarte, because even if images are larger they get resized and not broke the template. If I set a max width on elkarte the same width will be applied on mobile and images are not resized and they will broke the responsive template.

What is your opinion?

p.s. Is there a way to remove the width inserted to existing images?
example:

Code: [Select]

[img width=675 height=450]http://www.designsnext.com/wp-content/uploads/2014/10/Happy-new-year-HD-Photos.png[/img]

shoud become

Code: [Select]

[img]http://www.designsnext.com/wp-content/uploads/2014/10/Happy-new-year-HD-Photos.png[/img]

Re: Responsive images inserted with [img]

Reply #1 – January 03, 2015, 06:26:56 am

untested but it's probably the simplest solution to just remove the BBC parsing regarding height and width
in Subs.php find:

Code: [Select]

				'content' => '<img src="$1" alt="{alt}" style="width:{width}height:{height}" class="bbc_img resized" />',

and replace it with:

Code: [Select]

				'content' => '<img src="$1" alt="{alt}" class="bbc_img resized" />',

Re: Responsive images inserted with [img]

Reply #2 – January 03, 2015, 06:33:24 am

Interesting point.
Yes, it's another of those things that nowadays are probably less useful.
Would make any difference set them to max-width and max-height instead of plain width/height?

Re: Responsive images inserted with [img]

Reply #3 – January 03, 2015, 06:48:06 am

Quote from: TE – January 03, 2015, 06:26:56 amuntested but it's probably the simplest solution to just remove the BBC parsing regarding height and width
in Subs.php find:

I did a quick test in localhost, and images with "width" and "height" are resized

Quote from: emanuele – January 03, 2015, 06:33:24 amWould make any difference set them to max-width and max-height instead of plain width/height?

no difference I think

Re: Responsive images inserted with [img]

Reply #4 – January 05, 2015, 09:55:13 am

Interesting idea. May apply this to mine as well.

Re: Responsive images inserted with [img]

Reply #5 – January 31, 2015, 11:48:21 am

Re-reading this, and looking to "take action", I realised that:
1. starting with 1.0.1 the bbcode uses max-width and max-height, so not a huge problem,
2. removing this option is not "just" remove the bbcode, because if this option is set, Elk fetches the image while posting the message and verifies the sizes are smaller than the allowed.

So, we have several options: first, since we do not really care about the size of the image any more (because we are using max-*), we can just remove the fetching of the image reducing posting time. This irrespective of anything else.
Then, we can either decide that the image size is defined by the theme and remove the settings altogether, or keep the option in case admins want to have smaller images.

Opinions?

ETA: and let's not forget that width and height set with the BBC are not only for resizing, but are to set a size, in the sense that I can decide to post a certain width/height (unless it's bigger than the max set in the admin panel/css).

Re: Responsive images inserted with [img]

Reply #6 – February 04, 2015, 05:09:54 pm

x-ref: http://www.elkarte.net/community/index.php?topic=1367.0

Re: Responsive images inserted with [img]

Reply #7 – February 04, 2015, 06:03:05 pm

I missed this topic, I mark it as unread to read it better from pc...

P. S. I used the trick suggested by TE

Re: Responsive images inserted with [img]

Reply #8 – February 05, 2015, 08:09:57 am

Yep, this is an option, though it "cuts" some features.

Recap.

Images in posts can have several "limits" on sizes:

Mostly hard-coded size limitation due to the main css: max-width: 100% on the message container,
Flexible "admin-defined" width on each and every image used: setting in the admin panel the max-width/heigh for an image^[1]
user-defined width/height set at image level^[2]

The trick proposed by TE will make impossible for any user to define an image-specific width/height, so if I use:

Code: [Select]

[img width=100]http://www.domain.tld/url-to-image.png[/img]

it will not add the width I specified in the tag to the resulting image, so instead of:

Code: [Select]

<img src=""http://www.domain.tld/url-to-image.png" style="max-width:100px" />

Elk will render:

Code: [Select]

<img src=""http://www.domain.tld/url-to-image.png" />

It may or may not be relevant in specific cases, though I'd like to keep that function because I use it and I have some idea to use it for other purposes in the future (e.g. being able to resize images inside the WYZ editor by drag&drop setting width and height in the bbc tag).

A possible way to keep all the features and avoid some creepy stuff (like fetching images) would be to specify a <style> tag with the max-width/height set in the admin panel for the resized bbcode image, find a way to "attach" this style to the images that have to be resized and keep the inline styles for user-defined sizes.

That's the easy description.
The problem with all this is that inline styles have an higher priority that styles attached to classes, so in the scenario I described, if the admin sets a max-width to for example 500px, but the user specifies in the tag 600px, then the user-defined takes the priority above any other max-width/height.
As far as I know, the only workaround, is to wrap the image into a div, set the admin-defined max-width/height on the div and then set the user defined max-width/height on the image itself. That way the image will not span more than the container.
A bit ugly though...

Disclaimer: I'm currently a bit sick, so don't think too much on what I wrote. LOL

¹This means that when the image is posted, Elk fetches the remote file, determines the size, and if it exceed the limits it applies an inline max-width/height, the one TE suggested to remove.↵

²You can manually define a width/height for each image you post inside the bbcode tag, defining a width/height that may be different for each image and cannot exceed the admin settings at point 2.↵

Re: Responsive images inserted with [img]

Reply #9 – February 06, 2015, 06:08:28 am

Quote from: emanuele – February 05, 2015, 08:09:57 amThe trick proposed by TE will make impossible for any user to define an image-specific width/height

I know and I understand how these img properties are working on smf/elkarte, but it was the simpliest way to see the images on mobile without breaking the responsive template. I have a lot of users on my forum who are using smartphones or tablets and responsive design on elkarte was one of the main feature that convinced me to switch from smf.

Quote from: emanuele – February 05, 2015, 08:09:57 amIt may or may not be relevant in specific cases, though I'd like to keep that function because I use it and I have some idea to use it for other purposes in the future

I am not a coder so I cannot help, I don't know if it's possible but a solution could be to display the images on desktop as it were on SMF(using width and height), and on mobile overwriting the width of images based on width of device.
ex: if I have an image (img width=640)link_to_img(/img) should be displayed correctly on desktop, but if my device is 320px the bbcode should be interpreted as (img width=320)link_to_img(/img)
Maybe is possible doing this with css, but as I said I'm not a coder

Re: Responsive images inserted with [img]

Reply #10 – February 06, 2015, 07:01:01 am

Yep, that as well I guess but I'm terrible with css. lol

Re: Responsive images inserted with [img]

Reply #11 – October 21, 2015, 04:49:15 am

I don't see an easy way to do this. I think the easiest and best solution is to use Javascript to resize it. The other option I was thinking is that the widght/height in the BBC could fire an event which the theme can listen to and change the sizes to match. Or, just do it in the already existing hook. I still think the JS method will be easier and will probably be better.

Re: Responsive images inserted with [img]

Reply #12 – October 21, 2015, 04:54:19 am

In my view has Javascript unnecessarily. Some browsers disable Javascript. Sample "Edge" Browser.

Re: Responsive images inserted with [img]

Reply #13 – October 21, 2015, 05:00:14 am

I have a concept to do it via AngularJS. Will post in a new thread.

Re: Responsive images inserted with [img]

Reply #14 – October 23, 2015, 12:15:23 pm

@radu81 I also tried @TE suggestion above but it didnt make the attached image in my post responsive. I used @Spuds inline attachment though. Any suggestions guys how I can make the inline attached images fit to its parent container? thanks!

xref: http://www.elkarte.net/community/index.php?topic=3055.0