Hi Friends,
I'm starting to think I have a misunderstanding about this.
Admin panel > Features and Options > Layout > Max width of posted pictures (I set for 1200)
and
Admin panel > Features and Options > Layout > Max height of posted pictures (I set for 600)
After some difficulty posting a large image (which we still haven't completely solved) I've done some testing. I've successfully posted images up to 3700 pixels square (just now). And there's another from some years ago 800 x 12,000 height. (yes, that's 12,000, and I think is closer to 14,000 but would have to look it up to be sure)
Yes, I did have to ask my host to make some changes, so that my server could hold images that large. My recent tests show that over 3700 pixels square won't post.
So there are still many questions I hope to answer. But the first one, is if SMF is supposed to be limiting "posted pictures" to 1200 x 600, how are such large images possible? There must be some other meaning which is not obvious.
SMF 2.0.14 Not sure what else you might need, but just ask. Over 40 mods. Made this post to discuss troubleshooting this issue:
https://forum.inkscapecommunity.com/index.php?topic=815.0
Thanks for your help :)
how are you posting the images? are they using img tags or are they attachments?
What happens is that if you have a limit set, SMF will try to download the image to assess its size.
The behaviour of DeviantArt may make it impossible for SMF to get the image itself. Alternatively if the image is too large or doesn't seem to be an image (and SVGs from Inkscape definitely wouldn't count, btw) it will not try to resize it.
As for its actual resizing, it doesn't create a smaller version. It just tells the browser to not go over that size.
Maybe this will accomplish what you want: https://custom.simplemachines.org/mods/index.php?mod=1197
To answer Illori, this is about images in the message using img tags. I also have a similar question about attachments (which has different options), but thought I would solve one thing at a time.
Arantor, yes, we've sadly found that SVGs don't work with the img tags. So we use attachments for SVG.
My current theory is that there is something about the DA hosted image which caused it not to get the height/width tags which other images get. However, it is possible to add them manually.
QuoteAs for its actual resizing, it doesn't create a smaller version. It just tells the browser to not go over that size.
No, I never thought that SMF was resizing to the values I set. In some cases, it seems to make thumbnails for certain large images. But without understanding how it works, it seems inconsisent.
So you're saying the the values I set for those options tell the browser not to display images larger than that? But yet, the browser appears to be displaying them anyway.
Steve, thanks for the info. I'm not really trying to accomplish anything. I just want to understand what those settings are either doing, or supposed to be doing. Once I understand, I might decide to do something differently, though.
I have not experienced, or heard any reports of images which, for example, won't post, or produce an error message about being too large (except for this one particular DA image). So SMF is displaying essentially every image which is embedded into a message.
For awhile, I thought that 1200 x 600 was the point where SMF creates a thumbnail, which when clicked, shows the full size. But I have not seen that consistently. Maybe I could do some kind of test for that (similar to how I tested the maximum width).
Ok, well this test seems to support, that 1200 and 600 are the points at which a thumbnail is created.
https://forum.inkscapecommunity.com/index.php?topic=820.0
Edit
The first message shows examples where I made the values a lot higher or lower than this limit. It holds out that 1200 x 600 is the point at which a thumbnail is created. BUT it doesn't make the thumbnail 1200 x 600, which is....well to me, the way those settings are worded leads me to think the thumbnails will be 1200 x 600.
Well actually no. The way they are worded seems to indicate that images larger than that won't even be accepted. But the next most reasonable meaning, is that's the thumbnail size.
The 2nd message shows where I made the values much closer to the limit. It still holds out that's the point where the thumbnail is created. But again, it's not clear how SMF decides what size to make the thumbnail. It looks like the thumbnail is some percentage of the image size??
Perhaps those options need some different language??
Edit #2
Perhaps it would be better if the thumbnails were a consistent size?
Steve, it's not clear from reading about that mod. Does it make all the images the same size of thumbnail?
The default size limit function does not create thumbnails, it simply defines a width and height to match your limits, if the image goes over them.
For example in your last test this is the generated html:
<img src="https://inkscapecommunity.com/img/1500x400.png" alt="" class="bbc_img resized" style="cursor: pointer;" width="1200" height="320">
If you set an image max of 1209x600, it will try to find the image size and display it as big as it can to meet that size, while retaining aspect ratio.
It doesn't make thumbnails, it just says "what's the biggest I can show this image".
And no, it can't work for SVG because there isn't really a "size" in an image that can be effortlessly scaled up and down because it only defines lines of ratios to each other.
If you do not care about the "click to enlarge" function, you can have a better result if you disable these limits and use css instead. It will then always scale any embedded image, and you may also use percentages.
QuoteIf you do not care about the "click to enlarge" function, you can have a better result if you disable these limits and use css instead.
How do I use css instead? Does simply disabling those limits default to css?
I'm not sure what I want to do yet. Just trying to understand how it works, at this point.
So when an image is embedded which either its height or width goes over the limit I set, then it....well it doesn't really scale it....if it's not called a thumbnail, then it must effectively zoom it....so that whichever dimension went over the limit, is now equal to that limit, and the other dimension adjusts itself to keep the same proportion.
Would there be any way to have all images the same width, and leaving the height so that it sort of self-adjusts, to keep the proportions?
I think what makes the way images are handled seem inconsistent and unpredictable, is that sometimes the width is "zoomed" and the height adjusts to keep the proportion, and sometimes it's the height. And then there are the images which aren't changed at all.
I'm thinking the forum might have a better appearance if all the images had the same width (or theoretically the same height, but width would probably be better). Maybe something like 300 or 400 pixels. That would mean that some images might need to be bigger, but just so there's some visual consistency. But I have no idea if it would be possible.
(SVG excluded from the above question.) Off to search the mod site....
QuoteHow do I use css instead? Does simply disabling those limits default to css?
No, but you can add the following in your index.css to do it:
.bbc_img {
max-width: 100%; /* You can use a value in px here too */
max-height: 600px; /* This is optional */ }
SVG images are still images, css scales them regardless.
The way it works is it simply uses both limits you defined. Nothing ever goes over it. The code doesn't care for anything that is within the limit, doing nothing to it. Css does the same thing, minus a few issues.
Unless you have a very specific set of rules regarding images in your entire forum I don't think you should make all of them be of the same size, as you will have distorted images as a result, if the image has to be stretched. You may want to look into using bbc's [img] tags width/height instead.
QuoteYou may want to look into using bbc's [img] tags width/height instead.
How would that work? I see that the forum automatically adds them, to respect the 1200 x 600 limits I set. Do you mean teach everyone how to add them manually? Or is there a mod, or some way to do it more smoothly?
In the code that you provided, to use css, where it says max width 100%, that would make all images the full width of the message, right? I was really thinking about something smaller, maybe around 400 px. So if I used that code, would I change 100% to something like 40 to 50%?
If I did that, then images less than that width would be stretched larger? And also, if I do that, then I change the 1200 x 600 back to zero for both?
In the end, now that I know how it works, I might just keep using the same thing I'm using now, but just change to smaller widths.....
OH....wait!! If I set width to, let's say 400 or 500 px, and set height to zero, wouldn't that effectively make all the images 400 or 500 px wide (unless the image is smaller)?? Because that would mean nothing hits for height....it would only adjust for width. Right??
Read the comments in the sample code I gave. Height is optional, you can remove it.
The forum does not automatically add height and width for the bbc tags. I am talking about this: Img (http://wiki.simplemachines.org/smf/Img)
Correction: It does with this feature enabled, but you can use custom heights/widths.
It does automatically add them if you specify a maximum size for posted images in the admin panel... which is the whole problem at hand here.
Quote from: Arantor on November 05, 2017, 12:35:43 PM
It does automatically add them if you specify a maximum size for posted images in the admin panel... which is the whole problem at hand here.
Not inside the tags (the bbc, not html), or does it? I can't recall for sure now, as I had it disabled early on.
It rewrites the img bbc to include a size so size is constrained while aspect ratio is preserved, and this was implemented years before max-width or max-height existed so it was the only way to do it.
Oh, I see. This explains some of the issues I had (and why I removed it so soon...). I think I never went back to edit the converted images.
Fixed, thanks :)
Quote from: Gwenwyfar on November 05, 2017, 12:18:49 PM
Read the comments in the sample code I gave. Height is optional, you can remove it.
The forum does not automatically add height and width for the bbc tags. I am talking about this: Img (http://wiki.simplemachines.org/smf/Img)
Correction: It does with this feature enabled, but you can use custom heights/widths.
Yes, I see that height is optional in the code you gave.
Yes, I'm talking about that brown button which adds the img tags.
I'm glad you solved your problem. I still have some questions though.
If I were to continue to use the same options that I do now, and I set the width to something like 500, but I set the height to zero, wouldn't that result in all the images being either 500 wide or less. Wouldn't that mean that nothing gets adjusted for height - only for width?
Regarding your comment about using the height and width tags -- when we use the brown button, it only adds the img tags. That button does not automatically enter height and width into the tags (I only find them after an image is posted, and I open the message to edit). Otherwise, as far as I can tell, the only way to get the width and height tags is to manually type them in. Is there some other way?
And hopefully last. Whatever change I make, will only be going forward, right. It won't effect images which are already posted, will it?
Oops, one more. What is max-height and max-width? I mean, I know they are html/css tags or elements or whatever. Or do you mean there are some SMF option for those?
Thanks again :)
max-width and max-height are directives you can put into CSS, which you can tag onto almost any element to prevent its size going bigger than intended.
In this case, I'd probably ditch the settings in SMF's admin, and replace them both with CSS in your theme's index.css file:
.bbc_img {
max-width: 1200px;
max-height: 600px;
}
This should make it so that images in posts go no bigger than 1200px wide and 600px high, and it should retain its aspect ratio and shouldn't need anything else - and then you can remove SMF's directive and it will even work on SVG images too.
I'll give it a try.
Thanks for everyone's help and patience. Much appreciated :D
Actually, one last question. Does it matter where in the index.css file, I put it?
I see there are all sorts of different sections and categories, and probably this should go in some particular section. And the files are probably different for each theme. So if you could tell me what to look for, I can probably find it.
Oh, or tell me where to put it in the default/Curve theme, and I can probably figure it out for the other themes.
Or should I just make a special new little section? (the one I'm looking at has all kinds of comments inside /*commment*/, to identify what it does.)
Thanks again
In this case, no it doesn't matter. Other stuff can matter, but this shouldn't.
Awesome, thanks again!
Sorry for re-opening this. I've tried using the code you gave me. I thought you said it would work for SVG images. But on the first try, not working.
Here's the code I used. I put it right at the top of index.css. Saved, uploaded and overwrote, and also I confirmed it was overwritten. And I changed the SMF settings (as mentioned in the op) back to zero. I haven't changed the other themes yet, only Aqua Style theme (our default).
/* Styles for the general looks for the Curve theme.
------------------------------------------------------- */
/* brynns image size fix. */
.bbc_img {
max-width: 800px;
max-height: 600px;
}
/* Normal, standard links. */
a:link, a:visited
Here's a link to the message where I made the first test: https://forum.inkscapecommunity.com/index.php?topic=815.msg5787#msg5787
Ooohhh....why are there 2 index.css files? I had edited Themes/Aqua/index.css. But now, after more looking around, I found....looks like the exact same file in Themes/Aqua/css/index.css. But it didn't get edited along with the other one.
Do I need to edit both of them? Do I have some problem indicated by having 2 of them? Or does the Curve/default theme have to be edited, before the change starts to show up? :o
Thanks
Hovering over the element inspector shows you which file you needed to edit ;)
(https://i.imgur.com/e0Hwh44.jpg)
Also, css is executed from the top down
New code should be placed at the BOTTOM/END of the file
Ok, thanks for the info, folks.
Trying again....
Yay! Finally got it working.
In the end, probably won't stick with it. But I still appreciate all your help!
Solved again :)