Project Thumbnails Max Size + Add Column

[josephking]

Need a max size for the thumbnails so on resize we add a column, let's try 500px

[adrienlo]

This is starting to not make sense. Say our max is 500 px, what should happen if the window size is 2200px?

There really isn't a pure css way of calculating the widths, so this may have to be a custom Javascript widget if we want this to be some resizing thing.

[josephking]

if the size was 2200px, it would be 5 column at 440px width thumbs.

after 2000px it would jump to 5 col, cuz it reached 500ox max thumb size.

[adrienlo]

Don't think we can do this with purely css. We would also need a min width.

[josephking]

Hmm, well I guess the min width could be around 250px, at a point which it sizes down enough to basically replace any 2 col with 1, it'd switch to the max of 500px. hope that makes sense.

[adrienlo]

Pushed this. Probably need to adjust the grid a little bit. There's a white 1 px on the bottom of images because some image heights are 258 and some are 259. Those need to get fixed. It messes up the grid.

[josephking]

ok, i'll adjust the thumbs that are the troublemakers and send em back to you.

On Fri, Dec 6, 2013 at 12:08 PM, Adrien Lo notifications@github.com wrote:

Pushed this. Probably need to adjust the grid a little bit. There's a white 1 px on the bottom of images because some image heights are 258 and some are 259. Those need to get fixed. It messes up the grid.

— Reply to this email directly or view it on GitHubhttps://github.com/FleetwoodFernandez/web/issues/20#issuecomment-30025120 .

[josephking]

I just checked all the thumbnails and they all have a native size of 600x490, I thought you meant there was an issue w/ the source images. Sounds like it's a code issue.

[adrienlo]

For some reason a grid of 5 screws up the heights of the images by 1 pixel. It only goes to 4 columns right now so it doesn't look jacked up while I investigate the 5 col grid.

[josephking]

Still looks like there's major issues. At certain widths, thumbs will be missing (bumped down actually), if you scroll the grid is all messed up. See screenshot:

Also, at around 1230px the 3 col grid jumps to a 4 col when making smaller, it should not do that and just stay at 3. When the browser gets to 1200px, the nav jumps all the way to the bottom of all thumbnails. very weird.

this was one of the major issues so I can't contact client until this is resolved.

[adrienlo]

Yes. As mentioned above, the calculations are affecting the heights of the images by 1 pixel which pushes the grids down.

The actual # of girds we can change to whatever we determine by screen size.

[adrienlo]

So these are the current breakdowns. As noted, they can change to whatever you want.

Screen width: < 250px - 1 col 500 - 2 750 - 3 1000 - 3 1250 - 4 1500 - 3 1750 - 4

[josephking]

that's fine, i'd just change the 1500 to 4.

[adrienlo]

"1200px, the nav jumps all the way to the bottom of all thumbnails", this is the minimum restrictions we added to support smaller screens and mobile. So we moved the footer to the bottom if the screen size is smaller. It's related to this https://github.com/FleetwoodFernandez/web/issues/36#issuecomment-29853135

[adrienlo]

So I"m trying to figure out a solution for the "missing thumbs." They aren't really missing. It's because some images get sized 1 pixel larger in height and it bumps it down to the next row. It only happens when using different images. If I use the same image, the gird lays out correctly with no issues.

See this as a ref. It's using the same image which is why it doesn't break. http://tympanus.net/Blueprints/ResponsiveFullWidthGrid/

[josephking]

Good thing is I'm not getting the 'missing' (bumping down) thumbs any longer. I just see a small 1px space at the bottom of some thumbs at a few browser widths.

[adrienlo]

Pushed update. I think I fixed the grid issue.