🌍
English
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
Piwigo URL: https://rajdude.com/photos looks ok for me.
Guess, you did the job!
Offline
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