Support » Theme: Twenty Thirteen » Change Cropping Size in Twentythirteen

  • Part of my question has been answered in another thread, but not the more important one to me…

    I am trying to upload a header graphic that is 1600 wide and 288 high. I need to be that specific, and I’ve already change the .site-header in my CSS to accomodate the min-height of 288px.

    My main issue is using the theme uploader will crop my image at 230px. Is there any way I can change that height from 230px to 288px? I mean, I can cheat and replace the cropped-header.jpg image with the actual one I need, but I would much rather just letting the theme uploader do it for me. That way, if I want to change the header in the future, I can easily do it without having to go through a bunch of extra steps.

    Is this possible?

Viewing 14 replies - 1 through 14 (of 14 total)
  • esmi

    (@esmi)

    Forum Moderator

    Are you using a child theme?

    Yes I am esmi.

    esmi

    (@esmi)

    Forum Moderator

    See /twentythirteen/inc/custom-header.php. Try creating a new custom header function in your child theme and see if that works.

    I just tried that. It still wants me to crop the image at 230px high. I just need to find a way to change the size of the theme croping tool.

    Do this:

    Copy the header.php file into your child theme.

    Then paste the below script after the following lines:

    <?php wp_head(); ?>
    </head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("#logo").function(){
      });
    </script>
    <div id="logo"><img src="http://yourdomain/wordpress/wp-content/uploads/2013/08/logo.jpg" alt="jQuery" width="300" height="50"></div>

    You must change the image url as per your location. You can change the width and height as you like.

    Then do the following in the CSS Stylesheet file in Child Theme

    #logo{
    margin-left: 14%;
    }

    Change the css whatever way you want.

    esmi

    (@esmi)

    Forum Moderator

    No – that’s not the way to implement a js fix. You need to enqueue the js script via the child theme’s functions.php file.

    Yes, follow esmi’s instruction, he is right.

    esmi, I want to do the same thing as DJ, but what part is not the right part in the instructions mybdbis gave, and what to do differently?

    Hi, to edit the crop size you can do the following:
    -Open “YourThemeFolder/inc/customheader.php”.
    -Find “.default-header img” and then edit the max-width value.
    -Open Functions.php,style.css,header.php and look for any “230” and replace it for 288 (or any value you want).
    Now enter your dashboard and try it out.

    Moderator Andrew Nevins

    (@anevins)

    @adianamoni, telling people to edit parent theme files is going to cause them grief when the theme updates and their changes are erased.

    Ok… I just answered DJ’s question… I just assumed that DJ is working on a Child theme… If not, im sorry.. This is how you can create one.
    http://codex.wordpress.org/Child_Themes

    Moderator Andrew Nevins

    (@anevins)

    Okay, but that’s not how Child Themes work. You don’t copy the functions.php file and style.css file into your Child Theme.

    Look up these bits:
    http://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme
    http://codex.wordpress.org/Child_Themes#Using_functions.php

    @adrianamoni: Yes, I am working with a child theme, but what you suggested does not stop the cropping from happening.

    I have since done a work-around by allowing the image to be cropped, then renaming my original-sized image and replaced the cropped image inside the folder.

    As you can see, it works fine:

    http://djallyn.org

    @andrew Nevins: You are correct. Each time the theme gets updated, we would lose all of our changes unless we did one of two things — use a child theme, or simply rename the theme itself.

    The later would be good if you have substantially changed the theme enough that it is really no longer what you started with. In my case, I chose not to modify TwentyThirteen like I did with TwentyTen, so except for a few minor tweaks, it is essentially remaining as TwentyThirteen.

    For me, the issue is pretty much resolved — I got my header image to display the way I want it displayed. But I never was able to change the size that the cropper tool used.

    Thanks though!

    For those of you still looking for a step by step solution to this, the instructions in this old post worked perfectly for me on a TwentyThirteen child theme:
    http://wordpress.org/support/topic/change-dimensions-of-wordpress-custom-header

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Change Cropping Size in Twentythirteen’ is closed to new replies.