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

Community Forums Forums General Discussion Minimum Pro – How can I control the background image re-sizing

This topic is: not resolved

This topic contains 26 replies, has 9 voices, and was last updated by  coralseait 1 year, 1 month ago.

Viewing 12 posts - 16 through 27 (of 27 total)
  • Author
    Posts
  • #62572

    jbculp
    Participant
    Post count: 119

    After digging around and trying different things I’m not so unhappy with backstretch as I am with the aspect ratio handling. Apparently backstretch has an option called centeredx which allows one to control the aspect ratio of the image but all the code I can find involves changing the core jquery code. Is there a way to control the backstretch image aspect ratio handling in the php?

    #62575

    coralseait
    Participant
    Post count: 105

    It is a tough nut to crack that’s for sure. It is a fantastic theme, and really viable for many uses. I don’t want to seem like I’m dogging on it too much. For my specific use right now, it just doesn’t work. I trust they’ll give us a fix in due course.


    #62579

    jbculp
    Participant
    Post count: 119

    I too like this theme. It seems to have a lot of flexibility and as I’ve played with this image business I’ve learned to register widgets, add structural wraps etc. so it’s been a win for me overall but I’m not where I want to be.

    I’ve done a number of “work-arounds” but am not happy with any. As it stands I’ve added a new section to the home page called home-image using the code in the old minimum theme for featured-image as my guide. It seems to be working in that I see my image but I can’t grab it with CSS so there is likely something wrong in my php. It is still relying on the CSS element called .img, not the element I named in the style.css called .home-image.

    Looking at websites of people that contribute regularly to this blog, both John Sundberg and Carrie Dils are accomplishing what I’m trying to accomplish; that is they have images that span the frame, are responsive, stay centered as you zoom in and out etc. This is NOT the same thing as a background image which minimum-pro is designed for but it fits my needs better.

    John is on the older version of minimum I think, based on his comments on his blog, yet he’s using backstretch to control his homepage image if I’m reading it right in Firebug. If you zoom out in the browser the background seems to span indefinitely yet it stays centered. Pretty tricky piece of work and what I’m shooting for. Perhaps he’ll see this post and tell me how he did it.

    #62580

    coralseait
    Participant
    Post count: 105

    For this scenario I’m sticking with Minimum 2.0 because it is absolutely critical the images don’t adjust in unpredictable ways. Being a photographer, he needs his compositions to be assured.

    Also I’m not the greatest with CSS; I’m more of a back end infrastructure DB / code type so I’m sure there’s CSS magic that could help but it escapes my grasp … right now. I’m brushing up the CSS skill set and improving it, but for now it is better I stick with 2.0 as it better suites our needs.

    I can’t wait for more pro vs / HTML 5 theme updates!


    #62583

    jbculp
    Participant
    Post count: 119

    Well, I finally got it. I was getting the CSS statement wrong. It needed to be img.home-image with no spaces.

    So where i stand.. I’ve added a section to the home page that is outside of the widgets and above the site-tagline. I’ve added my static image in the php and now i can style it with CSS. I still think some of my CSS is faulty but I’m very close.

    #62584

    coralseait
    Participant
    Post count: 105

    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!


    #62586

    jbculp
    Participant
    Post count: 119

    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

    #62588

    jbculp
    Participant
    Post count: 119

    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;
    }
    
    #62809

    jbculp
    Participant
    Post count: 119

    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

    #62876

    braddalton
    Participant
    Post count: 10342

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


    #62885

    jbculp
    Participant
    Post count: 119

    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.

    #62943

    coralseait
    Participant
    Post count: 105

    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!


Viewing 12 posts - 16 through 27 (of 27 total)

You must be logged in to reply to this topic.