Change image sizes

[mdefende]

From a style perspective, most images in our docs completely overwhelm the surrounding text making navigation and comprehension more difficult. Currently, images are either fit to the screen width or render at their native resolution. We should shrink the images that fill the entire screen. We can do this using the style attribute from the attr_list extension which we have enabled. To change the size of an image, it would look like this:

![! alt text ><](image.png){: style="width:100px"} or ![! alt text ><](image.png){: style="width:50%"}

Crucially, this does not change the image size for the lightbox functionality, it will still render at full size, so for people who can't fully see the image directly on the page, they will be able to see it at full resolution in the lightbox.

[jgordini]

Might consider managing this globally from the sylesheet instead of inline. You could leave the reduced size image as a sensible default instead of manually sizing each one.

[wwarriner]

Is it possible to have a maximum image size in the style sheet? So that if its larger than, say 600px wide, scale it down, otherwise leave it alone? For downscaled images we also have the lightgallery going on, so users can click to expand.

[mdefende]

Yeah, setting the width as a % references the width of the screen, not the original width of the image. So the smaller images we have get blown up if we set a global value of X%. But setting an absolute pixel value will behave differently based on screen resolution I believe. So like William said, if there's a way to choose the minimum of either the image size or the X% size, that would be more ideal for a global option, then we can manually change images as necessary

[mdefende]

Also, I've gone through and done it for all of the images in the Cloud section in a pull request I'm going to submit today. We can change it to a global option later if we figure that out.

[jgordini]

Typically you setup media queries for each screen size. then nest your class definitions inside it. Example.

// default .lightbox img { max-width: 100%; }

// desktops @media only screen and (min-width : 992px) { .lightbox img { Max-width:25em; } }

https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile

-- Jeremy Gordinier | Web Designer Information Technology UAB | The University of Alabama at Birmingham P: 205-549-1575 | @.**@.> Pronounshttps://www.uab.edu/dei/institutional-equity/inclusive-language-guide: He, Him, His [A picture containing graphical user interface Description automatically generated]https://www.uab.edu/it/home/

