Individual header images for single pages - Support | Kriesi.at

Tagged: color section, custom, Farb-Sektion, header, image, pages

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
March 23, 2017 at 3:06 pm #765507
JGastmann
Participant
Hi, thanks for this great and highly customizable theme. I can do almost anything I want, but I found a restriction in header images. I couldn’t find a solution among the last 300 posts I checked, and search results like https://kriesi.at/support/topic/changing-header-image-in-individual-pages/ don’t show a solution either.

I need an image between navigation and the first text block (after_section_1). Within Enfold the area is called “main” or “av_section_1”, I think.

Different pages need different header images underneath the navigation. http://www.bafatex.com/wordpress/de/das-unternehmen/ (the /wordpress directory is used emporarily until the webspace will be redirected to it) needs another image than the home page.

Within a boxed layout on a PC Browser, the image has to fill the complete box/container width, not the complete screen width. On a smarthphone it has to be full width.

As the Enfold (Child) theme doesn’t offer this opion, I tried to achieve this with the layout element “color section” / “Farb-Sektion”. In general this is a good solution, as I can choose different images between navigation and content on every single page. But it causes size / scale problems.

My header images all have a size of 1000x250px, the maximum container width in the boxed layout is 1.080px. “Position Background” is top center (oben mittig). No matter what I do, the result is either fine either on PC or smartphone, but never both.

What I need is: Full image size 1000x250px on PC browser display, and either
a) “scale to fit” on mobile screens without empty space underneath the image or
b) “stretch to fit” on mobile screens, displaying the center of the image in full height.

When I use the setting “stretch to fit” in “background repeat” / “Hintergrund Wiederholung”, and “Custom height in pixel” at “section minimum height” / “Sektion Mindesthöhe” and I define the height with the full 250px height, it looks ok on the smartphone, where you see the horizontal middle of the image in full height. But on the PC browser it is stretched to the width of the screen, and not to the width of the box / main container. So depending on the width of the Browser the lower parts of the image are cut off, which looks bad.

When I use the setting “scale to fit”, it looks perfect on the PC browser. But on the smartphone it adapts to the screen width (which is fine) – leaving a lot of empty space underneath, as the image height is set to 250px to look good on the PC.

When I combine “scale to fit” with “no minimum height”, everything looks perfect on the smartphone. No empty space underneath the image. But on the PC browser the 1000x250px image is scaled down to 400x100px and loses its width.

What can I do to configure individual header images on different pages that fit well both on PC and mobile devices?

Thanks in advance for an answer. You can also answer in German, as I am a German.
- This topic was modified 7 years, 8 months ago by JGastmann.
March 24, 2017 at 7:07 pm #766351
Victoria
Inactive Moderator
Hey JGastmann,

Is this what you’re trying to achieve?

For this I used full screen slider with one image and set the height in custom.css:
```
#fullscreen_slider_0 .avia-slideshow-inner li {
  height: 250px;
}
```
You can also specify smaller height for mobile screens if you like.

Let us know if this was helpful.

Best regards,
Victoria
March 25, 2017 at 2:04 am #766423
JGastmann
Participant
Hi Victoria,

thank you very much for your answer and your efforts! Unfortunately it didn’t change anything. On the PC Browser everything is still fine, but if you take a look at the pages by smartphone you will see a lot of empty space underneath the header image (coming from the color section / Farb-Sektion).

I would have been surprised if it worked, because the CSS selectors fullscreen_slider_0 .avia-slideshow-inner are not part of the soucecode environment of the image on the html/php page, which looks like this on http://www.bafatex.com/wordpress/de/das-unternehmen/:

<div id=”av_section_1″ class=”avia-section main_color avia-section-no-padding avia-no-border-styling avia-full-contain avia-bg-style-scroll avia-builder-el-0 el_before_av_one_full avia-builder-el-first av-minimum-height av-minimum-height-custom container_wrap sidebar_right” style=”background-repeat: no-repeat; background-image: url(http://www.bafatex.com/wordpress/wp-content/uploads/2017/03/bg_unternehmen-1.jpg); background-attachment: scroll; background-position: top center; ” data-section-bg-repeat=”contain”><div class=”container” style=”height:250px”><main role=”main” itemprop=”mainContentOfPage” class=”template-page content av-content-small alpha units”><div class=”post-entry post-entry-type-page post-entry-257″><div class=”entry-content-wrapper clearfix”></div></div></main><!– close content main element –></div></div>

You can see the empty space underneath the image grow when you just grab the right border of the browser window with your mouse. Pull it to the left to decrease the width of the window. Do you see what happens underneath the image?

Could the solution lie in altering some of the CSS selectors above? Or a media query? Or does it have to be an “add filter” php extension to the functions.php file of the child theme? If so, it would probably be quite difficult to define images and their display formats for each single page.

Best regards
- This reply was modified 7 years, 8 months ago by JGastmann.
March 27, 2017 at 2:11 pm #767429

JGastmann
Participant

I tried

.avia-section {
min-height: 250px !important;
}

with this and all other classes from the html / CSS code – no effect.

At https://kriesi.at/support/topic/spacing-between-sections/ I see that someone who uses enfold at http://marqueeroofrollers.co.uk/ had the same problem (like many others), and in that case the solution was:

.page-id-734 #av_section_1 .hr {
margin-top: 0 !important;
}
.page-id-734 #av_section_1 .content {
padding-top: 0 !important;
}
.page-id-734 #after_layer_slider_1 .content {
padding-top: 30px !important;
padding-bottom: 0px !important;
}

