Plots2: header images are different heights

[Be-ing]

Please describe the problem (or idea)

What happened just before the problem occurred? Or what problem could this idea solve?

The content on the PublicLab homepage moves as the header images are cycled because they are not all the same height.

What did you expect to see that you didn't?

I expected the content below the header images to remain in place. Instead it moves up and down as I read it.

Please show us where to look

https://publiclab.org/

What's your PublicLab.org username?

none

This can help us diagnose the issue:

Scroll below the top image on the front page and wait.

Browser, version, and operating system

Firefox 59.0.2 on Fedora 27

[waqargithub]

I am looking to work on my first open-source contribution. I think this would be a suitable fto candidate. If you all agree then I can take this one.

Waqar

[waqargithub]

I thought it might be a JavaScript/HTML/CSS matter but it seems that the HTML/CSS is generated by the Ruby code below:

plots2/app/views/home/home.html.erb:

<% cache('feature_home-carousel', skip_digest: true) do %>
  <%= feature("home-carousel") %>
<% end %>

Using Chrome Developer tools I was able to track down the generated HTML (with inline CSS) and see that the image height ranges between 178 px to 216 px. Some possible remedies are:

1. See if we can tweak the code that generates the HTML or CSS to clip the images.

2. The image files could be resized/cropped to have the same height.

Waqar

[pdurbin]

@Be-ing thanks for opening this issue. I was about to create one myself because I find it very strange how the text on the Public Lab homepage moves up and down while you're trying to read it because of how the images at the top are different sizes. I made a little video (sped up quite a bit) to demonstrate the problem:

(For the hackers, with this: ffmpeg -i original.mov -filter:v "setpts=0.04*PTS" -loop 20 -pix_fmt rgb24 output.gif)

It's an especially strange user experience when you scroll down and notice that the text is moving up and down while you're trying to read it. At first I didn't realize why but then I scrolled back up and saw that the images at the top of the page were the culprit.

I agree with option 2 from @waqargithub for now. Let's just crop the images to be all the same height. There are only a handful of them.

[grvsachdeva]

hi @waqargithub @pdurbin, agree with you guys to fix the size of the image container.
@publiclab/community-reps what do you think about the idea? Thanks, @Be-ing for opening the issue.

[sukhbir-singh]

In my opinion, the most important thing here is to fix the height of div having class="slick-list draggable", which is presently changing its height according to the image.

I did some google for this and finds two open source libraries useful "ResponsiveSlides.js" or "lightSlider".

ResponsiveSlides.js:-
Demo link: http://responsiveslides.com/
Github link: https://github.com/viljamis/ResponsiveSlides.js

lightSlider:-
Demo link: http://sachinchoolur.github.io/lightslider/
Github link: https://github.com/sachinchoolur/lightslider

[waqargithub]

I do think cropping or resizing the images is the simplest fix since it requires no change to code and there are only 4 images.

Changing the code to control the size of the div might be the more resilient fix since it would avoid any change in behavior if new images are added in the future.

I am seeing support for both ideas but it seems there is more support for resizing the div. I am checking for explicit agreement about which option to take.

Either way, I am happy to tackle this problem. If we go the route of changing code, is there an individual from the project I can work with for any questions?

Waqar

[patcon]

Seems we use the Slick carousel, which already has a way to turn this on-off during carousel instance initiative, using adaptiveHeight. Example here: http://kenwheeler.github.io/slick/

But the code for the carousel itself seems to be in the database as a "feature". I'm not totally familiar with the plots2 codebase, but maybe on the way to addressing this, we could move some of the carousel code into the codebase, so that it's possible to scrutinize and be adjusted by folks outside website admin team? :)

But yeah, I think this is an easy fix (assuming adaptiveHeight: false helps choose a good minimum height), that can currently only be done by a PL admin.

[jywarren]

Great work here, many thanks! I found the options for the slideshow when
used together were a bit buggy, so disabled fixed height to get it working.
But maybe more fiddling could help. I agree though that just making all
images same height is an easy fix! If anyone wants to upload them here or
to http://publiclab.org/sandbox I can update the URLs, thanks a LOT!!

On Sat, Apr 14, 2018, 3:39 PM Patrick Connolly [e-mail]
wrote:

Seems we use the Slick carousel, which already has a way to turn this
on-off during carousel instance initiative, using adaptiveHeight. Example
here: http://kenwheeler.github.io/slick/

But the code for the carousel itself seems to be in the database as a
"feature"
https://github.com/publiclab/plots2/blob/master/doc/DATA_MODEL.md#features.
I'm not totally familiar with the plots2 codebase, but maybe on the way to
addressing this, we could move some of the carousel code into the codebase,
so that it's possible to scrutinize and be adjusted by folks other than
website admins? :)

But yeah, I think this is an easy fix (assuming adaptiveHeight: false
helps choose a good minimum height), that can currently only be done by a
PL admin.

—
You are receiving this because you are on a team that was mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/2597#issuecomment-381354944,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ7AH2cXXAc58bMjNzp7I1uIKRCJfks5tolBEgaJpZM4TL5Ws
.

[waqargithub]

I can make the images the same height so that we'll have an immediate and simple fix. If we want to make a change to the code eventually then that option still could happen in the future.

[jywarren]

that sound fantastic, thank you!!

On Sun, Apr 15, 2018 at 4:44 AM, waqargithub [e-mail]
wrote:

I can make the images the same height so that we'll have an immediate and
simple fix. If we want to make a change to the code eventually then that
option still could happen in the future.

—
You are receiving this because you are on a team that was mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/2597#issuecomment-381390299,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ0WqOLFH-LYDTry8rSpJhwa7zPEYks5towhngaJpZM4TL5Ws
.

[waqargithub]

I have resized the 5 images so that they all have the same dimensions.

My original plan was to find them in code, modify them, and then submit them via a PR.

I was not able to find the images in the code. I wondered if they are kept in a database and so simply downloaded them from the website. I have attached the cropped/resized images to this post. Please let me know if it is possible to submit them via a PR and if that is preferred.

How is the responsive presentation of images done and will these suffice? Since I have cropped the original images, it is possible that these new images might throw off the responsive presentation of them. Let me know if that is the case.

Waqar

[jywarren]

This is PERFECT!

These are indeed stored outside the codebase, for various reasons. I'm going to upload them now (they're managed in the Features system -- see https://github.com/publiclab/plots2/blob/master/doc/DATA_MODEL.md#features)

OK, this is looking good, however, I want to note that at original resolution these are quite large... 700-1300kb. I've posted them at their "scaled down" sizes as our image uploader will do, but they're not super crisp. I wonder if there's an optimal in-between size, of around 1200 px wide -- I'm sorry to ask one more thing, but do you think you could try for that, as a good compromise size?

THANK YOU!!! 🙌

[waqargithub]

Sure, no problem. I have attached a new set of images resized to 1200 px wide. They are all 231 kB or less.

Waqar

[jywarren]

Perfect! Uploaded and complete. Thanks everyone for your help with this!!!