Piwigo.org

homdax · 2024-03-20 20:56:31

Hello
Using Bootstrap Darkroom - Cyborg. https://homeworldshots.net

It appears that regardless of the layout option chosen, the number of albums displayed in a row remains constant at four when the browser viewport is around 1800 pixels or wider. Despite resizing for wider viewports, the album pictures never increase to five columns; instead, they adjust in size.
However, when the viewport is reduced below 1800 pixels, the albums display in three columns.

I'm interested in locating the specific setting or function in the code responsible for this behavior, as I aim to have three columns in three rows, displaying a total of nine albums on the front page in a 3x3 layout, when I so want.

This, down to approximately 1700 pixels, where it should have the same behavior as now, reducing to 3 columns or even to 2 or 1 columns the more you reduce the browser width.

Can I have some input on where this code is located?

Last edited by homdax (2024-03-20 20:58:18)

OHappyDay · 2024-03-20 23:37:27

By the way: I receive two lines of messages when visiting your site:

Notice: Undefined offset: 1 in /home/conramcom/domains/homeworldshots.net/public_html/plugins/BanIP/main.inc.php on line 55

Notice: Undefined offset: 2 in /home/conramcom/domains/homeworldshots.net/public_html/plugins/BanIP/main.inc.php on line 55

ddtddt · 2024-03-21 06:51:08

Hi :-)

OHappyDay wrote:
By the way: I receive two lines of messages when visiting your site:

Notice: Undefined offset: 1 in /home/conramcom/domains/homeworldshots.net/public_html/plugins/BanIP/main.inc.php on line 55

Notice: Undefined offset: 2 in /home/conramcom/domains/homeworldshots.net/public_html/plugins/BanIP/main.inc.php on line 55

you're not IPV4 ?

homdax · 2024-03-21 08:14:40

OHappyDay wrote:
By the way: I receive two lines of messages when visiting your site:

Notice: Undefined offset: 1 in /home/conramcom/domains/homeworldshots.net/public_html/plugins/BanIP/main.inc.php on line 55

Notice: Undefined offset: 2 in /home/conramcom/domains/homeworldshots.net/public_html/plugins/BanIP/main.inc.php on line 55

I do not know why, not in to how that plugin works, I can just as well use htaccess, I have only ever used it once, so I have disabled it.

In any case, if someone can help me with the original question... ?

OHappyDay · 2024-03-21 11:59:58

I am on IPv4 and also IPv6. At least this (https://test-ipv6.com/) shows me that I have both types of IP addresses.

To block IP addresses (and ranges of) I use .htaccess in the root folder of piwigo:

<RequireAll>
Require all granted
Require not ip aa.bb.cc.dd (to whatever level you want to deny access)
</RequireAll>

Last edited by OHappyDay (2024-03-21 12:03:42)

homdax · 2024-03-21 12:10:22

So if we could get back on topic and address the original question.

OHappyDay · 2024-03-21 13:50:54

I checked the behaviour:

with varying browser sizes the number of albums per row changes from 2 (small width) to 6 (full screen 1920 px wide). So it seems that it works as intended.

homdax · 2024-03-21 14:14:10

OHappyDay wrote:
I checked the behaviour:

with varying browser sizes the number of albums per row changes from 2 (small width) to 6 (full screen 1920 px wide). So it seems that it works as intended.

Which is NOT what I want. I want 3 x 3 grid from about 1700 pixels and up. 3 columns.

Did you read the first post?

Last edited by homdax (2024-03-21 14:14:58)

OHappyDay · 2024-03-21 14:28:03

Yes, I did, but was locked in my own expectations :-( It is indeed not what you want.

As far as I can see the behaviour is controlled by CSS (inspected via F12 in the browser) located in z3hdu1.css

display: flex;
flex-wrap: wrap;

I think this is causing the flexible layout depending on screensize.

Maybe using a grid layout (see https://css-tricks.com/snippets/css/com … uide-grid/ or https://www.w3schools.com/css/css_grid.asp or other resources) may help you.

I played with the developer tools in the browser and found this:

display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;

creates a 3x3 grid. The size of the individual boxes are not optimal so you have to find the correct settings.

Last edited by OHappyDay (2024-03-21 14:39:18)

homdax · 2024-03-21 15:09:53

OHappyDay wrote:
Yes, I did, but was locked in my own expectations :-( It is indeed not what you want.

As far as I can see the behaviour is controlled by CSS (inspected via F12 in the browser) located in z3hdu1.css

display: flex;
flex-wrap: wrap;

Thanks and sorry if I was a bit harsh before.

I think you nailed it. It will require some testing and coding. That css is also located in the /_data folder, so while browsing the css files for the theme I did obviously not find anything related to grid.

Katryne · 2024-03-21 15:46:46

Bootstrap themes are based on the flex-box system. If you do not want this variable display of elements, you might have to look for another theme.

homdax · 2024-03-22 08:25:26

Katryne wrote:
Bootstrap themes are based on the flex-box system. If you do not want this variable display of elements, you might have to look for another theme.

I do not think there is any other theme that may be relevant. Not with the look and layout i currently have and carefully styled over quite a long time.

Then again, I might throw some money at an Indian coder to fix, update and rewrite. I am quite lost pondering what Piwigo Team have in mind for future development.

Hmmm .. I wonder...

hannah · 2024-03-25 08:39:40

Hi homdax,

The theme works as intended, I see 6 columns my screen ;)

However to fix them at 3 columns they way you want, what you can do is over a certain width, fix the width of the container and also adjust the size of columns.

.section-categories #content{
max-width:1500px;
margin:auto;
}

.section-categories #content.col-xxl-2,
.section-categories #content.col-xl-3{
flex: 0 0 33.333333%;
max-width: 33.333333%;
}

Just be aware the could impact the display of columns on other pages :)

