Jump to content

Scaling Images on the Home Screen of the Web Interface


Quiks
Go to solution Solved by Happy2Play,

Recommended Posts

Quiks

Hi,

I haven't done any Web App CSS before, but something I would really like would be the ability to scale down the size of the web client. It is definitely in a TV mode where you'd be able to see everything far away from the screen, but when I'm using it on a secondary monitor, it feels very crowded or overwhelming.

I'd love to be able to scale it down ~50%. It'd be great if this were just a slider or setting in the UI, but I don't know if/when it would be implemented.

 

Is this something I can achieve with CSS? Scale the images to 50%, but keep the text the same size?

 

If the above is possible, is it possible to make a slider for scaling to a desired size from (25-200% maybe) in CSS? I assume this one probably won't be possible.

Edited by Quiks
Link to comment
Share on other sites

Hi, the web app is not in TV mode. What you can try doing is adjusting your browser zoom setting.

Link to comment
Share on other sites

Quiks

Hi, the image size does get smaller, but I can't get to my desired size even at 25% and the text becomes unreadable.

 

What I meant by tv mode, is that it's optimized in a way that is easier to view from sitting further away. From a Maximized browser window, where i'm < 1 foot away from the screen, it's pretty huge. If you click on my below picture, you can see how it's scaled on a 22 inch monitor at 1920x1080. The size of the banners/posters are unnecessarily large when close to a screen. I don't see a problem with this view being the default, but it'd be nice to be able to change it in some way.

 

Normal Size 

5ad78d5e6cfb0_wat.jpg

The image size also doesn't scale to the same ratio as the text. The image size went down a little bit, but not even to where i'd want it eventually. at 25%, it looks like the image went down to 66% the size or so.

 

25% size

5ad78e918337c_wat.jpg

 

This is at 25% and the images still aren't as small as I'd like them on my browser window.

 

If I resize my browser window, I can get it to about the size i'd want, but i'd like to be able to do this independent of my window size because as it is, it's very large on a 22 inch screen when maximized. Also, zooming out makes the text completely illegible, not to mention any UI elements or administrative interface.

 

25% size browser window re-sized.

5ad78eddc3f17_wat.jpg

Edited by Quiks
Link to comment
Share on other sites

Quiks

Is there no chance to just have a scalable slider in the UI or setting option. It seems kind of silly to have to scale the browser window and then adjust the text size after (if you added that setting). Maybe it's just me, but it feels like it should be built in rather than worked around.

 

Also, is there no css option to adjust the home screen image size?

 

Thanks for the replies. I really do appreciate it.

Link to comment
Share on other sites

We already have a custom case feature and there is a section in the community where people have posted what they've come up with.

Link to comment
Share on other sites

Quiks

Maybe my searching is lacking, but I can't seem to find it. Are we talking about the CoverArt plugin?

 

 

Just so it's known, scaling the browser to 25% will likely never be a real option even with changing the text font size.

every element becomes unusable and tiny.

5ad7ad903e82e_wat.jpg

 

 

If the images scaled uniformly, it might help, but as it stands, they barely change in size compared to the rest of the UI.

Edited by Quiks
Link to comment
Share on other sites

Quiks

Oh, right. I think you typo'd it to "custom case feature". That makes more sense.

 

Yeah, that's why I opened this thread. I think I created it in the correct spot.

I wanted to see if there were any css options to scale the size of the home screen images down as I have never worked with custom css before and wouldn't know where to begin myself.

 

Thanks in advance if anyone can point me in the right direction on this!

Edited by Quiks
Link to comment
Share on other sites

  • Solution
Happy2Play

Something like this?  Just need to adjust the scaling to your needs.

/* My Media Image Size */
#homeTab .smallBackdropCard {
    width: 14%;}
	
#homeTab .overflowBackdropCard {
    width: 14vw;}
	
#homeTab .overflowPortraitCard, .overflowSquareCard {
    width: 10vw;
}

  • Like 2
Link to comment
Share on other sites

Quiks

Awesome!

 

Thanks Happy!

You're a life saver.

 

 

With regards to the numbers, are each of those a type of image?

 

overflowportraitcard = poster?

overflowbackdropcard = ? 

smallbackdropcard = thumb?

 

What are the original values?

 

Is there an easy way to apply this to all the others views in the interface? for instance, when scrolling through movies or tv shows.

Edited by Quiks
Link to comment
Share on other sites

Happy2Play

Awesome!

 

Thanks Happy!

You're a life saver.

 

 

With regards to the numbers, are each of those a type of image?

 

overflowportraitcard = poster?

overflowbackdropcard = ? 

smallbackdropcard = thumb?

 

What are the original values?

 

Is there an easy way to apply this to all the others views in the interface? for instance, when scrolling through movies or tv shows.

 

It depends on your resolutions as there are multiple default values.  You can use your browser console to inspect each element.

 

overflowportraitcard = poster?    yes

overflowbackdropcard = ?         other rows thumb

smallbackdropcard = thumb?    My media row thumb

/*All portrait view and music*/
.portraitCard, .squareCard {
    width: 10% !important;
}

​/*Thumb views*/
.backdropCard {
    width: 15% !important;
}
  • Like 1
Link to comment
Share on other sites

  • 9 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...