thumbs size

Can you share a URL? I can help better with one.

You have quite a few options, actually.

1. Option 1: Instead of using columns='5' use columns='auto'. If you are using the interactive editor, for “Number of columns in output” you will set “Automatic (Photonic calculates the columns)“.
2. Option 2: Use the “Masonry” layout:

1. While picking the sizes, set the “Tile size” to 300px × 300px, which will give you a square thumbnail.
2. You can specify the “Number of columns in output” to be 5 (or whatever you desire, or let it be “Automatic”).
3. You can go to Photonic → Settings → Generic Options → Layouts → Masonry Layout – Minimum Column Width, and set it to something like 200.
4. With the above set of options what will happen is that if someone is resizing the page and your display area is < 1000px (200 * 5) wide, then Photonic will automatically reduce the number of columns.

• Option 3: Similar to Option 2, you can use the “Justified Grid” layout with square thumbnails. Here you cannot set the number of columns, but the behaviour is responsive
• Option 4: You can use the Justified Grid, Masonry or Mosaic layouts, but for the “Tile size” use the “Full” size – these layouts will give you a mix of sizes automatically.

You can explore the layouts here. Try playing around with the screen sizes. If I am using the square or circle layouts, I always set columns='auto' for responsive behaviour.

I did share an URL, I am trying to duplicate the behavior in that link. It makes much more sense from a responsive layout point of view. I think if your plugin cannot duplicate that, it should, it would be an excellent improvement. What is does is: at 320px window size (mobile) the thumb automatically expands to fill the available space (so no 150px limitation), the thumbs are displayed at 210x210px and change size as needed. hope that makes sense

1) I did use “Automnatic number of columns” in 99% of my tries

2) That doesn’t help, I still have the same issue: I can only display thumbs as 150×150 or 300×300. The thumb size it self should behave responsive as you can see in the link above. Even using masonry with the settings you mentioned, I get the same result, and the same ugly display on mobile, with white space: https://imgur.com/a/z86XACF
The setting in the Masonry layout did not make any change (or I cannot notice one). The default was 200 anyway (out of the box)

3) Actually, in justified Grid mode, I cannot specify the number of columns, that option is not available, the shortcode generated is below, what is style=random? and where is column?
[gallery ids='1588,1587,1573,1572,1571,1570,1569,1568' main_size='full' thumb_size='medium' style='random']

4) tried that, still cannot get the result I am looking for, which is visible in the link above (https://www.newboard.ro/panouri-mdf-lemn-ceramica)
Also, every time I am using full size for thumbs, there is an erratic behavior, it sometimes displays just one thumb really huge, I have to resize the window and it will switch to displaying 3 columns or so. Strange.

• This reply was modified 6 years, 2 months ago by bg17aw.

I did share an URL, I am trying to duplicate the behavior in that link

Well, my request was for a URL from your side with Photonic activated, not a URL that doesn’t have the plugin active. Basically quite a few support requests can be resolved by looking at the URL – it helps me understand the requirement and the issue better.

I think if your plugin cannot duplicate that, it should, it would be an excellent improvement.

It already does that (and a lot more, and better!). If I look at the link you are providing, this is what I get when I reduce the screen size on a desktop:

View post on imgur.com

So you do have a lot of whitespace showing up with your demo site!

The issue that you have with what you are trying to do is that your two requirements contradict each other:

1. You are trying to use fixed width sizes (even your demo site uses 480px fixed width images, scaled down) …
2. … But you are trying to create a dynamic layout

No matter what you do, you will end up with whitespace (or blurry images) in certain scenarios. E.g. In the link you are sharing, images are set to display at a maximum width of 210px, so if I have a window that is 400px wide, I get 190px of white-space at least. As you can see in my screenshot, it certainly does not expand to fill out the full width.

What is does is: at 320px window size (mobile) the thumb automatically expands to fill the available space (so no 150px limitation), the thumbs are displayed at 210x210px and change size as needed. hope that makes sense

As I showed you in the screenshot, it doesn’t quite do that. In fact you end up with a lot more whitespace with your demo site than you have on yours.

Can you set the tile size to 300×300 with the Masonry layout, and set a minimum column width of 150 (The screenshot you provided is the same as yesterday’s – it does not correspond to the Masonry layout with 300px images)? I am assuming your site has margins, padding etc. So 300px should work perfectly for a 320px wide screen. Also, if your screen becomes 350px, the trigger width of 150 will ensure that you are getting two columns, and each will be 175px wide, but will display a 300px image shrunk to 175px. (All the details of the calculation are documented here)

If it doesn’t fix the issue, can you provide me with a URL where you are seeing the problem?

Note that for a native gallery the size options you see in Photonic are those that WP defines (under Settings → Media), plus anything that your theme has defined. WP has standard options – 150×150, 300×300, 1024 on the longer side, and full size. Many themes offer additional size options, and some native gallery plugins offer additional size options (not defined in Settings → Media).

If you are changing the settings in Settings → Media, you have to use a plugin to regenerate thumbnails. I don’t add custom sizes in Photonic because for every custom size you offer, WP will automatically create images of that size when you upload photos (increasing storage space and adding thousands of files).

3) Actually, in justified Grid mode, I cannot specify the number of columns, that option is not available, the shortcode generated is below, what is style=random? and where is column?

