Home Forums Archived Forums Weaver II Theme Weaver II Pro Stop featured image from cropping to height 188px?

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #18397
    ElinH
    Participant

    I’m making a new site where I’m using posts featured images as backgrounds for divs in a “recent posts”-area that I’ve coded myself. The divs are repsonsive widths and static heights but end up around width 360px (the height is set to 250px). 

    I’ve set the divs to have:
    background-size: cover;
    The thing is though that Weaver theme crops my featured images to a height of 188px (the header image default height, changing the “suggested height” does not change this) – no matter the original size of the image. This results in the images that appear as backgrounds have such a small height that they only show a corner of the image as backgrounds in the divs.
    I’m not going to use the “featured image replaces header image”-function at all on this site so this is really bugging me right now and I can’t figure at an easy way to solve this issue? Is there somewhere I can turn this function off without going to the functions.php? Or some other way to stop the theme from auto-cropping my featured images?
    I’m not super high on php-coding. I’m using a child-theme so I can add a change to my child-themes functions.php-file but I don’t want to mess everything up so I would like some guidance to how to do that if that is indeed the only way.
    http://u3350014.fsdata.se/ – this is the site I’m working on.
    #25213
    scrambler
    Moderator

    I don’t think the theme is doing anything to your background image, your CSS appears to be.

    On the first post, you are using the inlne css below

    background-position: 0% 0%, 0% 0%; background-image: linear-gradient(rgba(0, 153, 153, 0.7), rgba(153, 214, 214, 0.7)), url(“http://i1.wp.com/u3350014.fsdata.se/wp-content/uploads/2015/12/they-are-coming-e1449438745242.jpg?resize=300%2C188“); background-attachment: scroll, scroll; background-repeat: repeat, no-repeat; background-size: cover; background-origin: padding-box, padding-box; background-clip: border-box, border-box; background-color: transparent;

    The image used for the background http://i1.wp.com/u3350014.fsdata.se/wp-content/uploads/2015/12/they-are-coming-e1449438745242.jpg  is not cropped

    If instead I just use

    background-image:url(http://i1.wp.com/u3350014.fsdata.se/wp-content/uploads/2015/12/they-are-coming-e1449438745242.jpg); background-repeat: repeat, no-repeat; background-size: cover;

    Then there is no vertical cropping, except from the normal cropping at the bottom because the post area does not have the same ratio as the image.

    • I am not sure why your CSS is not working quite right, But you need to explore that first. Start with the minimum rules (above) and add others one at a time.
    • You may want to create the shade in the image in an image editor to avoid the gradient rule, as it is likely not supported by all browsers

    Three remarks.

    1- When using background:cover you guarantee the whole box will be covered by the image, but of course if the box ratio is different from the image ratio, some cropping will occur, either on the sides or top/bottom

    2- Using a fixed height makes your design non responsive. If you shrink the browser, at one point the content will flow out of the boxes.
    You can either use a min-height instead, at least when the content needs more space the box will grow, but they wont all have the same height
    Or you can add overflow:auto, so that if the content does not fit, a scroll bar will appear.

    3- If this is a new site, you may have considered using the new Weaver Xtreme, as Weaver II pro is now end of life, so the sooner you transition, the better 🙂

    #25214
    ElinH
    Participant

    Okey, thanks for the answer. The inline css is being generated by the php-codes I used for creating the boxes. It’s something with how I’m calling the thumbnails. I’ll explore it further. 

    1. Yeah that’s not a problem for me. I just want as much of as possible of the image to show and not just the top corner 😉
    2. I know I’m going to do something about that. I haven’t desided what just yet. It’s important for me that the boxes are always the same height for the symmetri of the design 🙂
    3. Right.. I’m going to look into that right away. 
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘ Weaver II Pro’ is closed to new topics and replies.