Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable automatic image resizing on background images #19

Open
SwiftWinds opened this issue Oct 24, 2019 · 2 comments · May be fixed by #57
Open

Enable automatic image resizing on background images #19

SwiftWinds opened this issue Oct 24, 2019 · 2 comments · May be fixed by #57
Assignees

Comments

@SwiftWinds
Copy link
Member

SwiftWinds commented Oct 24, 2019

the venue, intro, and about section each have background images (you can search "background: " in style.css to see all of them)

on load, give the image resolution rounded up by 100s
for example, if the container div (basically the width allowed to the image) around an image was 640px wide for a specific screen, I would deliver a 700px image with https://res.cloudinary.com/damnzwekj/image/upload/c_fill,dpr_auto,f_auto,q_auto,w_auto:100:700/v1/TogaHacks/backgrounds/venue-info-bg_jii9qp.jpg

and then on width change, if increase from, say, 640px to 730px, then replace background image with https://res.cloudinary.com/damnzwekj/image/upload/c_fill,dpr_auto,f_auto,q_auto,w_auto:100:800/v1/TogaHacks/backgrounds/venue-info-bg_jii9qp.jpg

if change from, say, 640px to 690px then no deliver new image

also if change from 640px to, say, 200px, no change also, because why deliver a lower res image if u already have a hi-res one?

we can have the class "bg-responsive" on all the elements with the background image, so you can do $(."bg-responsve") to target all of them

@SwiftWinds SwiftWinds created this issue from a note in TogaHacks Website (In progress) Oct 24, 2019
@SwiftWinds
Copy link
Member Author

TLDR: window on ready or width increase, deliver background img with resolution width of element's width rounded up to nearest 100px

@SwiftWinds
Copy link
Member Author

Next steps:

  • resize based on whether width or height is larger
  • take in account of the user's DPR

@SwiftWinds SwiftWinds linked a pull request Nov 12, 2019 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
TogaHacks Website
  
In progress
Development

Successfully merging a pull request may close this issue.

2 participants