From: mdefende @.> Date: Thursday, April 28, 2022 at 11:59 AM To: uabrc/uabrc.github.io @.> Cc: Gordinier, Jeremy @.>, Comment @.> Subject: Re: [uabrc/uabrc.github.io] Change image sizes (Issue #202)

Yeah, setting the width as a % references the width of the screen, not the original width of the image. So the smaller images we have get blown up if we set a global value of X%. But setting an absolute pixel value will behave differently based on screen resolution I believe. So like William said, if there's a way to choose the minimum of either the image size or the X% size, that would be more ideal for a global option, then we can manually change images as necessary

— Reply to this email directly, view it on GitHubhttps://github.com/uabrc/uabrc.github.io/issues/202#issuecomment-1112444568, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AWETBNAJO4DLCMJGD6GLJY3VHK7WFANCNFSM5UQCS3PQ. You are receiving this because you commented.Message ID: @.***>

[jgordini]

Currently this is being overridden by your inline tag

img[alt$="><"] { display: block; max-width: 100%; height: auto; margin: 1.5rem; float: none!important; }

-- Jeremy Gordinier | Web Designer Information Technology UAB | The University of Alabama at Birmingham P: 205-549-1575 | @.**@.> Pronounshttps://www.uab.edu/dei/institutional-equity/inclusive-language-guide: He, Him, His [A picture containing graphical user interface Description automatically generated]https://www.uab.edu/it/home/

From: Gordinier, Jeremy @.> Date: Thursday, April 28, 2022 at 12:05 PM To: uabrc/uabrc.github.io @.>, uabrc/uabrc.github.io @.> Cc: Comment @.> Subject: Re: [uabrc/uabrc.github.io] Change image sizes (Issue #202) Typically you setup media queries for each screen size. then nest your class definitions inside it. Example.

// default .lightbox img { max-width: 100%; }

// desktops @media only screen and (min-width : 992px) { .lightbox img { Max-width:25em; } }

https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile

-- Jeremy Gordinier | Web Designer Information Technology UAB | The University of Alabama at Birmingham P: 205-549-1575 | @.**@.> Pronounshttps://www.uab.edu/dei/institutional-equity/inclusive-language-guide: He, Him, His [A picture containing graphical user interface Description automatically generated]https://www.uab.edu/it/home/

From: mdefende @.> Date: Thursday, April 28, 2022 at 11:59 AM To: uabrc/uabrc.github.io @.> Cc: Gordinier, Jeremy @.>, Comment @.> Subject: Re: [uabrc/uabrc.github.io] Change image sizes (Issue #202)

Yeah, setting the width as a % references the width of the screen, not the original width of the image. So the smaller images we have get blown up if we set a global value of X%. But setting an absolute pixel value will behave differently based on screen resolution I believe. So like William said, if there's a way to choose the minimum of either the image size or the X% size, that would be more ideal for a global option, then we can manually change images as necessary

— Reply to this email directly, view it on GitHubhttps://github.com/uabrc/uabrc.github.io/issues/202#issuecomment-1112444568, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AWETBNAJO4DLCMJGD6GLJY3VHK7WFANCNFSM5UQCS3PQ. You are receiving this because you commented.Message ID: @.***>

[jgordini]

Let me test this on my fork and I will update this issue.

-- Jeremy Gordinier | Web Designer Information Technology UAB | The University of Alabama at Birmingham P: 205-549-1575 | @.**@.> Pronounshttps://www.uab.edu/dei/institutional-equity/inclusive-language-guide: He, Him, His [A picture containing graphical user interface Description automatically generated]https://www.uab.edu/it/home/

From: Gordinier, Jeremy @.> Date: Thursday, April 28, 2022 at 12:07 PM To: uabrc/uabrc.github.io @.>, uabrc/uabrc.github.io @.> Cc: Comment @.> Subject: Re: [uabrc/uabrc.github.io] Change image sizes (Issue #202) Currently this is being overridden by your inline tag

img[alt$="><"] { display: block; max-width: 100%; height: auto; margin: 1.5rem; float: none!important; }

-- Jeremy Gordinier | Web Designer Information Technology UAB | The University of Alabama at Birmingham P: 205-549-1575 | @.**@.> Pronounshttps://www.uab.edu/dei/institutional-equity/inclusive-language-guide: He, Him, His [A picture containing graphical user interface Description automatically generated]https://www.uab.edu/it/home/

From: Gordinier, Jeremy @.> Date: Thursday, April 28, 2022 at 12:05 PM To: uabrc/uabrc.github.io @.>, uabrc/uabrc.github.io @.> Cc: Comment @.> Subject: Re: [uabrc/uabrc.github.io] Change image sizes (Issue #202) Typically you setup media queries for each screen size. then nest your class definitions inside it. Example.

// default .lightbox img { max-width: 100%; }

// desktops @media only screen and (min-width : 992px) { .lightbox img { Max-width:25em; } }

https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile

-- Jeremy Gordinier | Web Designer Information Technology UAB | The University of Alabama at Birmingham P: 205-549-1575 | @.**@.> Pronounshttps://www.uab.edu/dei/institutional-equity/inclusive-language-guide: He, Him, His [A picture containing graphical user interface Description automatically generated]https://www.uab.edu/it/home/

From: mdefende @.> Date: Thursday, April 28, 2022 at 11:59 AM To: uabrc/uabrc.github.io @.> Cc: Gordinier, Jeremy @.>, Comment @.> Subject: Re: [uabrc/uabrc.github.io] Change image sizes (Issue #202)

Yeah, setting the width as a % references the width of the screen, not the original width of the image. So the smaller images we have get blown up if we set a global value of X%. But setting an absolute pixel value will behave differently based on screen resolution I believe. So like William said, if there's a way to choose the minimum of either the image size or the X% size, that would be more ideal for a global option, then we can manually change images as necessary

— Reply to this email directly, view it on GitHubhttps://github.com/uabrc/uabrc.github.io/issues/202#issuecomment-1112444568, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AWETBNAJO4DLCMJGD6GLJY3VHK7WFANCNFSM5UQCS3PQ. You are receiving this because you commented.Message ID: @.***>

[mdefende]

We only need the inline tag there to easily center the images. I didn't know how to do it but found that hack somewhere on stackoverflow. If you know of a better way to have images automatically center while implementing the sizing changes, that would be great

[jgordini]

Adding the bottom declarations to extra.css and removing img[alt$="><"] should fix it.

This is just for my notes. Will test.

img[alt$="><"] { display: block; max-width: 100%; height: auto; margin: auto; float: none!important; }

// adds a flexbox to the surrounding div div.lightgallery { display: flex; justify-content: center; }

// sizing the images down on desktops @media only screen and (min-width : 992px) { .lightgallery img { width: 75vw } }

//adding the drop shadow and keeping the images at 100 viewport width for smaller screen sizes .lightgallery img { width: 100vw; box-shadow: 5px 5px 13px rgba(0, 0, 0, 0.08); }

-- Jeremy Gordinier | Web Designer Information Technology UAB | The University of Alabama at Birmingham P: 205-549-1575 | @.**@.> Pronounshttps://www.uab.edu/dei/institutional-equity/inclusive-language-guide: He, Him, His [A picture containing graphical user interface Description automatically generated]https://www.uab.edu/it/home/

From: mdefende @.> Date: Friday, April 29, 2022 at 11:20 AM To: uabrc/uabrc.github.io @.> Cc: Gordinier, Jeremy @.>, Comment @.> Subject: Re: [uabrc/uabrc.github.io] Change image sizes (Issue #202)

We only need the inline tag there to easily center the images. I didn't know how to do it but found that hack somewhere on stackoverflow. If you know of a better way to have images automatically center while implementing the sizing changes, that would be great

— Reply to this email directly, view it on GitHubhttps://github.com/uabrc/uabrc.github.io/issues/202#issuecomment-1113496636, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AWETBNBPFPR73ISCQCS2NZTVHQD2ZANCNFSM5UQCS3PQ. You are receiving this because you commented.Message ID: @.***>

[jgordini]

I have added the drop shadow, mobile color fix and image sizing to my fork. You can see it in action here.

https://jgordini.github.io/uabrc.github.io/uab_cloud/network_setup_basic/

If this is acceptable I will make a pull request.

[mdefende]

This looks great! Thank you a ton for working on it!

[jgordini]

Absolutely. It does remove the >< centering option and just centers everything by default. Because of CSS specificty it is difficult to implement both workflows. I may be able to do this but it would take a bit of time to figure out I think. I can push the changes for now and see if I can find an alternative solution.

[mdefende]

Hey @jgordini is there a way to change this to where smaller images are printed at their native resolution? All of the images are being printed at the same size which is great for some of the very large images, but not for the smaller ones. We can manually change them using the tags from above when necessary, but I was just wondering if there was an easier way to implement it in CSS

[jgordini]

I think so. Let me look into it.

Get Outlook for Androidhttps://aka.ms/AAb9ysg

---

From: mdefende @.> Sent: Tuesday, May 3, 2022 9:33:49 AM To: uabrc/uabrc.github.io @.> Cc: Gordinier, Jeremy @.>; Mention @.> Subject: Re: [uabrc/uabrc.github.io] Change image sizes (Issue #202)

Hey @jgordinihttps://github.com/jgordini is there a way to change this to where smaller images are printed at their native resolution? All of the images are being printed at the same size which is great for some of the very large images, but not for the smaller ones. We can manually change them using the tags from above when necessary, but I was just wondering if there was an easier way to implement it in CSS

[image]https://user-images.githubusercontent.com/20781527/166473659-8e5d047e-b847-4ccc-b6be-a1800b0d2231.png

— Reply to this email directly, view it on GitHubhttps://github.com/uabrc/uabrc.github.io/issues/202#issuecomment-1116173211, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AWETBNFPSDANQJZ3M2567RDVIE2M3ANCNFSM5UQCS3PQ. You are receiving this because you were mentioned.Message ID: @.***>

[jgordini]

had width instead of max-width in there. should be working now.

you can see the update here.

https://jgordini.github.io/uabrc.github.io/data_management/transfer/globus/

Old version https://uabrc.github.io/data_management/transfer/globus/

if ok will push.

[mdefende]

Bless, this is wonderful. Looks good to me