Jump to content


Photo

Scaling Images on the Home Screen of the Web Interface


Best Answer Happy2Play , 18 April 2018 - 06:43 PM

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;
}

Go to the full post


  • Please log in to reply
13 replies to this topic

#1 Quiks OFFLINE  

Quiks

    Advanced Member

  • Members
  • 71 posts
  • Local time: 06:14 AM

Posted 18 April 2018 - 12:45 PM

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, 18 April 2018 - 04:50 PM.


#2 Luke OFFLINE  

Luke

    System Architect

  • Administrators
  • 137760 posts
  • Local time: 10:14 AM

Posted 18 April 2018 - 01:23 PM

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

#3 Quiks OFFLINE  

Quiks

    Advanced Member

  • Members
  • 71 posts
  • Local time: 06:14 AM

Posted 18 April 2018 - 02:32 PM

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, 18 April 2018 - 02:43 PM.


#4 Luke OFFLINE  

Luke

    System Architect

  • Administrators
  • 137760 posts
  • Local time: 10:14 AM

Posted 18 April 2018 - 02:33 PM

In the future we'll probably add font size adjustment settings.

#5 Quiks OFFLINE  

Quiks

    Advanced Member

  • Members
  • 71 posts
  • Local time: 06:14 AM

Posted 18 April 2018 - 02:52 PM

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.

#6 Luke OFFLINE  

Luke

    System Architect

  • Administrators
  • 137760 posts
  • Local time: 10:14 AM

Posted 18 April 2018 - 03:13 PM

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.

#7 Quiks OFFLINE  

Quiks

    Advanced Member

  • Members
  • 71 posts
  • Local time: 06:14 AM

Posted 18 April 2018 - 04:43 PM

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, 18 April 2018 - 04:51 PM.


#8 Luke OFFLINE  

Luke

    System Architect

  • Administrators
  • 137760 posts
  • Local time: 10:14 AM

Posted 18 April 2018 - 05:13 PM

In general server settings there is a custom css section.



#9 Quiks OFFLINE  

Quiks

    Advanced Member

  • Members
  • 71 posts
  • Local time: 06:14 AM

Posted 18 April 2018 - 05:20 PM

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, 18 April 2018 - 05:21 PM.


#10 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 15672 posts
  • Local time: 07:14 AM
  • LocationWashington State

Posted 18 April 2018 - 06:43 PM   Best Answer

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;
}


  • Quiks and paul1965 like this

#11 Quiks OFFLINE  

Quiks

    Advanced Member

  • Members
  • 71 posts
  • Local time: 06:14 AM

Posted 18 April 2018 - 07:08 PM

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, 18 April 2018 - 07:09 PM.


#12 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 15672 posts
  • Local time: 07:14 AM
  • LocationWashington State

Posted 18 April 2018 - 07:24 PM

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;
}

  • Quiks likes this

#13 Quiks OFFLINE  

Quiks

    Advanced Member

  • Members
  • 71 posts
  • Local time: 06:14 AM

Posted 18 April 2018 - 07:53 PM

:D

 

You are the best.

 

Thanks a lot!



#14 chyron8472 OFFLINE  

chyron8472

    Advanced Member

  • Members
  • 321 posts
  • Local time: 09:14 AM
  • LocationTulsa, OK

Posted 04 February 2019 - 12:34 PM

.

Edited by chyron8472, 04 February 2019 - 12:52 PM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users