In the ‘mosaic’ layout, can I limit the max width of an image?

Masonry yes, Random and Mosaic not exactly.

If you look at Photonic → Settings → Generic Options → Layouts there are 3 options of interest in this regard:

• Masonry Layout – Minimum Column Width: this tells you what the minimum allowed width for a column can be for the Masonry layout. This works effectively with the columns attribute. To quote from the documentation page:
  

• Let’s say you specify columns=’2′, and your content is 600px wide, while the minimum column width is set to 200. In this case you will be shown 2 columns, each 300px wide (inclusive of padding). Upon shrinking the window the columns will progressively narrow down, until they get to 200px wide, at which point your layout will switch to a single-column layout.
• On the other hand, if you specify columns=’auto’ and your content is 800px wide with a minimum column width of 250, you will get 3 columns approximately 267px wide. If your content shrinks down to < 750px, you will switch over to 2 columns, and so on.

In other words, the minimum column width dictates how many columns will be shown based on the width of your content.

• Random Justified Gallery – Minimum Tile height: This works for the random layout and tells you that a row should not be shorter than the stipulated height. Note that there will be some cases where you might end up with a small difference in the height, but that is because the plugin will fit images in a rectangular grid.
• Mosaic Layout – Trigger width: The mosaic layout is a bit of a grid-within-a-grid layout, so the behaviour is slightly different. The way it works is that you can specify a “trigger width”. Let’s say that your main post content is 800px wide and you have set trigger width = 200. Photonic will try not to fit more than 800/200 = 4 photos in a row. The catch, though, is that the “inner grid’s” distribution is truly random – you may get 4 images side by side, or two columns of two images each, or one column with 3 images and one with 1. Due to this you might get some photos that are much smaller, though everything will be perfectly scaled from the original. If you are using this layout, you might want to set the trigger width higher so that you get fewer images per row. I believe if you shoot for 3 images per row you will be fine.

You cannot specify individual proportions as those become a lot harder for Photonic to respect while simultaneously keeping the layout perfectly organized.

BTW, you shouldn’t need limit. As I mentioned in my other post, that attribute is specific to Zenfolio and is superseded by count.

>> Masonry Layout – Minimum Column Width

OK I read the masonry instructions, and played around with the min column width. My container has a width of 1865 px. I’ve specified columns=4, and min column width = 200, but the feed still displays three columns of images (screenshot). Shouldn’t there be four columns of images–what am I misunderstanding? Here is my shortcode:

[gallery type='instagram' count='20' more='See More Photos' layout='masonry' user_id='377106118' columns=’4′]

>> BTW, you shouldn’t need limit. As I mentioned in my other post, that attribute is specific to Zenfolio and is superseded by count.

Right. My mistake–that was a leftover from my previous testing.

I will need a URL to troubleshoot this. Also, once you provide me with that, can I respond after a few hours? I am fairly occupied with family commitments (I am on vacation currently).

Sure no problem. I’ll actually need a day or so to push this to an online server. When I do so though, I’ll have to send you login credentials. Do you have a secure place I can send them?

OK I have a URL and WordPress admin user for you. Where can I send the details?

Hi,
I don’t need login credentials; don’t you have a front-facing URL? I just need to see the plugin in action on a page. Also note that it is against forum rules to provide email addresses here.

>> don’t you have a front-facing URL?

No, not yet. The site is still under construction.

>> Also note that it is against forum rules to provide email addresses here.

Do you have a contact form anywhere that I can use to submit the login information?

Do you have a contact form anywhere that I can use to submit the login information?

Sorry, I don’t. All my support is via the forums here, and I use the announcements section of my website only to announce new versions of the plugin.

Can you experiment with a few more combinations? E.g. what happens if you specify a minimum width of 150px and the number of columns as 6? Since in a different post you mentioned that you were using Visual Composer, is it possible that you have given a different column setting there? This is a fairly ironclad feature, and the only reason it would misbehave is if there is a conflicting plugin playing spoilsport.

>> Sorry, I don’t. All my support is via the forums here, and I use the announcements section of my website only to announce new versions of the plugin.

OK. I’m not sure I understand the rationale behind WordPress’s rules on that, or on the ‘No asking for website access’ rule. But oh well.

>> what happens if you specify a minimum width of 150px and the number of columns as 6?

I tried that with the masonry layout, and achieved the exact same result–only 3 columns are displayed.

>> Since in a different post you mentioned that you were using Visual Composer, is it possible that you have given a different column setting there?

I have this shortcode added to a single-column, full-width Visual Composer element (screenshot).

Thoughts? There are no JS errors, or PHP errors.

• This reply was modified 5 years, 11 months ago by cag8f.

Does the behaviour change if you resize your screen after the gallery has loaded?

No. As I resize the screen, the images get proportionately smaller, but it remains at the same consistent 3-column layout.

Is there any change if you view your site on a really small screen, like that of a mobile? Do your photos show up in a single column?

At about 500px it jumps from 3 columns to 2, and stays that way.

I am gradually reaching a point where I cannot offer any more suggestions without a URL.

The fact that the resizing is causing the number of columns to change is promising – it means that the script is working fine. So it is probably calculating the column count incorrectly. You mentioned that there are no JS / PHP errors, so I am guessing you are familiar with Chrome’s Inspector. If so, please take a look at the element that looks similar to this:

<div id="photonic-instagram-stream-1-container" class="title-display-tooltip photonic-level-1-container photonic-masonry-layout photonic-thumbnail-effect-none" data-photonic-stream-end="0" data-photonic-stream-total="0" data-photonic-stream-provider="instagram" data-photonic-stream-query="columns=4&layout=masonry&more=&display=in-page&panel=&filter=&filter_type=include&fx=slide&timeout=4000&speed=1000&pause=1&strip-style=thumbs&controls=show&popup=hide&caption=title&thumb_size=75&main_size=largest&tile_size=largest&count=1000&distance=1000&media=all&type=instagram&style=default&id=284" data-photonic-gallery-columns="4" style="column-count: 4;">

Can you tell me what you see corresponding to data-photonic-gallery-columns in this element? Do you see the tag at all?

>> Can you tell me what you see corresponding to data-photonic-gallery-columns in this element?

6 is the value for data-photonic-gallery-columns. But column-count is set to 3. Screenshot

>> so I am guessing you are familiar with Chrome’s Inspector.

I am indeed familiar with it.