StoreFront Home Header Image Size

HI,
I'm testing Storefront, nice template!
Got a question at the very first step:

Which is the recommended size for the featured images for the initial slideshow on the homepage, I mean the featured images in the child pages to the frontpage-source > header > child xyz (slide1, slide2 in the media library of the quichstart pack)
Actually slide 1/2 have a size of 2219 by 699px, which is quite large.
And apparently there is a problem with the resizing, I tried it with several image sizes.
Thank you

To clarify:
Problems with resizing means: the adaptation of the featured image size in the header section when you are changing the size of the browser window. There are three fixed image sizes for the displayed image. When you are changing the size of the browser there is no constant reduction of the size but a jump to the next smaller one.
This means: If the image size does not fit to the browser window at the time of opening the website, the image might be displayed only partially.
Observed in FF, Safari, Chrome

Hello,

Do you have your website online? Could you provide an URL? or your slides sizes, because I don't know which image sizes exactly should I test.

Hello Piotr,
thanks for your your help. I make our conversation public, might be somebody else has the same issue.

My point was to get a continous resize function for the images, which are attached to the child pages of the Header in the StoreFront Frontpage (Storefront Frontpage>Header>FindMoreSize&Styles in the quickstart pack).

You answered:

I understand your issue - it's cause by CSS rule background-size: cover, the purpose was to achieve the same height of the header with the background for all available space, of course you can change it.

add this code into override.css file:

Code: Select all

    .gk-is-wrapper-gk-storefront .gk-is-slide {
        background-size: contain;
    }


then you'll have to adjust the slider heght (also in the tablet, mobile styles):

Code: Select all

    .gk-is-wrapper-gk-storefront {
    height: 400px;
    }


Thank you for this advise, it is working fine now.

But there is another issue showing up now:

The size of the wrapper is fixed, this means, when you reduce the size of the browser window and the image/slide is adapting the size, the wrapper height remains constant and the distance between the gk-is-slide and the gk-bottom increases.

How can I adapt the size of the wrapper to the height of the slider?
Thank you

That's why we've used "cover" background property

But you can try with this code in override.css file:

Code: Select all

@media (max-width: 1040px) {
.gk-is-wrapper-gk-storefront {
height: 250px;
}
}

@media (max-width: 800px) {
.gk-is-wrapper-gk-storefront {
height: 180px;
}
}


and you can add other height values for other screen sizes (max-width)

You are completely right!
I didn't express myself in a clear way: I tried to achive a slide show like in MusicState. There you do it with the GK Image Show widget.
Unfortunatly this widget is not included in StoreFront. Is there a download possibility somewhere?
Sorry for the trouble
Thank you
Tobias

I understand, but in the Storefront this slider is used more like the background, in the MusicState there's additional containter for this widget. Unfortunately Image Show is a widget prepared especially for each theme, you can check this similar thread about adding other widgets:
https://www.gavick.com/forums/wp-reques ... 86#p133286
but in this case, there's more work to do, because of styles, image show scripts, etc. Mayble it will be easier to compare MusicState image show style with this one from Storefront (it's not a widget, but engine is the same - moved to frontpage template).