Image sorting error in 3-column masonry image gallery when thumbwidth >299

  • Resolved thecaryl

    (@thecaryl)


    3 years, 8 months ago

    I would like to display my photo portfolio in three columns. It’s taken me ages to find a plugin that would achieve this aesthetically, and I’m thrilled that Foo Gallery does this.

    HOWEVER, despite having ordering set to alphabetical in the main settings, the 3-column masonry image gallery refuses to order my images correctly when the thumbnail width used is >299px. Why not just use a thumbnail of 299? Unfortunately it generates a thumbnail of too poor quality for a commercial photography website. If I select 350, the thumbnail quality is improved, but the specific order of images is lost.

    They run:

    01, 02, 03,
    05, 06, 04,
    09, 08, 07,
    12, 11, 10,

    and so on.

    I’ve tried many permutations, and other gallery formats (responsive image, justified gallery), but these are wildly sensitive to different screen sizes, which spoils the effect.

    I’ve mocked up a new 3 column portfolio where the image order would be essential, but I’m not able to realise this on my portfolio page unless I can get round this error.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hi @thecaryl,

    1. Masonry reorders the images to best fit them into the columns however it sees fit. There is a way to change this behavior but you would need to use the Gallery Settings > Advanced > Custom Settings option and insert the following value:
    {“template”:{“horizontalOrder”: true}}
    as shown in the screenshot: https://monosnap.com/file/Ib671iqy7Smt0DIfB1ZWFlzcxw6ZC0.This instructs the Masonry JS to preserve the order the items were output but it can lead to uneven/strange column heights as it is not performing a best-fit check.

    2. Regarding blurriness, it seems that when you select the less than 299px thumb size, they are set a little too small for your theme’s available width yet the rendered images on the page are actually around 446px. I would suggest that you set the thumbs to 450px to avoid upscaling which causes blurriness.

    If you have any other questions, do not hesitate to ask.

    Kind regards,
    Blaise.

Viewing 1 replies (of 1 total)
  • The topic ‘Image sorting error in 3-column masonry image gallery when thumbwidth >299’ is closed to new replies.