Home Page Image Sizes
Support Area › Forums › Moonrise › Home Page Image Sizes
- This topic has 7 replies, 2 voices, and was last updated 8 years, 1 month ago by Bill Robbins.
-
AuthorPosts
-
February 2, 2016 at 18:10 #35291James DavidsonParticipant
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
February 3, 2016 at 10:38 #35292Bill RobbinsModeratorHi 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,
BillFebruary 3, 2016 at 17:26 #35307James DavidsonParticipantThanks 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
February 3, 2016 at 17:41 #35310Bill RobbinsModeratorThere 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.
February 4, 2016 at 17:34 #35345James DavidsonParticipantThanks 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
February 5, 2016 at 09:37 #35353Bill RobbinsModeratorHi 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,
BillFebruary 10, 2016 at 00:06 #35418James DavidsonParticipantThanks Bill,
This works well. CheersFebruary 10, 2016 at 09:11 #35419Bill RobbinsModeratorFantastic 🙂
-
AuthorPosts
- The topic ‘Home Page Image Sizes’ is closed to new replies.