Community Forums › Forums › Archived Forums › General Discussion › Minimum Pro – How can I control the background image re-sizing
Tagged: backstretch, minimum pro
- This topic has 26 replies, 9 voices, and was last updated 10 years, 7 months ago by coralseait.
-
AuthorPosts
-
September 14, 2013 at 5:13 pm #62584coralseaitMember
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!
September 14, 2013 at 5:44 pm #62586jbculpParticipantSure, 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 sliderI 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
September 14, 2013 at 6:11 pm #62588jbculpParticipantThere 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; }
September 16, 2013 at 7:24 am #62809jbculpParticipantSridhar 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
September 16, 2013 at 2:57 pm #62876Brad DaltonParticipantI added the soliloquy slider after the header and it resizes really well.
September 16, 2013 at 3:47 pm #62885jbculpParticipantFor 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.
September 16, 2013 at 10:17 pm #62943coralseaitMemberI 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!
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.