Announcement

#1 2022-04-25 17:50:31

rajdude
Member
2021-05-18
71

Responsive photo in jumbotron problem

Hello,

Is it possible to have a responsive photo inside the jumbotron?

I mean, I would like to put a small logo image in the jumbotron, but have the logo image resize according to the width of the viewport. Also, it would be nicer if the jumbotron's height also resizes.

This is needed when people visit my Piwigo website on a cellphone. By default, the logo image size (and jumbotron's height) remains static, and is too large for a cellphone screen.

I have been trying different things for a couple of days, but have not made much progress. Most of the stuff I have done is posted in the second page of this thread
https://piwigo.org/forum/viewtopic.php?id=32031
Not been getting anywhere in that thread, so I am opening a new thread in this troubleshooting section.

Your tips / advice is highly appreciated!

-Raj


Piwigo URL: https://rajdude.com/photos


Environment

    Piwigo 12.2.0 Check for upgrade
    Operating system: Linux
    PHP: 7.3.33 (Show info) [2022-04-25 11:48:47]
    MySQL: 5.5.5-10.3.23-MariaDB-cll-lve [2022-04-25 11:48:47]
    Graphics Library: ImageMagick 7.1.0-20
    Cache size 33.46 Mo   calculated 1 month ago Refresh

Activated plugin list 8

    Additional Pages
    Advanced Menu Manager
    Batch Downloader
    Extended Description
    gdThumb
    Grum Plugins Classes.3
    LocalFiles Editor
    VideoJS

Offline

 

#2 2022-04-26 10:55:18

gueba
Member
2021-12-31
14

Re: Responsive photo in jumbotron problem

Piwigo URL: https://rajdude.com/photos looks ok for me.

Guess, you did the job!

Offline

 

#3 2022-04-26 16:07:18

rajdude
Member
2021-05-18
71

Re: Responsive photo in jumbotron problem

Yeah, I managed to find a way to solve most of my problems myself :-)

However, I still have not found a way to position my logo to the left of the page, properly padded to align with the images, so I just let it float in the middle of the jumbotron.

Does anyone know how to do that, padding? But I am not sure if padding is responsive.


BTW, for future reference, here is what I did to accomplish my particular "look", which I am happy to say is fully responsive:

Piwigo admin > Configuration > Options > Page banner

nothing (leave it totally blank)
This interferes with the custom CSS in the next step

Piwigo admin > Configuration > Themes > Bootstrap Darkroom Configuration > Custom CSS

div.container-fluid {max-width:80%;}
.navbar {font-size:.9rem;}
.navbar-brand {font-size:.9rem;}
.img-fluid {max-width:22%;}
.navbar {padding: 0rem 1rem;}

.jumbotron{
   background-image: url("https://rajdude.com/photos/custom/PhotosbyRajLogo2.png");
   background-repeat: no-repeat;
   background-color: #B6B6B6;
   background-size: 30%;
   background-position: center;
   padding-top: 3%;
   padding-bottom: 3%;
}

Offline

 

Board footer

Powered by FluxBB

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