Correct, as I wrote in my previous post: “Here you cannot set the number of columns, but the behaviour is responsive“. So you cannot specify the number of columns in justified grid (style='random' triggers the justified grid). The reason is, the Justified Grid is an automatically computed layout – it will do 3 things:

1. Ensure that all rows are of equal width, and are at 100% width
2. Ensure that all images in a row are of equal height
3. Randomize how many images it shows in each row, as long as the above two criteria are met

But, if you force the Justified Grid to use fixed size images (e.g. 300×300), the results look a lot more pleasing.

Also, every time I am using full size for thumbs, there is an erratic behavior

This is not erratic behaviour – it is how it is meant to work. Basically the justified grid and the mosaic layouts are “row oriented” (images / blocks in a row have the same height), while the masonry, square and circle layouts are “column oriented” (images in a column have the same width). Anytime you resize the screen the images will be rearranged to present the optimum view and occupy 100% of the width without showing whitespace or blurring the images.

As I have suggested above:

1. Use the Masonry layout
2. Use the 300×300 size
3. Set the minimum column width to 150px
4. If this is not giving the desired results, please share the URL for the site with the issue – in many cases a simple CSS tweak will show you things to your satisfaction.

Hi,
I wanted to follow up and first apologize – I have a bug in the masonry layout that I hadn’t caught. Though you are setting a “Tile size” of 300px, it is setting a “Thumb Size” instead of the “Tile Size” in the shortcode. I will fix this in the next version.

Try using this shortcode:
[gallery ids='1588,1587,1573,1572,1571,1570,1569,1568' main_size='full' tile_size='medium' style='masonry']

(Note that I am saying tile_size instead of thumb_size)

I created a gallery on the Layouts that shows you the behaviour with the settings that I have provided above (see the second gallery under Masonry). You can try resizing the page as you see fit – you should not see any whitespace.

First of all, thanks for your effort. It paid off, one bug identified so far.
I like the new update as well, lightboxes new settings layout is much better.
However, I cannot seem to find what I am looking for with your plugin.

I agree the link/plugin I provided as an example will also show white space at some non-standard resolutions, you mention 400px. But what device will use that… I mentioned 320px as that is the resolution used by most mobiles in portrait.

This is why I think it is very important for me (and you) to cover gracefully this particular resolution.

WP is somewhat limited in his thumb size offer, as you point out.

In my opinion, even if the user chooses 150px as the thumb size, you should make sure the thumb will fill up the whole available space in 320px display mode (as it will probably not offer enough space for 2 thumbs as there is padding and margins etc). This would make much more sense than displaying a 150px imagine and a lot of white space. Or this should be an option at least. Do you agree?

Can you cover all possible window sizes? No, and nor should you try. I think there are a few key breakpoints (probably the ones in Boostrap are a good example, 320px, 480px, 768px and 1024px if I remember correctly).

