Freewall and SEO?

[Lisa-Williams]

@kombai : Thanks for this great JavaScript.

All layouts in the examples are generated from JavaScript.
There is no content/image markup in the requested page.
Which makes me believe that the content/images will not be indexed by search engines.

Is there a way to let the Freewall JavaScript work on a <ul></ul> or <div></div> filled with <img> elements, or <a><img></a> elements?

[kombai]

Hello Lisa,
it is ok, feel free to do that.
Thanks

[Lisa-Williams]

Hi @kombai / Minh,
In the end I got it working on a page with 18 images (a portfolio page). Thanks!
Had to get the framework I'm using, and Freewall play nice together. ;)

But one setting is not working for me : gutterY.
Up to and including a value of 20, gutterY does what it is supposed to do. Any value from 21 up to and including 212 doesn't change the horizontal gutter between the images.
from 213 and up I all of a sudden get this mega horizontal gutter.

Also with gutterY = 213 and gutterX = 20 the number of rows doubles????? :

<div id="freewall" class="free-wall"
 data-min-width="1280" data-total-col="6" data-total-row="6"
 data-wall-width="1190" data-wall-height="997"
 style="position: relative; height: 997px;">

But with gutterY = 20 and gutterX = 20 everything looks fine :

<div id="freewall" class="free-wall"
 data-min-width="1280" data-total-col="6" data-total-row="3"
 data-wall-width="1190" data-wall-height="585"
 style="position: relative; height: 585px;">

Because there is an image caption (title and brief description) right below each image.
What I tried and wanted to specify, was 70/80 for gutterY to let the next row start below the image caption. And 20 for gutterX.
gutterX is doing exactly what it is supposed to do.

[kombai]

Hello Lisa,
Could you show the your setting with freewall ? some think same that:

wall.reset({

....
});

or great if you can provide the test link
example: http://jsfiddle.net/level39/eVb8g/

Best

[Lisa-Williams]

Hi @kombai,
I uploaded to JSbin instead. It is here : http://jsbin.com/ticak/1
I removed quite a few things because I didn't want to publish the complete portfolio building block.
And they were not relevant to the issue anyway. The portfolio filter button is not updating the button to display the type of content yet. But it is filtering the portfolio. I had to swap the framework's filter component for Freewall's. Not finished yet.

Anyway, with or without meta info below each image, the gutterY problem remains.
You can remove the meta info below the images, by removing the static-meta class from the section element with class portfolio-standard.

I also found out that I specified the wrong cellH value.
Because the images are square, I specified 182 for both cellW and cellH.
But I should have specified 251 for cellH (so that the caption below the image doesn't get obscured.) And then I don't need to fiddle with gutterY at all.

Thanks for your help so far.

UPDATE:
When I specify :
cellW: 182,
cellH: 199, // Or higher.
gutterX: 20,
gutterY: 20,

I see this in Chrome Developertools :

<div id="freewall" class="free-wall"
 data-min-width="1280" data-total-col="0" data-total-row="0" data-wall-width="0"
 data-wall-height="0" style="position: relative; height: 0px;">

This also happens, when I specify :
cellW: 182,
cellH: 182,
gutterX: 20,
gutterY: 0,

It's probably something in the framework that knocks off the freewall JS.
If you think/suspect that's the case just leave it and I will try to hunt it down in the framework myself.
A Freewall block (selector: 'article') should be: 182px x 251px (WxH).

[kombai]

Thank you for the demo link, it verry nice.
That is my screen with your setting, I think it is ok.

you can try to set cellH: 'auto'

[Lisa-Williams]

There is too much whitespace between the rows.
It should look like this. (This is how it looks like without Freewall) :

[Lisa-Williams]

In the screenshot which you posted, you specified gutterY: 0. which also causes this mega whitespace which normally is not there.

I tried with cellH: 'auto' as you suggested.
But that doesn't change anything, from specifying cellH: 182.
It looks like Freewall is sidetracked by something, and therefore miscalculates the absolute Y positions.

This is what I see with cellW: 182 and cellH: 'auto' :

[Lisa-Williams]

UPDATE:
My last posted screenshot right above. The one with cellH: 'auto'.
It's a browser resizing/painting issue.

After the initial page request (or Ctrl+F5), it looks like above.
But when I resize the browser window by even 1 pixel, or press F11 to go full screen, or use the portfolio filter, everything lines up correctly (like in the screenshot with the girls). Animated and all.
But only when cellH: 'auto' with gutterY: 0 is specified. Resizing doesn't "fix" the layout when a number instead of cellH: 'auto' is specified.
And gutterY: 0 produces the huge whitespace gutter when a number is specified in cellH.

It happens in Chrome and Firefox, both on Linux and Windows. Chrome on Android 4.4 also gets it wrong.
It's OK in Opera 12.16 on Linux and Windows. Even IE9 on Windows 7 gets it right.

I'm going to test with another notebook (because it has a completely different graphics card) tomorrow.

Is there a resize handler I can trigger right after binding to the freewall container ?
I already tried calling wall.refresh(); or wall.unFilter(); right after and before wall.fitWidth(); but that doesn't fix the painting issue.

[kombai]

Hello,
you can see the demo here:
http://vnjs.net/www/project/freewall/example/pinterest-layout.html

var wall = new freewall("#freewall");
            wall.reset({
                selector: '.brick',
                animate: true,
                cellW: 200,
                cellH: 'auto',
                onResize: function() {
                    wall.fitWidth();
                }
            });

            wall.container.find('.brick img').load(function() {
                wall.fitWidth();
            });

[Lisa-Williams]

Hi @kombai,

I had seen that demo before.
The issue with (re)paint/resize remains in Chrome and Firefox, and not in Opera and IE.
I'm calling it a day for now. I don't have the feeling that I'm in control with Freewall at the moment.
I will keep trying every now and then, and setup the HTML differently to get a different flow.
Or drop the framework I'm using on the portfolio pages.
I definitely want to use Freewall in the future, because it is great.

Thanks for your help.

[kombai]

I'm sorry to hear you can't control Freewall. Keep your mind refesh, and maybe just add border style for the tag "article", then you will know how Freewall works.
Good luck :)