GBKS/Wookmark-jQuery — Issue #5: Overlapping of images
Author: jefflam
Created: 2012-02-19 13:37:47+00:00
State: open

Hello!

First off, I want to thank you for this GREAT plugin. Definitely a very awesome plugin and saved me a lot of time and effort, etc (Plus it seems much easier to setup than Masonry).

Anyways, I kinda believe I know the "issue" that I'm bringing up and it is something that has to do with one of your the other issues posted here.

Basically, I have a page where users can add content (images, name for image, etc) sorta like Pinterest onto a site, where it will then be organized based on your script.

(Quick backstory: I developed it using Rails 3.2, picture upload is handled via Carrierwave gem)

As the picture could either be uploaded as a portrait or a landscape, I utilized a nifty command from Carrierwave/Minimagick to resize the picture to fit a certain height and width.

As placing these pictures with the order using wookmark is more concerned with the width, I fixed the width and can't fix the height (as the portrait will look longer than landscape, and if I were to fix a height landscape pictures would cause a gap below it).

Now when I view the page with a mix of portrait and landscape pictures, the pictures on the '2nd row' actually overlaps the top row. When I resize the browser though, the pictures are sorted nicely.

I understand this issue is probably due to there being a lack of declared height on the pictures, and hence the plugin can't 'calculate' it yet upon load (even if the pictures are cached). I would like to however ask if you know any good workaround to maybe 'reactivate' the plugin or something when all pictures are loaded? Right now I'm not sure how to work around this issue and it's of course not user-friendly to ask the user to resize his/her browser everytime he load a new page...

Thanks for any potential help!