You could add .img-expanded { max-height: unset; } as a rule for your lemmy instance in the Stylus addon for browser. This will remove the height limiter for images.
this post was submitted on 13 Jul 2023
20 points (95.5% liked)
No Stupid Questions
36189 readers
1216 users here now
No such thing. Ask away!
!nostupidquestions is a community dedicated to being helpful and answering each others' questions on various topics.
The rules for posting and commenting, besides the rules defined here for lemmy.world, are as follows:
Rules (interactive)
Rule 1- All posts must be legitimate questions. All post titles must include a question.
All posts must be legitimate questions, and all post titles must include a question. Questions that are joke or trolling questions, memes, song lyrics as title, etc. are not allowed here. See Rule 6 for all exceptions.
Rule 2- Your question subject cannot be illegal or NSFW material.
Your question subject cannot be illegal or NSFW material. You will be warned first, banned second.
Rule 3- Do not seek mental, medical and professional help here.
Do not seek mental, medical and professional help here. Breaking this rule will not get you or your post removed, but it will put you at risk, and possibly in danger.
Rule 4- No self promotion or upvote-farming of any kind.
That's it.
Rule 5- No baiting or sealioning or promoting an agenda.
Questions which, instead of being of an innocuous nature, are specifically intended (based on reports and in the opinion of our crack moderation team) to bait users into ideological wars on charged political topics will be removed and the authors warned - or banned - depending on severity.
Rule 6- Regarding META posts and joke questions.
Provided it is about the community itself, you may post non-question posts using the [META] tag on your post title.
On fridays, you are allowed to post meme and troll questions, on the condition that it's in text format only, and conforms with our other rules. These posts MUST include the [NSQ Friday] tag in their title.
If you post a serious question on friday and are looking only for legitimate answers, then please include the [Serious] tag on your post. Irrelevant replies will then be removed by moderators.
Rule 7- You can't intentionally annoy, mock, or harass other members.
If you intentionally annoy, mock, harass, or discriminate against any individual member, you will be removed.
Likewise, if you are a member, sympathiser or a resemblant of a movement that is known to largely hate, mock, discriminate against, and/or want to take lives of a group of people, and you were provably vocal about your hate, then you will be banned on sight.
Rule 8- All comments should try to stay relevant to their parent content.
Rule 9- Reposts from other platforms are not allowed.
Let everyone have their own content.
Rule 10- Majority of bots aren't allowed to participate here.
Credits
Our breathtaking icon was bestowed upon us by @Cevilia!
The greatest banner of all time: by @TheOneWithTheHair!
founded 2 years ago
MODERATORS
I tried that. It still seems to be limiting the width. How can I make it so it can stretch from one side of the screen to the other?
This will allow maximum expansion, but will somewhat break display of the sidebar:
.col-lg-9, .col-md-8 {
width: unset;
}
.container-lg, .container-md, .container-sm, .container {
max-width: unset;
}
.offset-sm-3 {
margin-left: unset;
}
I've only tested with a few [email protected] posts, and couldn't quickly find whether this would affect images in comments.
Changing .img-expanded { max-height: unset; } to .img-expanded:not(.banner):not(.avatar-overlay) { max-height: unset; } Fixes the banner and Lemmy icon, since they're listed as .img-expanded for some reason. I'm hoping to figure out how to make it overlay the image on top of the sidebar, or at least only push it away while the image is opened.
How is this not a solved problem? Am I the only person who cares about seeing the image at a larger resolution?
Nice.
How is this not a solved problem?
Tradeoffs I'd imagine. Lemmy devs need to prioritize between lots of things that absolutely need to be addressed first (like the recent vulnerabilities), and as a result relatively "minor" issues like this gets stuck on the sidelines. In addition to that, "beauty is in the eye of beholder", so spending development time on this stuff when it might not even be acceptable to people is… well, wasteful.
That being said, the code is open source, so anyone can help and contribute improvements/fixes.
Am I the only person who cares about seeing the image at a larger resolution?
Definitely not. I didn't quite realize just how much of a difference this would make, but now that I've added it to CSS overrides it does make a huge difference. Thanks for pointing it out.
It's not just a Lemmy thing. Imgur has the same problem too, and the only reason it exists is for images.
Anyway, I don't think this fix is ideal, but I'm going to head to a CSS community to get it working properly.
I improved the fix and edited the post to show it. Now it doesn't mess with the sidebar and leaves the margin on the left for everything but images. And I added something to outline expandos. I'm tired of accidentally opening links. I really wish they weren't opened the same way, but that's not something i can fix with CSS.
For images inside comments (also can break sidebar):
.md-div img { max-height: unset; }
Mobile?
Eh. Mozilla insists that you have to jump through loops and hoops just to be able to install whatever addons you please on mobile Firefox. For teh "better user experience" or whatever.
https://www.androidpolice.com/install-add-on-extension-mozilla-firefox-android/ if you wish to try.
I was able to do this the first time, but I can't figure out how to get back to the page to add styles to Stylus. I'm using Chrome. I noticed that some other extensions have extension options when you click on them, but Stylus doesn't have that. It has Site settings and Open extension website, which look like they might be relevant but aren't.
Clicking on the extension in the browser bar shows menu that can be used to access/create rules, but I'm using Firefox.
My trick is I usually change the position of the image element itself with absolute positioning, then I cal the width of the window and height, if the width > height, i put black bars with padding and background:black; if you put 100% width, the height is still not guaranteed if u have a long photo, same goes for the opposite. I just cal widths with JS b/c my css attempt was taking too long.. lolol
In case it helps, there is the userscript Lemmy Image Expand, from this other post.
That automatically expands the images. I don't want them automatically expanded. I just want them to fully expand when you click on them. The default way to expand an image is click on the thumbnail, then it turns into a bigger thumbnail, then you middle click on that to open it in a new tab, then you move to the new tab. Or you click on it and have to unload the rest of the page. It would be nicer just to show it on the page and make it a single-step process.
3rd party app like Thunder have images expanded by default
I don't want them expanded by default. I just want it so that when I click on the thumbnail, it fully expands. Also, apps are a phone thing, right? Fully expanded on my phone is even smaller than partially expanded on my computer.