#267 Slider images need a lot more preparation #273

Closed treasuretron closed 4 years ago

In GitLab by @richbodo on Oct 15, 2018, 15:49

The slider images need a lot of work before they are ready for the slider. Just like on the EHF site, the slider images need to be chosen to put the center of focus in an appropriate position - see: https://gitlab.com/spacebase/spacebase/wikis/Adding-a-Slide-to-the-Slider

Em noted: The Challenge photo is cut off on top:

Screenshot_2018-10-12_15.20.20

In GitLab by @starshyyne on Nov 4, 2018, 21:21

I'm looking into this now

In GitLab by @starshyyne on Nov 4, 2018, 21:22

assigned to @starshyyne

In GitLab by @starshyyne on Nov 4, 2018, 22:57

Hi @richbodo I've had a look at the issue and feel I've got a good grasp of the problem. Currently the problem has a few different parts:

It's too difficult to add slides, as it requires using a photoshop template
The slider often crops off the top part of the images which are important, like faces
The slider images don't scale well across different sized screens, like mobile and desktop

I've found a couple causes to these problems:

The slideshow was hard-coded to always show the bottom right most part of the image at all times
The image upload field is too restricted, only allowing images at a specific size to be added

I've added a few new modules and done some initial fixes on this branch: https://new-modules-oly7s2q-ensz4qdpjmziw.us.platform.sh/ which you can see does make some progress on the problems, please take a look.

Perhaps we can merge this work into master as a quick-fix. There's still more that I could do, to make it easier to add photos, and have them work better across different screen sizes. For example, I could add the photo manipulation that happens in the template file onto the site itself. That way you wouldn't have to use the template at all, and instead upload any image you like, and the site would do the rest, making it the correct size, and adding a shadow to ensure text is legible.

Let me know what you think.

In GitLab by @richbodo on Nov 6, 2018, 17:09

Hey, Laura! That does look a lot better! :)

It is certainly nice to be able to upload images of different sizes, so removing that restriction is good, too.

I think cropping and scaling issues are the highest priority, as they affect the look of the site significantly. Difficulty level of adding slides is less important - we can do a little work adding slides as it's not a common thing, and we absolutely love to learn new skills, if the docs are good. But...we do need to update the docs if we adopt this new slider configuration.

I think we should merge your changes as a quick-fix!

So, three things to talk about that might be handled well in a brief video call instead of in this thread (feel free to suggest a time):

1) Regarding the ability to: "add the photo manipulation that happens in the template file onto the site itself" - I assume that would be something that happens in the admin interface one time per image upload? What is your estimate on that feature?

2) Regarding improving image scaling across mobile and desktop: We definitely want our site to be as reactive as possible and as functional as possible on mobile. Any issues with the site not being reactive should be addressed as high priority issues. I will make an issue for this and assign it to you.

3) Regarding the overall look and feel of the slider feature: It seems to me that the slider does not work particularly well with the transparent menu at the top of the screen. We would not have heads cut off if the slider sat below that menu, and I can't see any advantage to the transparency in the menu. In your personal professional opinion, do you think it would be better to force the slider to sit below that top bar menu? Or is there another solution that you would recommend?

I'll also note, although this might not be the best place to do it, that we had a few discussions of rebuilding the nav and updating the map functionality, but it probably be good to go over that design thinking with you before we start assigning that kind of work: https://gitlab.com/spacebase/spacebase/wikis/UI/UX-Redesigns

In GitLab by @starshyyne on Nov 7, 2018, 18:38

Hi @richbodo thanks for your response. Happy to have a video chat to discuss this, I'm not sure what time zone you're in at the moment, but I could Friday (tomorrow) between 3-5pm NZT or pretty much any day/time next next week 11am-5pm NZT.

For 1 - yes, we can do this manipulation on the server with the module image effects and it would take an hour or two to setup. I use this module on lots of sites, very handy.

