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:
[img width=675 height=450]http://www.designsnext.com/wp-content/uploads/2014/10/Happy-new-year-HD-Photos.png[/img]
shoud become
[img]http://www.designsnext.com/wp-content/uploads/2014/10/Happy-new-year-HD-Photos.png[/img]
untested but it's probably the simplest solution to just remove the BBC parsing regarding height and width
in Subs.php find:
'content' => '<img src="$1" alt="{alt}" style="width:{width}height:{height}" class="bbc_img resized" />',and replace it with:
'content' => '<img src="$1" alt="{alt}" class="bbc_img resized" />',
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?
I did a quick test in localhost, and images with "width" and "height" are resized ;)
no difference I think
Interesting idea. May apply this to mine as well.
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).
x-ref: http://www.elkarte.net/community/index.php?topic=1367.0
I missed this topic, I mark it as unread to read it better from pc...
P. S. I used the trick suggested by TE
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
- user-defined width/height set at image level
The trick proposed by TE will make impossible for any user to define an image-specific width/height, so if I use:
[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:
<img src=""http://www.domain.tld/url-to-image.png" style="max-width:100px" />
Elk will render:
<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
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.
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 :(
Yep, that as well I guess but I'm terrible with css. lol
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.
In my view has Javascript unnecessarily. Some browsers disable Javascript. Sample "Edge" Browser.
I have a concept to do it via AngularJS. Will post in a new thread.
@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
Since you know the size just round it off and use some CSS rules.
So
[IMG width=980]some image[/IMG]
Will output
<IMG src="some image" style="width:980px;" class="IMG_width1000" />
You can still define the main width and the class will override it with different viewport settings.
*edit, just reread my post, but in this example if the width is smaller than 1000 px override it to a percent
It is late and I am on mobile, I do it here.
http://www.sicomm.us/media/item/14/
The CSS is the minimalism-chat.CSS or similar file name.
Also informative:
http://stackoverflow.com/questions/28682144/width-and-max-width-attributes-of-image