Announcement

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

homdax
Member
Sweden
2015-02-02
312

Bootstrap Darkroom - adjust number of albums on index

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)

Offline

 

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

OHappyDay
Member
2023-02-08
95

Re: Bootstrap Darkroom - adjust number of albums on index

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

Offline

 

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

ddtddt
Piwigo Team
Quetigny - France
2007-07-27
7235

Re: Bootstrap Darkroom - adjust number of albums on index

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 ?


You love Piwigo so don't hesitate to participate, learn more on the "Contribute to Piwigo" page. If you don't have much time for contribution, you can also help the project with a donation.

Offline

 

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

homdax
Member
Sweden
2015-02-02
312

Re: Bootstrap Darkroom - adjust number of albums on index

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... ?

Offline

 

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

OHappyDay
Member
2023-02-08
95

Re: Bootstrap Darkroom - adjust number of albums on index

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)

Offline

 

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

homdax
Member
Sweden
2015-02-02
312

Re: Bootstrap Darkroom - adjust number of albums on index

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

Offline

 

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

OHappyDay
Member
2023-02-08
95

Re: Bootstrap Darkroom - adjust number of albums on index

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.

Offline

 

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

homdax
Member
Sweden
2015-02-02
312

Re: Bootstrap Darkroom - adjust number of albums on index

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)

Offline

 

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

OHappyDay
Member
2023-02-08
95

Re: Bootstrap Darkroom - adjust number of albums on index

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)

Offline

 

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

homdax
Member
Sweden
2015-02-02
312

Re: Bootstrap Darkroom - adjust number of albums on index

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.

Offline

 

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

Katryne
Member
2016-12-03
409

Re: Bootstrap Darkroom - adjust number of albums on index

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.


https://album.chauvigne.info/ v.13.8.0 - https://balades.comoni.org/ v.14.5.0
Système d'exploitation: Linux - Hébergeur 1&1-Ionos PHP: 8.1.29 - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Offline

 

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

homdax
Member
Sweden
2015-02-02
312

Re: Bootstrap Darkroom - adjust number of albums on index

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...

Offline

 

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

hannah
Piwigo Team
2019-04-24
60

Re: Bootstrap Darkroom - adjust number of albums on index

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

Offline

 

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

homdax
Member
Sweden
2015-02-02
312

Re: Bootstrap Darkroom - adjust number of albums on index

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)

Offline

 

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

homdax
Member
Sweden
2015-02-02
312

Re: Bootstrap Darkroom - adjust number of albums on index

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?

Offline

 

Board footer

Powered by FluxBB

github twitter newsletter Donate Piwigo.org © 2002-2024 · Contact