But in my case this doesn’t work, as http://marqueeroofrollers.co.uk/ is just a single page Website.

#av_section_1 .hr {
margin-top: 0 !important;
}
#av_section_1 .content {
padding-top: 0 !important;
}
#after_layer_slider_1 .content {
padding-top: 30px !important;
padding-bottom: 0px !important;
}

didn’t work as well.

March 27, 2017 at 7:32 pm #767657

Victoria
Inactive Moderator

Hi JGastmann,

I put the slider just on the page, without color section. Do you need the color section?
It’s a bit overkill, unless you really need it. Do you need image to stretch fulwidth?

Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

Best regards,
Victoria

March 27, 2017 at 8:44 pm #767713
JGastmann
Participant
I give you admin access (login data: see private content)

It doesn’t matter which layout elements or media elements have to be used. It doesn’t have to be a color section, but the color section is the only element that gives me what my customer wants: A header image with the width of the full content width (main content plus sidebar). The only thing that doesn’t work here is the empty space that grows in height in proportion of narrowing the browser window / screen size.

Take a look at the page “Das Unternehmen” (http://www.bafatex.com/wordpress/de/das-unternehmen/). I tried every kind of image, slider and gallery that is available in the Enfold theme. None of them fits. I left 4 of them that you will see on the page:
1. slide show full width: image is too wide (full screen instead of max-width of main content plus sidebar, which is 1.000px), padding-bottom / margin-bottom seems ok
2. simple slider: image is too narrow (stops at the border of the right sidebar), padding-bottom / margin-bottom is too high for every screen size
3. simple image: same problem as simple slider
4. color section: perfect width on all screen sizes, but empty space grows in height in proportion of narrowing the browser window / screen size
I limited the width of the “slide show full width” and centered the alignment by using this CSS:
.avia-slideshow-inner {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}

Only problem here: The small / smartphone screens show the full height instead of the full width and display the center of the image. Which looks suboptimal, showing just the entrance instead of the whole building.

So what do you suggest?

Best regards,

Joerg Gastmann
- This reply was modified 7 years, 8 months ago by JGastmann.
March 28, 2017 at 2:59 pm #768172
Victoria
Inactive Moderator
Hi Joerg,

You can put these styles to you child theme styles.css and see if it does what you need:
```
@media only screen and (max-width: 767px) {
	#full_slider_1 .avia-slideshow-inner {
		height: 130px!important;
	}
	#full_slider_1 .avia-slideshow-inner li div.avia-slide-wrap img {
		  min-height: 130px!important;
		  min-width: auto!important;
		  left: 0!important;
	}
}
```
Best regards,
Victoria
April 4, 2017 at 4:02 pm #771833

JGastmann
Participant

Hi Victoria,

it’s not a really responsive solution and the most elegant way, but this workaround seems to be sufficient for my customer (the sales director said it’s ok, the managing director has to give the final approval).

Depending on the width of the screen the width of the id selector #full_slider_1 .avia-slideshow-inner my cause either a distortion of the image, or it cuts off its left and right borders. In this case I lowered the height to 100px, and it looks ok in a width of 320px, but it’s cut off in a width of e.g. 400 or 500px (tablet portait screen).

Whatever: Your CSS solution seems to be sufficient for my customer. Thank you very much for your support!

April 6, 2017 at 5:59 am #772954

Rikard
Keymaster

Hi,

Thanks for the feedback, glad we could help :-)

Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard

May 12, 2017 at 10:52 pm #792535

JGastmann
Participant

I’m still waiting for the approval of the customer. As soon as I get it (hopefully within the next week) the tiptic can be closed. I’ll let you know immediately.

May 12, 2017 at 10:53 pm #792536

Jordan Shannon
Inactive Moderator

Hi,

Great! We will await your approval.

Best regards,
Jordan Shannon

June 13, 2017 at 10:20 pm #807643

JGastmann
Participant

Hi,

the customer approved the solution. So we can close this topic / ticket.

Thank you very much!

June 13, 2017 at 10:32 pm #807647

Jordan Shannon
Inactive Moderator

Hi,

Great! If you need additional help, please let us know here in the forums.

Best regards,
Jordan Shannon
Author

Posts