How do you keep the original picture size of featured images?

Hi, I am using the Social theme and is trying to use the Theme options --> Gallery settings ---> Article feature.
And everytime we make a post with a picture, the picture always gets stretched out on the homepage on the width to fit the borders.
So the question is: How do I prevent it from making the image larger?

It found this field but I am not sure if it is the right one or how to change it: "Change your desired custom field for featured post images
Default: thumbs"

Cheers
/Robert

  • Patrick
    • Support Monkey

    "Change your desired custom field for featured post images... Default: thumbs"

    Changing that will simply replace the thumbnail image with whatever metadata is stored/fetched by the custom field you enter there.

    Could you provide a link to your page please? Much easier to help out when we can see what's going on. Thanks!

  • Dukeswe
    • Site Builder, Child of Zeus

    Ok to clarify. If you look on your preview page here: http://themetastic.com/buddypress/?wptheme=BuddyPress%20Social
    And look at the lightbulb spider picture.
    That is the place the picture gets enlarged/zoomed to fit to the sides. As you can see the spider is in alignment with the text.
    So if for example the featured picture is lets say a really small 30x30 size image it would be enlarged to look something like this: http://2.bp.blogspot.com/_Eiwce13X738/SiZGDgKfqMI/AAAAAAAAGj4/G10l2ANuIX4/s400/Pixel.Face.JPG

    I hope this clarifies the issue.

    What I want is for a way to disable this behaviour with the featured posts. I simply want the original picture to be seen instead.

    /Robert

  • Patrick
    • Support Monkey

    Hi again @Dukeswe

    Ah, that is clearer, yes. Thanks!

    The theme does try to fit images to the available space. Try adding this to the style-sheet:

    #home-news .leftbox img {
    height:auto;
    width:auto;
    }

    If that doesn't "take", try with !important like so:

    #home-news .leftbox img {
    height:auto !important;
    width:auto !important;
    }
  • Patrick
    • Support Monkey

    Hi again @Dukeswe

    Yes, activating and customizing a child-theme would definitely be the preferable choice.

    Fortunately, BP-Social already has a child-theme included in the download. Open bp-social/themes and you'll see bp-social-child. That's the child-theme you'll want to edit, upload and activate.

    The style-sheet to use for custom CSS is bp-social-child/_inc/css/child-style-sample.css. You'll need to rename that file to child-style.css before uploading & activating the child-theme though.

  • Dukeswe
    • Site Builder, Child of Zeus

    Okey I have succesfully changed to the child theme with the style changes but now it instead seems to minimize the picture so it fills about 60% of the width. (If the picture was big to start with) Any way to keep the same picture size as in the post and only minimize if bigger than the boundaries? (The width it used to enlarge to before)

  • Patrick
    • Support Monkey

    Hi again @Dukeswe

    Geez, we can't get no satifaction, huh?

    Try changing the CSS I gave you above to the following. Should clear things up :slight_smile:

    #home-news .leftbox img {
    height:auto !important;
    width:100% !important;
    }

    Let me know if that works out for you.

  • Dukeswe
    • Site Builder, Child of Zeus

    haha ^^
    When trying your fix it seems to just revert to the original way.
    I think I know what the problem is though. When it is on auto it takes the original picture size and uses it. apparently the picture in the post was abit scaled:
    199px × 97px (scaled to 306px × 149px)
    So how to get it to take the same scale as the picture from the post? I don't know. Perhaps it is better to just use both width and height on auto to get the original.

    /Robert

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.