I can now provide a link to the site with your plugin installed: https://rmv.ro/panouri-mdf-lemn-ceramica/

– I set Masonry Layout – Minimum Column Width to 150pc (no visible change for me), I still don’t understand what this parameter is doing?
– I set the shortcode to “main_size=’full’ tile_size=’medium’ style=’masonry’]” (I am manually editing the thumb_size=’medium’ to tile_size=’medium’, is this correct?). I am not clear what tile and thumb do different. If tile is just a container div for the thumb, you could have a max_tile_width parameter that could solve my issue (and make the thumb fit to that, which is easy using the width=auto for img)

I also used the following custom css:

/* START: photonic gallery and lightbox changes */
.photonic-thumb a img {
    padding: 0;
}
.entry-content ul {
	padding: 0 0 23px 0;
}
.photonic-thumb {
	padding: 2px;
}
.featherlight .featherlight-close-icon {
	font-weight: bolder;
}
.photonic-stream {
	margin: 0;
}

What I don’t like:
– as you can see, when I change to the second tab, there will be just one huge thumb displayed until a screen size change is triggered. This is a big no-go for me
– on the first tab, some tiles are going on a new row, not sure why
– still on the first tab, the tiles are 335px in size, which is bigger than the 300px of the thumb. this is what I was saying, I would like to have the plugin lower the size and fit 4 columns for example, instead of making them bigger and only display 3 columns. This would be of course closer to the behavior in my other link I originally provided (https://www.newboard.ro/panouri-mdf-lemn-ceramica/)

I created a gallery on the Layouts that shows you the behaviour with the settings that I have provided above (see the second gallery under Masonry). You can try resizing the page as you see fit – you should not see any whitespace.

That looks good,
– the thumb size seems to be originally 300×200
– the displayed size is 238×159, which is sort of what I was looking for, remember I gave an example with that page displaying the thumbs at 210×210 instead of the original 300×300. How did you achieve that?

In my opinion, even if the user chooses 150px as the thumb size, you should make sure the thumb will fill up the whole available space in 320px display mode (as it will probably not offer enough space for 2 thumbs as there is padding and margins etc). This would make much more sense than displaying a 150px imagine and a lot of white space. Or this should be an option at least. Do you agree?

Actually I disagree. If the user chooses 150px as the size and you expand it to fill out 300px, the image will be extremely blurry (you will have a 75% drop in resolution). Most photographers prefer not having blurred images.

– I set Masonry Layout – Minimum Column Width to 150pc (no visible change for me), I still don’t understand what this parameter is doing?

This parameter kicks into effect for smaller screen sizes. E.g. this is a simulation on Chrome for a 320px screen:

View post on imgur.com

And this is for 480px:

View post on imgur.com

Basically you can now try resizing your screen for any size (doesn’t matter what) – you will have images fill out the whole width. Depending on your overall column width Photonic will adjust the images and not show you any white-space apart from your padding.

If you had set the minimum column width to 200px, I believe you might have had white-space for the 480px setting.

Can you cover all possible window sizes? No, and nor should you try. I think there are a few key breakpoints (probably the ones in Boostrap are a good example, 320px, 480px, 768px and 1024px if I remember correctly)

Unfortunately Bootstrap is nowhere close to complete for this. E.g. in the above 640px is not listed, neither is 960px, and every now and then you have new devices coming up that have a certain width that does not adhere to the prescribed number of px. There are multiple Android devices that deal with device widths not from this list, and moreover if you switch your device from portrait to landscape mode, you have to deal with the device height, which is even less standardized! That is why the definition of breakpoints is just meant to be a yardstick, nothing more – the breakpoints are meant for developers to adjust content to suitable displays, they are not meant to be hard device widths.

But here is the thing: I have given you a solution that will now work smoothly for all window sizes! It is very much possible to minimize white-space with the approach I have given you.

– I set the shortcode to “main_size=’full’ tile_size=’medium’ style=’masonry’]” (I am manually editing the thumb_size=’medium’ to tile_size=’medium’, is this correct?). I am not clear what tile and thumb do different.

