Page 1 of 1

CGSmartImage - Header Height

Posted: Sun Dec 31, 2017 4:06 pm
by simetz
Screen Shot 2017-12-31 at 11.02.47 AM copy.png
I am using a really good template Template-1200 which uses responsive code and uses the CGSSmartImage extension. My problem is that no matter what I do to the actual image size or the code snippet in the template, I cannot alter the height of the header.

Code from template: background: url("{CGSmartImage src="{content_image block='Page header image' dir='images/header' urlonly='1'}" filter_croptofit='1920,900' notag=1}") no-repeat top;

I have tried to alter both the aspect ration (changed only 900 height) and also the overall size of image (changed both 1920 and 900).

I use the same templates and CSS on a number of sites, the one I am trying to change first is http://www.simonmetzwoodworking.com

I attached screenshot of the CMSMS template and the extension settings page

Thanks!

Simon

Re: CGSmartImage - Header Height

Posted: Sun Dec 31, 2017 6:23 pm
by scooper
The image is being used as a background that covers whatever height the header is so changing the actual image size won't affect the appearance.

Inspecting the site in dev tools it looks to me as if the size of the header is mostly controlled by the amount of padding it has at the top and bottom.

Have a look in the "Template1200-style" stylesheet and see if you can find references like:

.content_back {padding:150px 0;}

There'll be a few of them contained in different media queries because the height will change over different screensizes.

If you increase the amount of padding then the height of the header will also increase. You might need to play around with it a bit to get it looking right (you can edit the stylesheet directly in your browser Developer Tools to get an idea without breaking anything).

Hope that helps and Happy New Year.....

Re: CGSmartImage - Header Height

Posted: Mon Jan 01, 2018 5:30 pm
by simetz
Thanks, worked perfectly!