[Theme: 2011] Auto resize of Header Image.

  • I am using the instagrate plugin. It takes images from instagram and posts them automatically. Works great. It even lets you select your image and select it as the featured image.

    Now on the Twenty Eleven theme that means a new banner for each postbeacuse the featured image becomes the banner.

    However the problem is this:
    The image snagged from instagram is 640 x 640.
    The 2011 theme lets you set any photo you want to your featured image but it only uses the photo if it is 1000px.

    I am looking for a way to have continue using the default 1000 x 288 for the banner (header image / featured image) but when the photo is less than 1000 in width it will stretch it and use it. I still want the photo chopped at 288.

    In short
    Any photo no matter what size (1000 px or shorter) will still appear when selected as the featured image. And that the header image (although stretched) will keep the prober ratio for height and still be cropped at 288.

    Any suggestions?

Viewing 8 replies - 1 through 8 (of 8 total)

  • Did you try changing the header image size in the functions.php file?

    You may have to adjust the css to make it work… but it’s worth a try.

    Thread Starter IslandWilson

    (@islandwilson)

    I think that is the right area but I am not a coder.

    Also, I think changing the header size won’t stretch the 640 px width to 1000 px. It will just allow a width of 640px.
    i am also concerned what that will do to all the featured images that are 1000px.

    So I think I looking for some kind of testing in the code. If image is 1000px or more, don’t do anything. But if the image is less than 1000px then resize it to fit. I don’t know exactly. or even if it’s possible.

    the css can be modified to stretch the 640 to 1000. yes, enlarging the 640 to 1000 is going to have an impact on your image resolution, but that was what you asked to do ??

    you can contact the plugin support to see if there is a way to modify the plugin files to your requirements.

    Thread Starter IslandWilson

    (@islandwilson)

    Great.

    Do you have any idea what code I need to add to my CSS. or what to modify. This is my first attempt to edit the css or php

    why don’t you change the functions.php file first, then post a link to your site with the results.

    Thread Starter IslandWilson

    (@islandwilson)

    I have absolutely no idea what I would be changing

    Thread Starter IslandWilson

    (@islandwilson)

    Thanks Janet. Ok. I took a leap and edited the functions.php and style.css.

    In functions.php, I changed the width from 1000 to 640 :
    ‘width’ => apply_filters( ‘twentyeleven_header_image_width’, 640 ),

    In Style.css, I moved the height to the last line and changed it from auto to 288px

    #branding img {
    display: block;
    width: 100%;
    height: 288px;
    }

    (I know there is a better way to do this with a child theme but ever time I tried to add a completely blank child theme I lost one of my page buttons. )

    Anyway, this achieves about 95% of what I wanted to do. My instagram posts are now showing up in the header as the featured image as well as in the post. However the aspect ratio isn’t the same as the original.

    Example: https://www.islandwilson.com/blog/2014/05/20/another-distinctive-coral/

    I can live with this but I’d prefer if it was cropped instead of scrunched.
    Any suggestions would be greatly appreciated.

    There are ways of clipping a photo with css… (I’m giving you a few links with examples of different ways this can be accomplished)
    https://spigotdesign.com/crop-any-size-image-with-css/
    https://www.squareonemd.co.uk/how-to-crop-an-image-with-a-css-class/
    https://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

    or you could manually crop the photos in the editor to the exact size…

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[Theme: 2011] Auto resize of Header Image.’ is closed to new replies.