The setting you have done is correct. The thumb applies to the square / circle displays, and the tile applies to the other displays. The reason there are two separate settings for tile and thumb is more due to historical purposes.

For many years you had only the square layout and one setting that was applicable to all galleries (controlled from Photonic → Settings → Flickr → Flickr Settings → Thumb Size, or Photonic → Settings → SmugMug → SmugMug Settings → Thumbnail Size).

Then I added the “Justified Grid” layout that encouraged users to use full-size images on the main page instead of thumbnails. Obviously the challenge with this was if a user had hundreds of photos, pages loaded slowly… but if I displayed tiny thumbnails in the justified grid, the photos would look really ugly. So I introduced the concept of a tile_size, where you could pick a size smaller than the full size, but larger than a thumbnail. This feature is more useful for photos from Flickr, Google, SmugMug etc. because they have multiple sizes available, unlike native WordPress. Subsequent new layouts (Masonry and Mosaic), which encourage you to see larger images on the front-end make use of the tile setting.

– still on the first tab, the tiles are 335px in size, which is bigger than the 300px of the thumb. this is what I was saying, I would like to have the plugin lower the size and fit 4 columns for example, instead of making them bigger and only display 3 columns.

Try setting columns='4', as per my demo-link. That will show you 4 columns till you shrink below 600px, when it will switch to 3 columns. If you don’t specify a column setting, Photonic assumes 3, and reduces the number if your column width is low.

– as you can see, when I change to the second tab, there will be just one huge thumb displayed until a screen size change is triggered. This is a big no-go for me

This, actually is a problem you run into with some “tab” plugins and use an “automatic” number of columns – the “automatic” feature relies on a jQuery $(window).resize(); event, and that does not get triggered if your content is hidden in an inactive tab.

The simplest solution to address this is to add the columns='4' attribute – you won’t see this happen if you do so.

– the displayed size is 238×159, which is sort of what I was looking for, remember I gave an example with that page displaying the thumbs at 210×210 instead of the original 300×300. How did you achieve that?

Sorry – I didn’t see this earlier. Essentially it is the same gallery as yours, with one small difference: I used columns='4'. I believe this will work for you as well, since your main column’s width will not increase (it might decrease, but it will not increase).

This, actually is a problem you run into with some “tab” plugins and use an “automatic” number of columns – the “automatic” feature relies on a jQuery $(window).resize(); event, and that does not get triggered if your content is hidden in an inactive tab.

The simplest solution to address this is to add the columns=’4′ attribute – you won’t see this happen if you do so.

I put column=4 but still getting the same issue in the second tab, weird… https://rmv.ro/panouri-mdf-lemn-ceramica/

If that didn’t happen, I was about to say I am happy with almost everything.

Also, any idea why some tiles go to the next row? This is visible in both tabs (first and second)

I put column=4 but still getting the same issue in the second tab, weird… https://rmv.ro/panouri-mdf-lemn-ceramica/

If that didn’t happen, I was about to say I am happy with almost everything.

In that case there will have to be a call to $(window).resize() upon the activation of the tab. Most tab plugins allow the addition of custom JavaScript to be triggered when you activate a tab. Does your plugin do it? If it does, you will have to include this line to be executed:

$(window).resize();

If it doesn’t support such calls, I believe there are plugins such as “Responsive Tabs” or “Shortcodes Ultimate” that either do a resize upon tab activation automatically, or let you trigger custom events.

I am using Divi, and the included Divi tabs module, not sure how to add that.

The ideal scenario would be to be able to use the classic square gallery, I think.

I am using Divi, and the included Divi tabs module, not sure how to add that.

Considering that you are paying for your theme and support, they should be able to help you out with this, since the other tab plugins offer this feature.

The ideal scenario would be to be able to use the classic square gallery, I think.

Your requirement of “responsiveness” is very specific with respect certain fixed widths that you are desirous of showing. So you will have to work with a lot more custom CSS:

