WordPress.org

Ready to get started?Download WordPress

Forums

[Plugin: NextGEN Gallery] Squished Thumbnails (13 posts)

  1. sassymonkey
    Member
    Posted 5 years ago #

    On latest Safari 3.2, the thumbnails are usually squished horizontally and overlapping closely. Very occasionally, they will render correctly as square thumbnails in a row. But then a refresh will break it again.

    Since I can't upload a screenshot, I'll try to illustrate the problem in the glorious fidelity of ASCII!

    Instead of a proper row of square thumbnails with space between like this:
    [ ] [ ] [ ] [ ] [ ]

    The thumbnails look all squished and overlapped like this:
    [[[[[ ]
    The entire thumbnails are there but are highly condensed horizontally within their space.

    Then if you mouse over them, they partially pop open but still overlap something like:
    [ [ [ [ [ ]
    The images are then slightly less squished horizontally but still overlapped.

    This has been happening for all of the beta versions tested of NextGen 1.0 b in various versions of WP 2.7b. I prefer the thumbnails set to square (no landscapes or portraits), but have tried messing with all of the Thumbnail settings and the problem persists.

    I have a rough staging site to try it out on at: http://staging.srwestend.com/nggallery/page-119/album-2/gallery-1/

  2. sassymonkey
    Member
    Posted 5 years ago #

    BTW, the same problem is happening in Google's Chrome browser. I assume that since both Safari and Chrome are using the WebKit rendering engine, therein lies the problem: something about the coding in NextGen for the thumbnails is incompatible with WebKit.

    Seeing as how Chrome is already garnering a user base (cnet reported recently that it's already the fourth most used browser to visit their sites), and seeing as how Safari is well established, maybe this display problem can be tackled sooner rather than later... maybe? C|:-}

  3. Alex Rabe
    Member
    Posted 5 years ago #

    Have you the same issue with the default theme ?

  4. cipote
    Member
    Posted 5 years ago #

    Hey alexrabe,

    Thanks a lot for this plugin! I just started using it.
    Here is a sample of the thumbnail display.

    FYI, I'm using the Maple Leaf by (TemplateLite.com).

  5. sassymonkey
    Member
    Posted 5 years ago #

    Indeed, the squished thumbnail problem does NOT exist in both the default theme and the Classic. BTW, the theme I'm using is called "Maple Leaf" available at TemplateLite.com.

    This makes me think there's something in my theme's CSS that is affecting NextGen (like maybe an a: or hover: class). This is not the case though. I looked at the various divs that NextGen creates to display thumbnails and they are all uniquely labeled and should not conflict with my theme's CSS. I also removed a bunch of CSS bits that might affect it with no changes.

    One consistency I did find in Safari is that simply loading a gallery page with thumbnails will nearly always show the squish problem. However, if I click the [Slideshow] link to switch over the the Flash viewer, and then switch back by clicking the [Picture List] link, the thumbnails nearly ALWAYS show up correctly.

    Yet, this is only on Safari. Goggle's Chrome always shows them squished regardless.

    Very puzzling. I'm at a loss of where to start eliminating code to see if anything affects it.

  6. Tanin
    Member
    Posted 5 years ago #

    Somehow the width of a random number set of images gets set to 20px....i can't figure out what does that. Chrome's DOM Inspector even shows you that the original value is read from the CSS, then overwritten out of nowhere with 20px.

    When the page is refreshed the selection of malformed images is almost always different. This may well be a browser bug.

  7. anyusernamewilldo
    Member
    Posted 5 years ago #

    I fixed this by adding the following to the thumbnail image style in nggallery.css:

    .ngg-gallery-thumbnail img {
         float: left;
         ...
    }

    (Also tested in ff, ie7, ie6.)

    It will increase the horisontal thumbnail spacing in ie6, which can be slightly remedied by using padding instead of margin on the thumbnail container as follows (for those who care about ie6):

    .ngg-gallery-thumbnail {
         /*margin-right: 5px;*/
         padding-right: 5px;
         ...
    }
  8. cipote
    Member
    Posted 5 years ago #

    @anyusernamewilldo,
    This seems to have fixed it for me as well!
    Thank you very much for sharing this!

  9. cipote
    Member
    Posted 5 years ago #

    Ah, I just noticed that this behaviour is back. I see it with both G5 and Intel ship based Macs. I guess now I would look into the theme itself...

  10. AlexS66
    Member
    Posted 5 years ago #

    I am planning to use NextGEN gallery, very helpful. http://www.webhostingr.net

  11. tthorp@brown.edu
    Member
    Posted 5 years ago #

    look in your theme's css for something like img{max-width:98%;} I took that out and the problem went away.

  12. sassymonkey
    Member
    Posted 5 years ago #

    Hey, yeah! I did find similar code in my style.css doc for the Maple Leaf template:

    img {
    max-width: 100%;
    }

    I killed it and it seems to work perfectly well on both Safari and Windows Chrome.

    I wonder what it's for...? Maybe to keep images that are larger than the content column width from displaying beyond that width...? Oh well.

    Nice!

  13. chico203
    Member
    Posted 5 years ago #

    look in your theme's css for something like img{max-width:98%;} I took that out and the problem went away.

    Doesn't works for me :(.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.