Hope this helps

homdax · 2024-03-25 09:13:55

I will try that.

Was pondering creating new css definitions and new templates for "frontpage" only, but perhaps your solution might work....

I am aware it will impact other pages as well if I do not create new templates, but that is ok, since the amount of sub albums is not great...

Last edited by homdax (2024-03-25 09:15:13)

homdax · 2024-03-27 09:27:20

hannah wrote:
Hi homdax,

The theme works as intended, I see 6 columns my screen ;)

However to fix them at 3 columns they way you want, what you can do is over a certain width, fix the width of the container and also adjust the size of columns.

.section-categories #content{
max-width:1500px;
margin:auto;
}

.section-categories #content.col-xxl-2,
.section-categories #content.col-xl-3{
flex: 0 0 33.333333%;
max-width: 33.333333%;
}

Just be aware the could impact the display of columns on other pages :)

Hope this helps

Hannah, in what css file?

Piwigo.org

Announcement

#1 2024-03-20 20:56:31

Bootstrap Darkroom - adjust number of albums on index

#2 2024-03-20 23:37:27

Re: Bootstrap Darkroom - adjust number of albums on index

#3 2024-03-21 06:51:08

Re: Bootstrap Darkroom - adjust number of albums on index

OHappyDay wrote:

#4 2024-03-21 08:14:40

Re: Bootstrap Darkroom - adjust number of albums on index

OHappyDay wrote:

#5 2024-03-21 11:59:58

Re: Bootstrap Darkroom - adjust number of albums on index

#6 2024-03-21 12:10:22

Re: Bootstrap Darkroom - adjust number of albums on index

#7 2024-03-21 13:50:54

Re: Bootstrap Darkroom - adjust number of albums on index

#8 2024-03-21 14:14:10

Re: Bootstrap Darkroom - adjust number of albums on index

OHappyDay wrote:

#9 2024-03-21 14:28:03

Re: Bootstrap Darkroom - adjust number of albums on index

#10 2024-03-21 15:09:53

Re: Bootstrap Darkroom - adjust number of albums on index

OHappyDay wrote:

#11 2024-03-21 15:46:46

Re: Bootstrap Darkroom - adjust number of albums on index

#12 2024-03-22 08:25:26

Re: Bootstrap Darkroom - adjust number of albums on index

Katryne wrote:

#13 2024-03-25 08:39:40

Re: Bootstrap Darkroom - adjust number of albums on index

#14 2024-03-25 09:13:55

Re: Bootstrap Darkroom - adjust number of albums on index

#15 2024-03-27 09:27:20

Re: Bootstrap Darkroom - adjust number of albums on index

hannah wrote:

Board footer