1. Layout = square
2. Columns = auto
3. Thumbnail size = medium
4. Add the following CSS:

   @media screen and (max-width: 1000px) {
       .photonic-standard-layout li.photonic-thumb { width: 25%; }
   }
   @media screen and (max-width: 768px) {
       .photonic-standard-layout li.photonic-thumb { width: 33%; }
   }
   @media screen and (max-width: 640px) {
       .photonic-standard-layout li.photonic-thumb { width: 50%; }
   }
   @media screen and (max-width: 320px) {
       .photonic-standard-layout li.photonic-thumb { width: 100%; }
   }
   .photonic-standard-layout .photonic-thumb a img { width: 100%; height: auto; }
   

As with most themes, support is limited, I think.

Just to be clear, tile_size is only used in masonry layout, and not in square, right?

Your requirement of “responsiveness” is very specific with respect certain fixed widths that you are desirous of showing.

It’s not “responsiveness”, it is actual responsiveness, having an width: 100%; height: auto; for img in this days is the norm.

Your argument that a photographer might have an issue with his picture at 150px being displayed to fill the space on a 320px is a bit nonsensical, no photographer will showcase his work at 150px, and refuse responsiveness…

Also, having a few breakpoints in your css is also the norm.
Like having a limited amount of thumb sizes in WP and so on.

I have yet to find a device with a 400px resolution (you mentioned this above at some point). I actually created a small program and I am keeping track of them, here: https://tripleplay.itfusion.ro/viewport.htm

Using your custom css seems to do the trick, I think this is the best scenario we achieved so far

• This reply was modified 6 years, 2 months ago by bg17aw.

It’s not “responsiveness”, it is actual responsiveness, having an width: 100%; height: auto; for img in this days is the norm.

Your argument that a photographer might have an issue with his picture at 150px being displayed to fill the space on a 320px is a bit nonsensical, no photographer will showcase his work at 150px, and refuse responsiveness…

This is wrong at multiple levels. It is the norm to use width: 100%; height: auto;, but only to scale down an image, not scale up. If you look at the entire spectrum of plugins, no self-respecting plugin will tell you to take a 150px image and stretch it out to fill 300px. That is not “actual responsiveness” – it is a photographer’s recipe for professional suicide! Much worse than showing an image at 150px is showing a blurry image.

Also note the following:

• In all of my posts above (even in the example with breakpoints) I have taken a larger image (i.e. 300px) and scaled it down to adjust the width; nowhere have I taken a 150px image and made it blurry.
• Even the demo link that you have been showing does not stretch out a smaller image to fit a larger viewport. That is why it had white space on a 400px width screen (or for that matter, a 375px or 414px width screen – more on screen widths later in this post).

Also, having a few breakpoints in your css is also the norm.

You are confusing between themes that deal with the full width of your screen (figures out how wide your content and sidebars are etc.), and plugins that operate within a very small area of your screen (could be a widget, could be the main post, whatever). It is very natural for a theme to define breakpoints (up until mid-2016 I was the author of a very popular theme called Suffusion, customizable with complete coverage for breakpoints – so I understand your viewpoint), but it is counter-intuitive for a gallery plugin to do the same.

E.g. Take the CSS that I gave you above. Assume you are viewing your site on a desktop. So this will be effective:

@media screen and (max-width: 1000px) {
    .photonic-standard-layout li.photonic-thumb { width: 25%; }
}

Now, let’s say your theme has a sidebar that is 250px wide, and you put Photonic in a widget in your sidebar (multiple people display galleries this way, BTW). As per the definition you have added, you will get 4 columns and even with 0 padding / margins, each column in Photonic will be just 62.5px wide! Let’s say you resolve this by adding a min-width attribute. You then go ahead and define another gallery, but this time in your main content. All of a sudden you will be faced with white-space in your main content due to your min-width definition. To resolve it, you add specific selectors. E.g. #sidebar-1 .photonic-standard-layout li.photonic-thumb and #main-content .photonic-standard-layout li.photonic-thumb. Here is the kicker – whatever definition you come up with, it cannot be applied uniformly across themes (each theme uses different selectors), ergo, I cannot bundle it with the plugin.

