Home Page Image Sizes

Support Area Forums Moonrise Home Page Image Sizes

Viewing 8 posts - 1 through 8 (of 8 total)
URL to the page in question: http://www.luckyduckcafebar.com.au/
  • Author
    Posts
  • #35291
    James Davidson
    Participant

    Hi there,

    After rebuilding my website I’m having images with my home page image sizes, particularly how zoomed in the appear to be. I’ve played around with the widths etc as well as the size in theme options and I can’t get it to work. Any suggestions would be greatly appreciated.

    Cheers,

    J

    #35292
    Bill Robbins
    Moderator

    Hi James,

    Good question there. Here’s what’s happening with the images there. The closer the opening for the image is to the aspect ratio of the image itself, the less cropping/zooming in of the image there will be. The further apart the aspect ratios are, the more cropping/zooming in will be necessary in order to have the image fill the entire space available.

    It’s also good to have the main focus of the image as close to the center of the image as possible with plenty of buffer space inside the image. That way when cropping does happen you won’t lose what’s important.

    Instead of having the picture blocks have a fixed height, one option would be to have the height based on the width of the browser window. You could add this to the Custom CSS box that’s in the styling or advanced tab in the theme options page:

    
    .page-template-page-home .picture-block {
    	height: 50vw !important;
    }
    

    That will base the height of the picture block off of the width of the browser window. You can change the 50 in that snippet to make it larger or smaller to fit your needs.

    Hope that helps out,
    Bill

    #35307
    James Davidson
    Participant

    Thanks Bill,

    That’s helped but the issue seems like it might be something to do with the menu? If I add the CSS it appears to simply add an extra 500 (but doesnt change aspect ratio). Without the CSS, if I narrow the browser screen to a point where the menu items disappear and ‘navigation’ appears, the images display correctly.
    any ideas?

    Thanks for your help.

    J

    #35310
    Bill Robbins
    Moderator

    There are some CSS changes between the old version that was there and the new one. You’ll need to roll those changes into the child theme’s CSS for everything to work right.

    One of the changes was for a mobile version of the home block images. Mobile devices don’t support fixed background images so each home block image is also inserted via an image tag as well as being set as a background image.

    On larger screens the image tag version is hidden while on smaller ones, the background image is hidden.

    The navigation menu also changed on mobile to use TinyNav. You’ll want to roll in the styling for that as well. The change log will make note of the changes to the style.css file to help you find them.

    The header is very tall. You might consider switching to the scroll option so that it moves out of the way. That would allow more of each of those images to be seen since they won’t be sitting under the header. That’s one option for you.

    #35345
    James Davidson
    Participant

    Thanks Bill,

    I’m currently running the updated theme (no child theme as I haven’t edited anything except the footer) but I’ve still got the issue?

    Best,

    Sam

    #35353
    Bill Robbins
    Moderator

    Hi Sam,

    Turning off the child theme, did remove the duplicate home block images which is good. Again, the header is really big. With it set to be fixed at the top, it will always cover a significant portion of the home block images since they are all at the top of the screen as well, just under the header.

    I would do one of two things. You can set the header to scroll in the theme options. That will cause it to scroll out of view just like the other content on the home page. That will keep it from covering up the home block images as they are scrolled.

    The other option would be to hide the logo as you scroll. You could add this to the Custom CSS box in the theme options page (Advanced tab) to do that:

    
    
    #header #logo {
    	-webkit-transition: all .2s;
    	transition: all .2s;
    }
    
    #header.movement #logo {
    	height: 0;
    	padding: 0;
    	margin: 0;
    	overflow: hidden;
    	-webkit-transition: all .2s;
    	transition: all .2s;
    }
    
    

    Hope that helps out,
    Bill

    #35418
    James Davidson
    Participant

    Thanks Bill,
    This works well. Cheers

    #35419
    Bill Robbins
    Moderator

    Fantastic 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Home Page Image Sizes’ is closed to new replies.