|
Replies:
6
-
Pages:
1
-
Last Post:
29 Sep 25, 15:21
Last Post By: Laza
|
|
|
Posts:
2
Registered:
25-Sep-2025
|
|
|
|
Hero Image not Responsive on Mobile Devices
Posted:
25 Sep 25, 13:10
|
|
|
|
|
|
Hi everyone, is it correct that the hero image isn't responsive on mobile devices?
If so, is there any way to adjust this using CSS?
I've tried integrating the hero image into the header and replacing the hero banner with a minimally sized gray bar, but that doesn't look ideal either. I've seen in the forum that some people have tried to hide the hero banner completely, but that doesn't seem to work because of the buttons.
Are there any ideas for a better solution?
I just need a image gallery with no subfolders and no titles, with a responsive header image with the buttons "Start Slideshow" and "Download All Images."
It might also be cool if you could place an HTML map over the header image with links to different websites, so you could create a banner with different sponsors linked to the sponsor websites.
greetings
xneo
|
|
|
Posts:
1,511
Registered:
6-Sep-2005
|
|
|
|
Re: Hero Image not Responsive on Mobile Devices
Posted:
25 Sep 25, 14:21
in response to: xneo
|
|
|
|
I must admit that I couldn't figure out what your goal was.
The hero image is a background image that fills the available space. It's not for information. On mobile devices, it's a square-ish image (cropped from the theme image), while on desktops, it's a wide stripe. This is how it is responsive.
In the Settings / Tiger /. Site / Top bar / Above top bar box, you can add custom HTML content. You can place the image in a folder called "res" (in the album's top-level folder), and you can refer to it as src="${resPath}/imagename.png"
|
|
|
Posts:
8,336
Registered:
31-Jan-2006
|
|
|
|
Re: Hero Image not Responsive on Mobile Devices
Posted:
25 Sep 25, 14:34
in response to: xneo
|
|
|
|
You've run into a problem of basic geometry. Consider a title bar that's 1920x340px, showing a theme image in its entirety, with no cropping and no distortion. So, it's got an aspect ratio of 6:1. As the viewport gets smaller, the theme image, to avoid cropping, must get narrower. But to avoid distortion, it must also get shorter. By the time you get to an iPhone 12, whose screen is only 390px wide, the image is now only 65px tall. Hey, presto, there's no longer enough room for the album title, the navigation icons, and whatever else the skin plants in that title bar.
Just as an experiment, install my Neptune skin. I'm not suggesting you use it, because it doesn't meet your other criteria (slideshow is started from the first slide, not from the title bar, and there's no "download all images" option), but it has an option that will demonstrate what I'm talking about. Plant a dozen images in it, give it an album title like ""Uncropped Theme," and maybe a description. Now go to Neptune > Title Bar > Theme Image and choose Uncropped theme image. Make the album.
On a regular PC, try altering the width of the browser window, and you'll see that the image is always fully visible, but of course, it's also getting shorter. When the title and description finally spill out of the image, hit F5 - the skin makes its adjustment only upon page loading, so you have to do a refresh to trigger it. Or just view page on your phone.
There is no CSS "quick fix" to do this. The theme image is normally a background image, and those are not responsive. You can't move an image from "background" to "foreground" with just CSS, and the skin isn't built to handle the image in the foreground, anyway.
|
|
|
Posts:
8,336
Registered:
31-Jan-2006
|
|
|
|
Re: Hero Image not Responsive on Mobile Devices
Posted:
25 Sep 25, 14:36
in response to: Laza
|
|
|
I must admit that I couldn't figure out what your goal was.
I was composing my reply while you were doing so. But yes, it's the classic "I always want to see the whole theme image, with no cropping. But I want it to remain just as big!" There's no magic. 
ETA: Check out the Neptune solution (which I use in several of my skins). It's not elegant, but it gets the job done. But your title bars usually have a lot more going on in them than mine do! |
|
|
Posts:
2
Registered:
25-Sep-2025
|
|
|
|
Re: Hero Image not Responsive on Mobile Devices
Posted:
28 Sep 25, 13:56
in response to: xneo
|
|
|
|
|
Hello guys, thank you for the quick response and your help.
Sorry for getting back to you so late, but had to test and prepare a few things.
I created 4 test albums to illustrate my problem.
Test 1 https://jalbum-test1.lima.zone/
has a hero image, which unfortunately isn't responsive on mobile devices, as only the cover image is responsive.
Test 2 https://jalbum-test2.lima.zone/
has a hidden hero image, and it is mobile responsive because it's all in the cover logo, but I don't like the button arrangement (Download All & Start Slideshow). If the buttons could be arranged in a row like in the attached images, then I would have the perfect solution for me. However, one small thing that bothers me here is that the cover image doesn't extend all the way to the edge on mobile devices, like the gray bar of the hero banner.
Test 3 https://jalbum-test3.lima.zone/
Everything is hidden here, except the hero baner with buttons, and I was wondering whether I should simply create the cover part in WordPress the way I want it and then just embed the image gallery as an iFrame.
But the same things bother me here as in Test 2.
Test 4 https://jalbum-test4.lima.zone/
@JeffTucker, yes you understand my problem, and the Neptune theme is basically exactly what I was looking for. I just have to admit that I like the style of the Tiger theme better, and what bothers me here is that I can't limit the width of the cover image. I have a 32" UWQHD screen, and the logo is obviously huge at full width compared to the image gallery, but it looks pretty good in FHD. But in mobile view, it would be nice to see three images in a row next to each other instead of one, like in tests 1-3, or can this be configured somewhere in the settings? |
|
|
Posts:
8,336
Registered:
31-Jan-2006
|
|
|
|
Re: Hero Image not Responsive on Mobile Devices
Posted:
28 Sep 25, 15:41
in response to: xneo
|
|
|
>
Test 2 https://jalbum-test2.lima.zone/
has a hidden hero image, and it is mobile responsive because it's all in the cover logo, but I don't like the button arrangement (Download All & Start Slideshow). If the buttons could be arranged in a row like in the attached images, then I would have the perfect solution for me. However, one small thing that bothers me here is that the cover image doesn't extend all the way to the edge on mobile devices, like the gray bar of the hero banner.
Getting rid of the side padding on the logo image is the easy part. In Tiger > Advanced > Custom code > CSS, enter: .top-bar .cont {padding: 0px;}
I"ll leave the button rearrangement to Laza - at the moment, I'm on a small laptop in a rented beach house, which makes this kind of tinkering difficult.
The tougher problem is trying to make the two lower boxes become clickable links to your sponsor sites, since the entire thing is just an image. Maybe possible with an invisible overlay, but tough to tame.
Probably easier to write the HTML and CSS to create your three-box layout, then plant all of it in Tiger's "Above top bar" content section, and add the CSS for it in the Advanced section. |
|
|
Posts:
1,511
Registered:
6-Sep-2005
|
|
|
|
Re: Hero Image not Responsive on Mobile Devices
Posted:
29 Sep 25, 15:19
in response to: xneo
|
|
|
The hero background image was never intended to be a responsive image container.
You can choose either the top bar or the custom section to place the sponsor logos.
You can also rearrange the hero and the top bar sections:
.hero { order: -1; }
.top-bar { order: 0; }
You can also try including these logos in the folder description.
Edited by: Laza on 29 Sep 2025, 15:21 |
|
|
|
Legend
|
|
Forum admins
|
|
Helpful Answer
|
|
Correct Answer
|
|