Basically the widths, padding and margins are under the tight control of your theme – trying to add my own in a plugin that can get used anywhere on the screen for any of the several thousand themes in the marketplace is not very smart. That is why it does not make sense to pre-define breakpoints. As a matter of fact in the 8 years and 10000+ installs of the plugin being active, NEVER has a request for pre-built breakpoints been made, BTW. In fact, maybe a total of 5 times (including this one) have I been asked to offer any sort of custom CSS to support a specific breakpoint.

There is no way you can convince me to add breakpoints by default to Photonic. Contrary to what you think, far from being a valuable addition, this will cause a massive spike in issues and support requests. Take it from a person who has offered free themes, plugins and support for over 10 years now.

Like having a limited amount of thumb sizes in WP and so on.

Not sure I am following you – what do you mean when you say “limited amount of thumb sizes in WP”? WP comes with a limited number of thumb sizes out of the box – thumbnail, medium and large, and any custom size your theme defines is also picked up by Photonic. Note that it has been 7 years since WP itself moved away from fixed sizes and has been pushing JetPack Photon, where you can pass an arbitrary size based on the widths you desire (see this thread, where I helped the user set it up with Photonic).

Here is what I have been trying to tell you: Photonic will adapt to the image widths you pick and the location you put your gallery, without compromising on the resolution – this is the cornerstone of the plugin. So it will resize a larger image to fit your width, but it will NOT take a smaller size to stretch it out, and call my argument “nonsensical” to any extent you want – no amount of name-calling will cause me to change this behaviour. That is why I said you were dealing with very specific size requirements.

Nowhere in the premise of Photonic has it ever been the intent to force-feed custom sizes to users: specific widths vary by theme styling, and Photonic does not control (or intend to control) it. Note that Photonic supports 6 other providers (Flickr, SmugMug, Google Photos, Picasa, Zenfolio and Instagram), and adapts seamlessly to all sorts of sizes:

• Flickr: Square thumbs: 75×75, 150×150, Rectangular with a long side 100, 240, 320, 500, 640, 800, 1024, 1600, 2048
• SmugMug: Square: 100, 150, Rectangular: 40, 600, 800, 1024, 1280, 1600, 2048, 2560, 3840, 5120
• Picasa: 32, 48, 64, 72, 94, 104, 110, 128, 144, 150, 160, 200, 220, 288, 320, 400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600
• Google Photos: anything from 1 to 16383
• Zenfolio: Square: 60, Rectangular: 80, 120, 400, 580, 800, 1100, 1550
• Instagram: Square: 306, 320, 612, 640, 1080 Rectangular: 1080

The point is, there is no standardization whatsoever among photo thumbnail sizes, and my introducing a custom set of sizes will make things even messier. If you are looking for something to define custom sizes for a WP gallery, rather than looking for a plugin to define them, you should consider using JetPack Photon to get the sizes. Here is a fun fact from JetPack’s documentation:

We will “upscale” an image in some circumstances. However if your original image is smaller than the upscale limit and you request to make it larger than the upscale limit, we will serve you the original unaltered image (Note: 2000px is the upscale limit for all images except GIFs, which is 1000px). Upscaled images are usually of poor quality and we want to avoid sending large pixelated images.

… Again, this is what I have been telling you right from my first post – upscaling is generally undesirable.

I have yet to find a device with a 400px resolution (you mentioned this above at some point). I actually created a small program and I am keeping track of them, here: https://tripleplay.itfusion.ro/viewport.htm

I used 400 as an example because that was the width of your original image. How about 375 (iPhone 6/6S, 7, 8, X, XS), or 414 (iPhone 6 Plus, 7 Plus, 8 Plus, XR, XS Max), 412 (Nexus 5X, Nexus 6P, Google Pixel, XL, 2, 2 XL, 3, 3 XL) or 393 (RedMi Note 5)? The calculations and limitations I have cited in my post above hold for these widths too, if your maximum width is 210px.

Using your custom css seems to do the trick, I think this is the best scenario we achieved so far

Based on all the posts above, it is quite obvious that you and I differ very fundamentally with regards to what we think should happen with responsive behaviour. So let us just take this best scenario and keep moving.

I am marking this thread resolved, unless you think there is something else that needs to be fixed with your site.