Minimum Pro – How can I control the background image re-sizing

[coralseait]

Awesome, congrats!

Do you mind sharing your mods? I'd like to throw up a test install and see if I can move to M Pro if possible!

Cheers!

---

Coral Sea IT

[jbculp]

Sure, if I can keep it all straight here they are: (ps forgive any sloppy bits or bad CSS - this is a new level of work for me with Genesis). I did this as a section that spanned the entire frame so I wasn't limited to the site-inner frame. If you wanted something smaller, making it a widget works as well. Plus, as a photographer, if you wanted to use a slider, there are two great blog entries on that.. one by John Sundberg on How to add a Soliloquy slider to a Genesis page template file
and another by Sridhar Katakam on How to replace the background image in minimum-pro with a responsive slider

I use soliloquy but both of these are great. Since I wanted a static image this seemed like over doing it but I tested it and it worked.

My static image.

Minimum-Pro Theme

Functions.php
Add the new section to the structural wraps. The one in question here is home-image.

//* Add support for structural wraps
add_theme_support( 'genesis-structural-wraps', array(
	'header',
	'site-tagline',
	'nav',
	'subnav',
	'home-image',
	'home-featured',
	'home-content',
	'site-inner',
	'footer-widgets',
	'footer'
) );

front-page.php

Add the home image section

/** Add the home image section */
add_action( 'genesis_after_header', 'minimum_home_image', 9 );
function minimum_home_image() {
	if ( is_home() ) {
		echo '<div id="home-image"><img class="home-image" src="'. get_stylesheet_directory_uri() . '/images/background.jpg" /></div>';
	}
	echo '</div>'; //* end .home-image

}

Finally the CSS. This is where I need to do some cleanup but here is what I have currently.

Style.css - simplest form:

img.home-image {
	padding: 0 0 0 0;
	width: 100%;
}

That's it. Hope this helps.

John C

[jbculp]

There is a section in the minimum-pro css that handles different image alignments. Using that as a guide the image css can look like this:

img.home-image {
display: block;
margin: 0 auto 24px;
margin: 0 auto 2.4rem;
}

[jbculp]

Sridhar Katakam responded to my inquiry on this topic by writing a blog article addressing the solution. Setting up a responsive image in place of background in Minimum Pro can be found HERE

Hopefully this will help everyone who likes Minimum-pro but doesn't want the other solutions discussed.

Also, on the CSS block I added above .img.home-image... I changed the top margin to 60px and removed the bottom margin so it now reads like this:

img.home-image {
	display: block;
	margin: 60px auto 0px;
	margin: 6rem auto 0rem;
}

JohnC

[Brad Dalton]

I added the soliloquy slider after the header and it resizes really well.

---

Tutorials for StudioPress Themes.

[jbculp]

For me too. I decided then to work with a static image for my site and not the slider... thus my long winded explaination but either approach seems to work. Sridhar Katakam's newest post on a static image in minimum-pro seems to do what I did but perhaps more elegantly as he is far more experienced but with the tutorials named here one can put in a slider or static image in minimum-pro as an alternative to the background image.

[coralseait]

I actually had tried Sridhar's wonderful tutorial which worked a charm, but I still had cropping issues on the images at certain sizes. Alas my photographer was very adamant about that not happening at all.

I probably missed something in the CSS or perhaps I should try the soliloquy slider.

As a note, I've taken down the test install in my OP as it was no longer appropriate for my scenario. When I get a chance I'll try with soliloquy and/or the CSS.

Cheers Guys, you're awesome!

---

Coral Sea IT

[Author]

Posts