Rescale pictures so they aren't so large

[KirstieJane]

At the moment our lovely search_database code can re-size the role models' pictures for the main page but not when individual role models are clicked for a more detailed view.

I've tried in vain to change the width of the picture on line but it doesn't seem to work!

Here's the part of stylesheets/style.less that contains the css to format the main page.

Here's the part of stylesheets/style.less that I think contains the css to format the picture on the detailed pop up (But I can't seem to change the appearance so I might be wrong!)

Here's the part of js/app.js that mentions the speaker-photo we want to show.

Any suggestions on how to resize the picture so it's a fixed width on the detailed card would be super helpful!

[KirstieJane]

Hi @auremoser and @acabunoc - this is where I'm stuck now if you have any time today to fork the repo and see why I can't change the pictures! THANK YOU!

[KirstieJane]

Hi @geminiimatt and @bmpvieira - thank you for starring the repo!

If either of you have any time too look at this issue I'd LOVE to know the answer - it's been driving me crazy all morning 😄

[abbycabs]

You can probably use max-width to scale
https://developer.mozilla.org/en/docs/Web/CSS/max-width
On Wed, Oct 12, 2016 at 8:52 AM Kirstie Whitaker notifications@github.com
wrote:

Hi @geminiimatt https://github.com/geminiimatt and @bmpvieira
https://github.com/bmpvieira - thank you for starring the repo!

If either of you have any time too look at this issue I'd LOVE to know the
answer - it's been driving me crazy all morning 😄

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#98 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAluCraOJyC0YcDGaGFecuWou1b5-hYoks5qzNgegaJpZM4KUmCe
.

[abbycabs]

You can add max-width:100% to the image. I can send over a PR later if you need it!

[Ryuno-Ki]

Either of those snippets will work on the img:

img.scale-width {
  display: block; /* needed for styling height & width */
  max-height: 100%; /* don't expand over parent container */
  width: auto; /* keep aspect ratio */
}

or

img.scale-height {
  display: block; /* needed for styling height & width */
  height: auto; /* keep aspect ratio */
  max-width: 100%; /* don't expand over parent container */
}

Just add scale-height or scale-width to the <img> tag in HTML then. Text between /* and */ are CSS comments and will be ignored by the web browser. I've added explanation for the rules in there. You may want to omit them in production to reduce file size and hence save bandwidth.

[Ryuno-Ki]

Umm. You need to add them to the class attribute of <img>.

[KirstieJane]

Awesome @acabunoc - I'm glad it is that easy to fix!

I've tried putting max-width: 100% in a bunch of different places and I haven't been at all successful! If you - or anyone else - can let me know where to add max-width:100% or one of @Ryuno-Ki's suggestions that would be amazing 😄

[KirstieJane]

(additionally - I can't add screenshots to my comments 😢. @acabunoc do you happen to know if that's a windows oddity, or should I ping the github helpdesk and see what they say?)

THANK YOU!

[abbycabs]

you should be able to drag & drop? maybe try another browser?

Sent a PR!

[KirstieJane]

YEAAAAAH - gonna check out the PR now.

I've tried in two different browsers - I'll have a bit more of a read around tonight - not a huge deal 😄

[abbycabs]

I did zero testing, so please review!

[KirstieJane]

Yes! Works.

[Ryuno-Ki]

@KirstieJane "Attach files by dragging & dropping or selecting them." in a comment does nothing? See at the bottom of the comment input field.

Not even show up a "Open file" window? In that case, inform GitHub helpdesk.

[KirstieJane]

Thanks @Ryuno-Ki - it's working today. I think maybe my laptop just needed to have a rest overnight ;)