For 2 - with the new modules I've added we can optimise different images to serve different screen sizes, where you can specify which part of the image is most important, and it will crop the image accordingly. It would take another hour or two to setup and test this.

3 - I think you've hit the nail on the head with the transparent menu blocking off the images, we can adjust the menu for the frontpage only to show the entire image instead. 1 hour at most to make this change.

In GitLab by @richbodo on Nov 7, 2018, 21:00

Laura, I don't want to step on Toms toes if he has other priorities, but those are all very reasonable estimates for upgrading this slider - seems like it would be about a days worth of work, spread out over however many days you need - I approve of this as a priority for UI improvement.

Send me a calendar invite for next week and I'll hop on the call. Thank you!

In GitLab by @starshyyne on Nov 12, 2018, 22:55

Hi @richbodo thanks for that, I've invited you to a google hangout on Thursday 12pm NZT - about 3pm Wednesday California time if I've gotten that right. You should have received an email. I can do another time that afternoon, or the next day, if it doesn't suit. Cheers!

In GitLab by @thomasmurphy on Nov 12, 2018, 23:39

@richbodo we can have Laura working on front end issues in parallel without holding up other issues, so all good with me. Laura and I are opposite each other in Wellington so we're always on the same page on projects :)

In GitLab by @richbodo on Nov 13, 2018, 15:05

Sweet. TTYS Laura.

In GitLab by @starshyyne on Nov 14, 2018, 18:17

The work left to do:

[x] Setup image manipulation to happen server side to replace this image (image styles)
[ ] Have 2 image styles for mobile and desktop with Focus Crop
[x] Have the menu sit above the slideshow, rather than layered on top of
[ ] Update documentation to reflect new workflow once deployed

In GitLab by @thomasmurphy on Dec 4, 2018, 18:39

changed title from Slider images need a lot more preparation to {+#267 +}Slider images need a lot more preparation

In GitLab by @thomasmurphy on Dec 4, 2018, 18:40

@starshyyne it looks like you're working on this on the "new-modules" branch? If so, could you rename that branch to "267 Slider images" to make it more obvious?

In GitLab by @thomasmurphy on Dec 12, 2018, 23:47

mentioned in merge request !249

In GitLab by @thomasmurphy on Dec 12, 2018, 23:58

mentioned in commit 094dab2d75ce03b509d46c666899f756278f36ca

In GitLab by @epaatdahlstrom on Dec 14, 2018, 19:13

It looks like the sliders images look way better on the dev site now. Can I ask when it will be pushed to prod? It would be great to have that new version before I send out the claim email to orgs. Thanks.

In GitLab by @thomasmurphy on Dec 16, 2018, 22:26

@epaatdahlstrom this is on the live site now.

In GitLab by @thomasmurphy on Dec 16, 2018, 22:26

closed

In GitLab by @epaatdahlstrom on Dec 16, 2018, 22:45

Great, thank you!

In GitLab by @thomasmurphy on Dec 16, 2018, 23:10

@epaatdahlstrom this new version will resize the photo and make different varieties with different focus points for different devices, so should be a lot more fun to use :)

In GitLab by @epaatdahlstrom on Dec 17, 2018, 14:57

Awesome!

In GitLab by @thomasmurphy on Feb 21, 2019, 22:38

@starshyyne this is the issue for the work that got lost on a merge somewhere. I will reopen.

In GitLab by @thomasmurphy on Feb 21, 2019, 22:38

reopened

In GitLab by @thomasmurphy on Mar 6, 2019, 21:42

mentioned in merge request !278

In GitLab by @thomasmurphy on Mar 6, 2019, 22:50

closed via merge request !278

In GitLab by @thomasmurphy on Mar 6, 2019, 22:50

mentioned in commit 282f04b51955bda066a5469c1ad88dc7a771ff59

spacebase / spacebasenz

#267 Slider images need a lot more preparation #273