Getting Images to fit into a theme

  • Unknown's avatar
    yogaclara · Member ·

    I’m having trouble getting photos to fit into the Edin theme in the way I would like, please can someone help!

    Front page:
    1. The feature pic is too large and cropped.
    2. I have three columns at the bottom with images. The images have been cropped from the feature image and don’t sit well. Can I add a square image here that fits the template?
    3. I can’t seem to display a pic for the blog column on front page as I have done in the other two columns.

    Other pages:
    I can’t get the feature picture to sit into the space as I would like plus the colour is altered.

    Is there a way to drag the photos into a space, to move and adjust them in that space?

    Thanks

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there,

    1. The feature pic is too large and cropped.

    With full width featured images on responsive designed themes such as Edin, the image CSS has to be done in a way that will cover the entire area allotted for the image no matter what screen/window size, so what you are requesting is very difficult to do.

    The Edin theme and WordPress software position the image centered and the image is not actually cropped, it is just that the additional image material is hidden off the sides and bottom. The Edin Theme Showcase page suggests an image width of 1230 for featured images on pages with an unlimited height. From looking at the image proportions for various window widths, it looks like if you prepared your images at 1230 wide with a width to height ratio of 1.5, and kept the main focus of your images centered vertically and horizontally, you should have much better results. With a 1230px wide image, I would suggest a height of about 750-800 pixels. You may want to redo the top image as I’ve suggested above and then try that as the featured image and see how it goes. I’d also make sure there is some more space to the left and right of the focus of the image so that if some cropping occurs at certain window/screen sizes it does not cut off what you do not want cut off.

    2. I have three columns at the bottom with images. The images have been cropped from the feature image and don’t sit well. Can I add a square image here that fits the template?

    In Edin at Customize > Theme Options you can set the aspect ratio for thumbnail images and choose either 4:3 or square. If you set it to square, simply create featured images that have the same height and width dimensions and there will be no cropping of the image.

    3. I can’t seem to display a pic for the blog column on front page as I have done in the other two columns.

    In Edin, if you set the blog page as one of the featured pages in the home page template, it will not show a featured image thumbnail on the main page set to the Home Page template.

    One option I can think of is to set your main page to the Grid Template, which will show child pages below the top featured image. You would then set the pages you wished to show below the top featured image as child pages of your home page.

    Other pages:
    I can’t get the feature picture to sit into the space as I would like plus the colour is altered.

    We can remove the grey tint added to the featured images on the pages with the following custom CSS. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS. 

    body:not(.no-image-filter) .hero.with-featured-image::before {
    background: none;
}

    On static pages, such as your about page, the proportions of the image area change pretty drastically on narrower screens. I would suggest for static (non-home) pages your featured image should be 1230px x 410px. Once you do that and get the new image set as the featured image, we can then make adjustments for the smaller screen sizes with CSS.

    We do not offer drag-and-drop page layout options at this time.

  • The topic ‘Getting Images to fit into a theme’ is closed to new replies.