Title: thumbs size
Last modified: December 5, 2018

---

# thumbs size

 *  Resolved [bg17aw](https://wordpress.org/support/users/bg17aw/)
 * (@bg17aw)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/thumbs-size/)
 * Hello,
 * I am only using the plugin with hosted pictures (WP native galleries, from Media
   Library).
 * Whem I am displaying the thumbs at 150×150, I think they are too small.
    When
   I am displaying the thumbs at 300×300, I think they are too big.
 * However, I’ve seen another approach here: [http://www.newboard.ro/panouri-mdf-lemn-ceramica](http://www.newboard.ro/panouri-mdf-lemn-ceramica)
 * where thumbs are about 210×210 and adjusted in size based on the window size.
   Can we duplicate that behavior? Otherwise, having a fixed-size thumb is never
   a good idea, for example on mobile, a 150×150 thumb will not fill the available
   space, as you can see here:
 * > [View post on imgur.com](https://imgur.com/a/z86XACF)
 * I tried setting the max number of columns to 5, but in that case, the plugin 
   would keep on trying to display 5 columns even on mobile, which obviously is 
   not a good idea.
 * Any solutions? Thank you
 * PS: also it would be nice to have a zoom icon on hover on thumbs (same example
   link can be observed)
    -  This topic was modified 7 years, 6 months ago by [bg17aw](https://wordpress.org/support/users/bg17aw/).
    -  This topic was modified 7 years, 6 months ago by [bg17aw](https://wordpress.org/support/users/bg17aw/).

Viewing 15 replies - 1 through 15 (of 17 total)

1 [2](https://wordpress.org/support/topic/thumbs-size/page/2/?output_format=md) 
[→](https://wordpress.org/support/topic/thumbs-size/page/2/?output_format=md)

 *  Plugin Author [Sayontan Sinha](https://wordpress.org/support/users/sayontan/)
 * (@sayontan)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/thumbs-size/#post-10950178)
 * 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](https://aquoid.com/plugins/photonic/layouts/).
      Try playing around with the screen sizes. If I am using the `square` or `circle`
      layouts, I always set `columns='auto'` for responsive behaviour.
 *  Thread Starter [bg17aw](https://wordpress.org/support/users/bg17aw/)
 * (@bg17aw)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/thumbs-size/#post-10954950)
 * 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](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 ([http://www.newboard.ro/panouri-mdf-lemn-ceramica](http://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 7 years, 6 months ago by [bg17aw](https://wordpress.org/support/users/bg17aw/).
 *  Plugin Author [Sayontan Sinha](https://wordpress.org/support/users/sayontan/)
 * (@sayontan)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/thumbs-size/#post-10955380)
 * > 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](https://imgur.com/ZB11L6r)
 * 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](https://aquoid.com/plugins/photonic/layouts/#masonry))
 * 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.
 *  Plugin Author [Sayontan Sinha](https://wordpress.org/support/users/sayontan/)
 * (@sayontan)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/thumbs-size/#post-10960860)
 * 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](https://aquoid.com/plugins/photonic/layouts/#masonry)
   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.
 *  Thread Starter [bg17aw](https://wordpress.org/support/users/bg17aw/)
 * (@bg17aw)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/thumbs-size/#post-10963628)
 * 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:** [http://rmv.ro/panouri-mdf-lemn-ceramica/](http://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 ([http://www.newboard.ro/panouri-mdf-lemn-ceramica/](http://www.newboard.ro/panouri-mdf-lemn-ceramica/))
 *  Thread Starter [bg17aw](https://wordpress.org/support/users/bg17aw/)
 * (@bg17aw)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/thumbs-size/#post-10963638)
 * > 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?
 *  Plugin Author [Sayontan Sinha](https://wordpress.org/support/users/sayontan/)
 * (@sayontan)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/thumbs-size/#post-10963728)
 * > 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](https://imgur.com/HR34NEC)
 * And this is for 480px:
 * > [View post on imgur.com](https://imgur.com/goXVF1X)
 * 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.
 *  Plugin Author [Sayontan Sinha](https://wordpress.org/support/users/sayontan/)
 * (@sayontan)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/thumbs-size/#post-10964059)
 * > – 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).
 *  Thread Starter [bg17aw](https://wordpress.org/support/users/bg17aw/)
 * (@bg17aw)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/thumbs-size/#post-10964647)
 * > 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… [http://rmv.ro/panouri-mdf-lemn-ceramica/](http://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)
 *  Plugin Author [Sayontan Sinha](https://wordpress.org/support/users/sayontan/)
 * (@sayontan)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/thumbs-size/#post-10965468)
 * > I put column=4 but still getting the same issue in the second tab, weird… [http://rmv.ro/panouri-mdf-lemn-ceramica/](http://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.
 *  Thread Starter [bg17aw](https://wordpress.org/support/users/bg17aw/)
 * (@bg17aw)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/thumbs-size/#post-10965585)
 * 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.
 *  Plugin Author [Sayontan Sinha](https://wordpress.org/support/users/sayontan/)
 * (@sayontan)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/thumbs-size/#post-10966676)
 * > 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:
    5.     ```
           @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; }
           ```
       
 *  Thread Starter [bg17aw](https://wordpress.org/support/users/bg17aw/)
 * (@bg17aw)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/thumbs-size/#post-10967671)
 * 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?
 *  Thread Starter [bg17aw](https://wordpress.org/support/users/bg17aw/)
 * (@bg17aw)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/thumbs-size/#post-10967754)
 * > 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: [http://tripleplay.itfusion.ro/viewport.htm](http://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 7 years, 6 months ago by [bg17aw](https://wordpress.org/support/users/bg17aw/).
 *  Plugin Author [Sayontan Sinha](https://wordpress.org/support/users/sayontan/)
 * (@sayontan)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/thumbs-size/#post-10969470)
 * > 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](https://imgur.com/ZB11L6r)
      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](https://wordpress.org/support/topic/make-150x150-square-thumb-larger/#post-10964149),
   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](https://developer.wordpress.com/docs/photon/):
 * > 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: [http://tripleplay.itfusion.ro/viewport.htm](http://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.

Viewing 15 replies - 1 through 15 (of 17 total)

1 [2](https://wordpress.org/support/topic/thumbs-size/page/2/?output_format=md) 
[→](https://wordpress.org/support/topic/thumbs-size/page/2/?output_format=md)

The topic ‘thumbs size’ is closed to new replies.

 * ![](https://ps.w.org/photonic/assets/icon.svg?rev=1972449)
 * [Photonic Gallery & Lightbox for Flickr, SmugMug & Others](https://wordpress.org/plugins/photonic/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/photonic/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/photonic/)
 * [Active Topics](https://wordpress.org/support/plugin/photonic/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/photonic/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/photonic/reviews/)

 * 17 replies
 * 2 participants
 * Last reply from: [Sayontan Sinha](https://wordpress.org/support/users/sayontan/)
 * Last activity: [7 years, 6 months ago](https://wordpress.org/support/topic/thumbs-size/page/2/#post-10970779)
 * Status: resolved