Masonry/results page tweaks

[mialondon]

• Items still seem to be aligning themselves in columns, and one column (LHS) is always a lot longer than the other. Not sure if it's a CSS fix, a python row logic fix or both.
• The layout is different on page load (often 'broken' - i.e. items overlapping) but sorts itself on resize, zoom and/or focus. Can we make it look great immediately on loading?
• Opera layout error
• Fix alt tag on img
• Card display: can we make cards flip as originally envisioned? (I'm trying!)

@amandavisconti now that we're not insanely busy, tell us whose help/what kind of skills you need on this with you!

[mialondon]

Doh, I've just looked in Opera (Mac) and it looks like the default image isn't displaying? For some reason anyway some titles are running their full width and throwing things out. Screenshot attached.

[mialondon]

There's also something odd with the alt text - you can spot it as the results load. The longest I've seen is pasted below but the quality is generally variable so perhaps we should make it generic or alt=" "?

[scottkleinman]

Based on the screen shot, it looks like an Opera incompatibility with
Isotope. This page http://isotope.metafizzy.co/docs/help.html lists a
couple of incompatibilities.

The workaround for the overlapping images which then move into columns may
be the imagesLoaded plugin listed on the same page.

On 6 August 2013 17:10, Mia [email protected] wrote:

There's also something odd with the alt text - you can spot it as the
results load. The longest I've seen is pasted below but the quality is
generally variable so perhaps we should make it generic or alt=" "?

[image: Geo. M. Saville. Alias Lord Ashburton. Alias H. Percy. @ W.J.
Hadley. @ C. Bertrand. @ Big Griff. Arr. San Francisco. Chg. Forgery.
December 24, 1878. He posed as an Englishman travelling [sic] for pleasure
and uttered forged letters and checks on different eastern banks, also in
Canada, Captain Lees arr. him in this city on a chg. Forgery and on June
14th. 1880. Sentenced to Folsom, 8 yrs. While in state prison, he dosed
himself with pills made of soap, which kept him sick constantly, complained
of stomach trouble and pricked his gums, making the blood run; his hope
being that he would create the general impression that he was suffering
form hemmorage [sic] of the lungs, he played the part so well that he
received a pardon from Governor Perkins in 1882. He had introduced himself
to Stude bake, the wagon manufacturer as an agent for the Standard Co. and
thus secured letters of introduction to people of prominence and then
swindle them]http://images/resize/300/?url=http://ark.cdlib.org/ark:/13030/tf6p3009bf/thumbnail

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/117#issuecomment-22221363
.

Scott Kleinman
Professor of English
Director, Center for the Digital Humanities
California State University, Northridge

[amandavisconti]

I've started working on these issues locally.

[amandavisconti]

Fixed alt tag issue. Going to experiment locally with better layout in general before fixing Opera.

[mialondon]

Great stuff! We never came up with a solution for titles that were bigger than the image, but I suspect it's behind some of the overlapping oddness - do you have any ideas?

[scottkleinman]

I experimented with using tooltips instead of the current overlay, but
JQuery UI doesn't allow you to click on the image when a tooltip is open. I
tried the much better qtip2 http://qtip2.com/ plugin but couldn't get it
to work. If people like the idea, it might be worth trying again; I think
the problem could have been something simple like JQuery begin loaded
twice. Regardless, copying some of the qtip2 styles
http://qtip2.com/demosfor the overlay css might produce something
that looks nicer and is more
readable.

On 12 August 2013 15:11, Mia [email protected] wrote:

Great stuff! We never came up with a solution for titles that were bigger
than the image, but I suspect it's behind some of the overlapping oddness -
do you have any ideas?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/117#issuecomment-22529935
.

Scott Kleinman
Professor of English
Director, Center for the Digital Humanities
California State University, Northridge

[amandavisconti]

Looks like Isotope had a bunch of code improvements right after OWOT, including "added support for responsive layouts with element sizing" (potentially very helpful). I've got the afternoon today to spend working on the results page masonry locally--will see if updating masonry improves it.

[mialondon]

Tagging @mfrazer on this too...

[rlskoeser]

@amandavisconti has done some research on this but won't have time to work on it until late December. She has found some resources for fixing this issue and will hopefully post some links with information about it in case someone else has a chance to look at it.

[amandavisconti]

See http://metafizzy.co/blog/summer-2013-update/ ("added support for responsive layouts with element sizing") and http://isotope.metafizzy.co/docs/help.html#images.