2y ago

How do I set Lemmy to fully expand images?

Right now, the only method I found is to click on the expando, then right click on the image and open it in a new tab. Is there a way to make it so I can just click it once? I can't imagine any possible scenario where I'd want to see a large but not full size image.

I'm using the browser on my computer if that's relevant.

Edit: I got it to work using the Stylus addon and:

    
.img-expanded:not(.banner, .avatar-overlay) {
    max-height: unset;
    max-width: 100vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    outline: auto;
    outline-color: black;
    z-index: 1;
}

I also made it outline any expandos with:

    
/*Note: Links are exactly the same except without bg-transparent, so using not(bg-transparent) instead will outline the links instead of the expandos. Also, they're outlined orange unless you change it, so you could take that off, give them all outlines, and you can tell which they are based on the color.*/
.thumbnail.rounded.overflow-hidden.d-inline-block.position-relative.p-0.border-0.bg-transparent {
    outline: auto;
}

17 comments

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.
- 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 !pics@lemmy.world posts, and couldn't quickly find whether this would affect images in comments.
- 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.
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.
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.

17 comments