Recent
Categories
View Replies (13)

Header image is sometimes not displayed in correct size

  1. Bug
0
Votes
Undo
  1. stebue@gmail.com
    stebue@gmail.com
  2. Sherlock Holmes
  3. Commercial Templates
  4. Monday, 01 May 2017
  5.  Subscribe via email
Hi

I'm using the Caitlin template, but have troubles with the header image. When I load the home page the first time, I sometimes see that the header image is displayed in wrong size (zoomed). After reloading the page it is always displayed correctly. Please refer to the attached screenshots.

I checked the html code and found for the wrong header:
<div id="vegas-slideshow" style="height: 411px;" class="vegas-container">...

Whereas for the correct header:
<div id="vegas-slideshow" style="height: 343px;" class="vegas-container">...

So it seems that the height is sometimes not correctly initalized to 343px as defined in the template (image height 275px + hornav 68px).

Do you have a solution to overcome this?

Moreover, the roules how to calculate the best fiting header image size are completely unclear to me. I intend to display a header image of 1024x275px. By trial and error I found that I can use an image of 2395x477px and a reasonable image section will be displayed. But it's really confusing as I don't see clear roules behind how the displayed image section is calculated.
  1. header, image, j51_nadia
Responses (13)
stebue@gmail.com
stebue@gmail.com
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you, Ciarán

The solution is really phantastic, I love it! Now I have full control over the displayed header image size. And the best thing is, the header image gets zoomed in mobile mode so that always the full header image is displayed.

Thanks again and kind regards
Stefan
  1. more than a month ago
  2. Commercial Templates
  3. # 1
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

Your header slideshow has been replaced with a static image as requested.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 2
stebue@gmail.com
stebue@gmail.com
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciarán

I upgraded your access rights, so you should now be able to do the necessary changes.

Cheers,
Stefan
  1. more than a month ago
  2. Commercial Templates
  3. # 3
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Stefan

Could I ask you to allow us access to your template editor (Extensions -> Templates -> Templates -> [YourTemplate]) so we can make the needed changes. If you wish to revert back to the original template after, you simply need to install the original template install file via your extensions manager.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 4
stebue@gmail.com
stebue@gmail.com
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciarán

The site is hosted, now: http://www2.ccd.ch/

You have already access rights to this page, please refer to [#24927]: hornav menue gets blanked out on samsung tablet

What are the consequences, when you remove the slideshow option? Am I able to undo the changes if I'm not happy with the solution or am I able to redo the changes in case of a template update?

Cheers,
Stefan
  1. more than a month ago
  2. Commercial Templates
  3. # 5
stebue@gmail.com
stebue@gmail.com
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciarán

This is a good idea. I'll get back when the site is hosted.

Stefan
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Stefan

I'd suggest removing the slideshow option from your template and use a static image which would resolve your issues however we would need to access to a live version of your site to do so.

May I suggest getting back to us once your site is hosted and we will make these amendments for you.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 7
stebue@gmail.com
stebue@gmail.com
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciarán

The header is just a single image.
Does it help if I store the page as full .html, pack it in a zip and upload it here?

Stefan
  1. more than a month ago
  2. Commercial Templates
  3. # 8
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Stefan

It is hard to say for sure without having a live version of the issue. Are you just displaying a single image for the header or a multi image slideshow?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 9
stebue@gmail.com
stebue@gmail.com
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciarán

You're a good shooter in the dark. Yes, this works !

However, I have the strong feeling that this only cures the visible symptoms but does not really resolve the root cause. Is there a tutorial describing more in detail the correct setup of the header image? I'm asking because of this:

I don't use a logo. To define the header hight I use in the Custom CSS of the template:

#header {
height: 275px;
}

By trial and error I found out that a header image has to have a minimal height of 310px. If not, the header image gets zoomed out (always, not only at first load). Why does a header image has to be higher (310px) than the defined header height (275px) ? Is there a way to calculate this margin?

I also found out that despite of the definition header height 275px in fact the height of the effective display is only 247px. Where has the difference of 28px gone? How can I calculate or influence this?

This all is quite confusing to me an I would be more than happy to get the neccessary information to understand this.

Thanks,
Stefan
  1. more than a month ago
  2. Commercial Templates
  3. # 10
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Stefan

A bit of a shot in the dark but to amend try adding the following to the Custom CSS field of your templates parameters..

.vegas-container {

    height: 411px !important;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 11
stebue@gmail.com
stebue@gmail.com
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

Unfortunately the site is not yet live, its running locally with XAMPP. Would you linke me to send an Akeeba backup file through wetransfer?

Cheers,
Stefan
  1. more than a month ago
  2. Commercial Templates
  3. # 12
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Would you have a URL to an example of this issue so we can examine this further?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 13
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.