Album tiles show full widht in masonry layout when in tabbed content

The way Photonic works is that after it has finished fetching all images it calculates the layout and displays the photos. But for the layout calculation to happen the page has to be visible (it relies on the available viewport). In your case what is happening is that your tab is loading the gallery behind the scenes, when its viewport is not visible, so Photonic tries to use the full width. When you have any activity that triggers a window resize after showing the gallery once, the layout engine is retriggered and things show up nicely.

You have two options around this:

1. You can try to have the tab not preload the gallery. This way the gallery will be loaded only when you click on the tab and things will show up correctly the first time. This will require your tab plugin to have a capability to trigger content-loading upon clicking. I have seen tab plugins in the past allow this, but I cannot recall one.
2. If your tab plugin doesn’t support the above, see if you can add custom JavaScript calls upon clicking a tab. If you can, you will need to add this to trigger whenever the “Fotos” tab is clicked:

   var event = document.createEvent('HTMLEvents');
   event.initEvent('resize', true, false);
   el.dispatchEvent(event);

Thanks for helping! You are very attentive with Photonic support.
My tab plugin has an option “Reload on click”. But the effect on the Photonic layouts remain the same, even if activated. As written above I tried several other tab plugins, even new Gutenberg blocks: all show the same behavior with Photonic.
Your second solution sounds interesting: but where do I add this JS code? My tab plugin allows for custom CSS, but nor for JavaScript.

Your second solution sounds interesting: but where do I add this JS code? My tab plugin allows for custom CSS, but nor for JavaScript.

Maybe your tab plugin’s authors would be able to help you with this.

But it looks like you were able to find a spot in your theme to do this. I however realized that I had missed one line of code. I gave you this:

var event = document.createEvent('HTMLEvents');
event.initEvent('resize', true, false);
el.dispatchEvent(event);

You need one additional line at the beginning, so the correct code is:

var el = window; 
var event = document.createEvent('HTMLEvents');
event.initEvent('resize', true, false);
el.dispatchEvent(event);

Yess!
I added your code to jquery.posttabs.js, which is one of the files of the tab plugin. Seems like I guessed the right position to insert the code. Thanks for your help.