🌍
English
Hello,
I am sure this is a very basic question with a very obvious answer but can somebody tell me how to insert an image into the Hero Banner and what size that image should be?
Thanks!
Nick.
Environment
Piwigo 13.6.0 Check for upgrade
Installed on 7 October 2022, 6 months 3 weeks 5 days ago
Operating system: Linux
PHP: 8.1.18 (Show info) [2023-05-03 09:14:00]
MySQL: 10.6.12-MariaDB-log [2023-05-03 09:14:00]
Graphics Library: ImageMagick 7.1.0-62
Cache size 1312.81 Mo calculated 4 weeks ago Refresh
Activated plugin list 7
Community
LocalFiles Editor
OpenStreetMap
Rotate Image
Smilies Support
Take A Tour of Your Piwigo
VideoJS
Piwigo URL: https://piwigo.thecobwebs.duckdns.org
Last edited by nickO (2023-05-03 11:23:10)
Offline
Hi nickO,
you can find this directly in the theme configuration. If you look at the bootstrap darkroom settings you will find it the the Page header settings.
For the banner style you need to select Hero image, you then get an input appear to add the link to the image you wish to use in the hero banner.
Size wise we generally use an image around 2000px wide.
Hope this helps
Offline
Thank you, hannah,
Please excuse my ignorance but how do I find the link to the photo?
Thanks,
Nick.
Offline
Not a problem, you can get the image link if you right click on the image when on the picture page. You should have the option to "copy image link" or if you select "open image in new tab" you can copy the url from your browser.
Hope this helps
Offline
Wow, that was easy! Thank you, hannah! Do you have any recommendations for height in pixels?
Thanks,
Nick.
Offline
You're welcome
nickO wrote:
Do you have any recommendations for height in pixels?
As long as you choose an image that is in the landscape format the height you don't need to change the height. In Bootstrap darkroom the banner is adaptive so the image it uses will always use 100% of the width and then the height will be more or less hidden depending on your screen size and which page of your Piwigo you are on.
If the hidden section of the image is what you want displayed there are ways with CSS to reposition the background image
Offline