Square grid not square and other issues

  • oguido

    (@oguido)


    7 years, 1 month ago

    Hello,

    I find your plugin very good and powerful! Great work indeed.

    I just want to point out some things. First, the “square grid” is not square (please see screenshots). With the thumbnail source size of “thumbnail”(150×150) the grid gets squashed because the title bar is much bigger than the thumbnail square. If I set the width and height bigger (ie. 300×300) it won’t change since the thumb source is 150×150.

    If I set the the thumbnail size to medium, it says supposedly that it’ll be 300×300. But each image keeps it’s original proportion ratio with the longest side to 300px. So the grid isn’t square, and each row’s height is determined by the height of the tallest image (see screenshot)

    Also if I wanted a bigger grid (200px for example) the way is now I would need to set the thumbnail source size to medium(300×300) because with the 150×150 it won’t work, it stays 150×150 – instead of resizing the thumbnail size to fit the desired grid size.

    That is a problem with bandwidth if one wants big squares in the grid. If I wanted one bigger than 300px I’d need to set the thumbnail source to large which is too much for loading. And still since the image isn’t being resized to fill the square, it would leave empty space if the image isn’t 1:1 ratio.

    I think when selected the square grid, to fill the whole square with the image (even if the image isn’t 1:1), it would be needed the background-size: cover attribute.

    the screenshots:
    https://ibb.co/jZPGY3h
    https://ibb.co/rsY77Q3
    https://ibb.co/YkytGgD
    https://ibb.co/wdTtFnY
    https://ibb.co/mhBM5dp

    I hope this could be solved to have beautiful big squared gallery! 😉

    Another issue is that I’ve set the the photo title in the lightbox to “use the photo description/caption”. It does show the caption but doesn’t show any description. Is the description not supported? if so, why is it being offered?

    Unfortunately I can’t provide an URL since the page I’m working is still offline

    Thank you very much!! 😀

    • This topic was modified 7 years, 1 month ago by oguido.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Sayontan Sinha

    (@sayontan)

    7 years, 1 month ago

    First, the “square grid” is not square (please see screenshots). With the thumbnail source size of “thumbnail”(150×150) the grid gets squashed because the title bar is much bigger than the thumbnail square.

    What happens if you set the title to display as a tooltip? The fact is, the plugin has to increase the size of the container according to title, otherwise for the type of display you are using a long title will end up covering the entire thumbnail. Note that the display is called a “square thumbnail grid”, not a grid of “squares”.

    If I set the width and height bigger (ie. 300×300) it won’t change since the thumb source is 150×150.

    Yes, it will not, and that is by design. As a gallery plugin the very first foundational philosophy of Photonic is, “no pixelation”. If I scale up the images, that philosophy goes for a toss. This is true not just for Photonic, but for most gallery plugins.

    If I set the the thumbnail size to medium, it says supposedly that it’ll be 300×300. But each image keeps it’s original proportion ratio with the longest side to 300px. So the grid isn’t square, and each row’s height is determined by the height of the tallest image (see screenshot)

    What is the source of your images? Is it a WP gallery? The second foundational philosophy of Photonic is, “no cropping”. Cropping based on JS / CSS is very, very erratic and since there is no machine learning involved in them it often takes away critical sections of images (particularly photographs, where a key component of a photo is often not in the center). I have this explained at various places on the documentation site, notably for the mosaic layout.

    Since I have a policy of “no cropping” I don’t do anything to tweak the aspect ratio of images.

    Now, if you are using a WP gallery and you have JetPack, you might want to consider using image optimization in JetPack to do your resizing. That does resizing and also acts as an image CDN.

    That is a problem with bandwidth if one wants big squares in the grid. If I wanted one bigger than 300px I’d need to set the thumbnail source to large which is too much for loading. And still since the image isn’t being resized to fill the square, it would leave empty space if the image isn’t 1:1 ratio.

    See the points above about pixelation, cropping and aspect ratio. I know you are reporting these as “issues”, but doing these the way you are asking goes against the core plugin design (and will cause thousands of additional issues for all the folks who have been using Photonic since 2011).

    Plugin Author Sayontan Sinha

    (@sayontan)

    7 years, 1 month ago

    I had to leave early while writing my previous post, so I couldn’t supply some additional information. Read through this thread for what I am suggesting about using JetPack.

    Another issue is that I’ve set the the photo title in the lightbox to “use the photo description/caption”. It does show the caption but doesn’t show any description. Is the description not supported? if so, why is it being offered?

    This has mostly to do with two factors:

    1. Consistency between what each type of source (i.e. Flickr, SmugMug, Google, Zenfolio, Instagram and WP) provides. Some call it a caption, and some call it a description. Photonic supports two different types of things:
    1. A title, e.g. “Sunset in Maui”
    2. A caption (or a description depending on what the source calls it), e.g. “A photo of the sunset taken while driving walking on the Ka’anapali beach in Maui”

    Note that native WP galleries (i.e. galleries without Photonic) don’t support a “description” – they only support a caption, though there is a field for a description. Photonic mimics this behaviour.

    • Consistency for non-English speakers – Depending on the language a plugin user speaks, there may not be a word for “caption” for that user. Hence both words are mentioned in the setting.

    Thread Starter oguido

    (@oguido)

    7 years, 1 month ago

    Hi Santoyan, thank you very much for your extensive answer.

    I see now that if it’s by design and the plugin’s policy to not crop and no pixelation the reasons why it’s working the way it is.

    I just want to offer as my feedback that even though I’m also against pixelation, a slight resizing of the image doesn’t affect it’s function (ie. a thumbnail of the full size one) and it does positively affect the loading time. I’m meaning when one wants a big thumbnail grid.

    Also, as for cropping. I see your point in the potential negative effects of cropping but I think also giving the developer the flexibility of choice is a plus. And again, if the purpose is to work as a thumbnail of an image much bigger and clearer that the user is (in theory) going to be looking at.

    For me personally I used to enjoy the justified grids some time ago, but now I’m really into big squares grid. In general I think the homogeneous feeling that a regular grid gives is nice –depending on the style of design that is. But that’s just my opinion anyway.

    My point is that I might not be the only one out there thinking like so. And so to have different options is reaching to a wider group of designers/developers.

    Anyway, I do respect the original design and the plugins policies so these are just my 20 cents.

    About the description, my confusion was from the fact that because I’m using the gallery from a WP gallery source, I was expecting to see both the caption and the description. Now I’ve understood why it says that.

    But again just as my opinion, it’s nice when the slide in the lightbox can show both a title and a description (an example of what I mean). I guess it’s a detail anyhow 🙂

    Thank you very much anyway and I wish you the best in your project. Congratulations with such good work!

    😀

    Plugin Author Sayontan Sinha

    (@sayontan)

    7 years, 1 month ago

    Thanks for the feedback – it is much appreciated!

    I just want to offer as my feedback that even though I’m also against pixelation, a slight resizing of the image doesn’t affect it’s function (ie. a thumbnail of the full size one) and it does positively affect the loading time. I’m meaning when one wants a big thumbnail grid.

    To be honest, a 300×300 image is not that big – probably around 20-25KB, while a 1600px image easily goes to over 1MB. On the other hand, a 150×150 image is around 7-8KB, so the bandwidth savings between a 150px and a 300px image are not much. On the other hand, the pixelation effect is quite severe, because you are taking something that was spread over 22500px (i.e. 150×150) and spreading it over 90000px (i.e. 300×300) – that is causing your photo to be 4 times blurrier than it should have been!

    I do get your point about a small level of upscaling being alright, but that would mean you can take 150 to 160, or 170 at the most. More than that, and you will start seeing the effects.

    I see your point in the potential negative effects of cropping but I think also giving the developer the flexibility of choice is a plus.

    Agreed, but the thing is, I would be replicating behaviour that exists natively within the sources – you can pass custom sizes to WordPress (via WordPress’s JetPack plugin), Google or SmugMug and get back precisely sized and cropped images without risking erratic cropping using JS / CSS.

    If you see the thread I linked in my previous post, it does almost exactly what you want, but with a slightly different approach:

    1. Changing the thumbnail size setting under Settings → Media (this is a WP setting, not a Photonic setting
    2. Use one of the following plugins:
    1. JetPack – turn on the image performance setting over there (they keep changing the name – it used to be called JetPack Photon). If you do this, it will automatically resize the images to the size you have set above, and it will serve the images from the wp.com CDN. This will help you with bandwidth concerns.
    2. Regenerate Thumbnails – If you decide to not use JetPack, this will help you change all your thumbnails to the size you desire. This is less flexible than JetPack, and will store the resized images in your folder.
    • Once you have got the perfect sizes for your images, you can consider using the “Masonry” layout – that will give you the exact look you are aiming for.

      • About the description, my confusion was from the fact that because I’m using the gallery from a WP gallery source, I was expecting to see both the caption and the description. Now I’ve understood why it says that.

      This is planned for the future. The challenge is that many lightboxes don’t support a separate title and description (e.g. the old Fancybox, Swipebox, ImageLightbox, Featherlight etc.), and many sources don’t have a separate title and description (e.g. Google, Instagram). So this will need a good amount of thought and work.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Square grid not square and other issues’ is closed to new replies.