-
-
Notifications
You must be signed in to change notification settings - Fork 766
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
Update Project Profile: Undebate #255
Comments
@harishlingam The instructions say that the banner image should be 16:9 but the example you show is 10:1 (1298x129) . Can you clarify what you are looking for? Is it to replace what's on the hackforla site now, or is it for a new use? When you say "update the fields" I'm not sure how, but I think you mean by leaving a comment here. If something else, please let me know. For tools, please add "Figma" |
Hi @ddfridley, 1) please provide all requested information as a comment on this page, as you've already started to do. 2) We've just updated our issue card to specify dimensions for the banner image. Please let me know if you have any other questions! |
@ddfridley do you have an updated image for our hero?
|
@ddfridley How about something like this... but with different peoples pictures, not the same ones repeated. |
slacked @ddfridley asking for update. |
Click here to see our work in progress for your project's homepage at hackforla's website: undebate See how in this screen shot, the word undebate is appearing over the hero image. If we used the image above it would just be a mishmash of text over the "why are you running for office" + the navigation buttons. |
to discuss with david. PR 318 is the one that changed the image. We can't revert because it has other things tied to it (the id). But we can overwrite back. |
@ExperimentsInHonesty As requested, here is a comparison of the 2 hero images |
@KianBadie can you show us what those two images look like on mobile? #255 (comment) |
@ExperimentsInHonesty sorry for replying so late Bonnie. I forgot about this and was reminded while looking at issues assigned to me. Also sorry, this post will be long because I am going to post screenshots for different screen sizes iPhone5iPhoneXPixel 2 XLAlso, my previous comment of the desktop views had darker tints to them (I don't know if this happens in the process of screenshotting and uploading to GitHub), but I'll upload them again in hopes that they appear more accurately: |
Thanks for the feedback, yeah that's something we can talk about and consider. I'll look more into it tomorrow :) |
So I did some experimenting, and here are the questions and thoughts I had:
Example: iPhone 5 vs Pixel 2XLWith your mobile rules:
With current rules:Applying the rules past mobile
Would like to hear your thoughts @ddfridley. Again, thanks for the feedback! I think these are good ideas. |
min-height: 33vh
But I see that there's no way to please every display. Either you crop
the sides, or you crop top/bottom with the way it is currently
You could use @media (orientation: landscape) and @media (orientation:
portrait) to make things different for the different layouts (and use vw
and vh to specify sizes) but I don't know how much trouble that is, and
how valuable this is vs other features.
…On 4/4/2020 1:28 PM, Kian Badie wrote:
So I did some experimenting, and here are the questions and thoughts I
had:
* So basically, from what I understood, you are saying on mobile the
hero image takes up more space than it merits. With the styling
rules you suggested, the hero image would be much shorter, but
still show the hero image with much less cropping or zooming in
(at least that's how it appears when I did it). While before, the
hero images would keep the same height, but in order to compensate
the image would be cropped/zoomed much more on mobile.
* As you said, it is nice that the image changes correctly depending
on the screen size (with minimal cropping/zooming on different
screen sizes), while on the original the cropping/zooming of the
image changes depending on the screen size.
Example: iPhone 5 vs Pixel 2XL
With your mobile rules:
Screenshot from 2020-04-04 13-06-10
<https://user-images.githubusercontent.com/18221058/78460378-31625300-7675-11ea-80b5-88760788ec40.png>
(Ignore the white line in between the hero and the content, that can
be removed)
Screenshot from 2020-04-04 13-06-19
<https://user-images.githubusercontent.com/18221058/78460379-31fae980-7675-11ea-8f1c-1232056f3b9b.png>
With current rules:
Screenshot from 2020-04-04 13-07-29
<https://user-images.githubusercontent.com/18221058/78460390-4a6b0400-7675-11ea-9d29-b502dade4401.png>
Screenshot from 2020-04-04 13-07-36
<https://user-images.githubusercontent.com/18221058/78460392-4b039a80-7675-11ea-8f56-c58f9ee7a7d2.png>
Applying the rules past mobile
* From my understanding of the last comment, you would want these
rules not just for mobile breakpoints. If I integrated that
correctly, it does indeed look like the second screenshot you posted
(again, you can ignore the white line in between the nav bar and
the image because that's not dependent on what we are talking about)
Screenshot from 2020-04-04 13-15-58
<https://user-images.githubusercontent.com/18221058/78460539-85ba0280-7676-11ea-947a-bc81744cc0ae.png>
* One thing I noticed is that in both my screenshot and yours, the
image is cropped and zoomed in. This does not affect yours too
much, since it still captures the people talking well. But for
others it might have more affects. One I can think of is the New
Schools Today image, where the image is a group photo. With the
rules, you see less people with the crop/zooming in. Other images
though it might not matter (for example: VRMS has the city skyline
and Public Tree map has the image of the map. Depending on how you
feel, the zooming in might not be too big of a deal)
Screenshot from 2020-04-04 13-25-42
<https://user-images.githubusercontent.com/18221058/78460703-e39b1a00-7677-11ea-871b-dca210d3bbba.png>
Screenshot from 2020-04-04 13-25-52
<https://user-images.githubusercontent.com/18221058/78460704-e4cc4700-7677-11ea-9556-35406d69234c.png>
Screenshot from 2020-04-04 13-26-06
<https://user-images.githubusercontent.com/18221058/78460705-e4cc4700-7677-11ea-9dda-022498796bc7.png>
Would like to hear your thoughts @ddfridley
<https://github.com/ddfridley>. Again, thanks for the feedback! I
think these are good ideas.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#255 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAZJ534255TBHXEGXO4MGTTRK6J6HANCNFSM4KDRJDKA>.
|
@KianBadie I just got a change to read through this fully. Do you know what David means by @media orientation landscape and portrait, in terms of code? |
@ExperimentsInHonesty to setup a zoom meeting with @cnk , @KianBadie & @leonelRos with @ddfridley |
Put this on hold, this week. Trying to schedule for this week. Sent message on slack this morning. Please add your schedule in the thread. |
So me @leonelRos and @ddfridley had our meeting on Tuesday and here are some points we discussed. Let me know if I missed anything:
Initial improvements:
I was going to fiddle around with this by adding an actual image element to the header rather than have it be in the "background-image" property. I stopped fiddling with it to wait until we discuss it as a group and create an actual issue out of it. @ddfridley I would say the overall goal of the discussion/new issue was to minimize the amount of cropping and display the banner images better. I'm not too sure how to boil it down into something more specific, can you think of anything? |
@KianBadie to make new issue and mention this issue #255 in it, and close this issue with a link to the new issue. |
Link to new issues that @ExperimentsInHonesty mentioned above: #510 |
Overview
Update the following fields for your project. These updated fields will then be updated to be shown on the website.
Action Items
Provide in the comments below:
Resources/Instructions
See the hero image on the hackforla.org homepage.
The text was updated successfully, but these errors were encountered: