WordPress.org

Forums

Twenty Thirteen
Change Cropping Size in Twentythirteen (15 posts)

  1. DJ Allyn
    Member
    Posted 1 year ago #

    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?

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    Are you using a child theme?

  3. DJ Allyn
    Member
    Posted 1 year ago #

    Yes I am esmi.

  4. esmi
    Forum Moderator
    Posted 1 year ago #

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

  5. DJ Allyn
    Member
    Posted 1 year ago #

    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.

  6. mybdbis
    Member
    Posted 1 year ago #

    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.

  7. esmi
    Forum Moderator
    Posted 1 year ago #

    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.

  8. mybdbis
    Member
    Posted 1 year ago #

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

  9. madisonwoods
    Member
    Posted 1 year ago #

    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?

  10. adrianamoni
    Member
    Posted 1 year ago #

    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.

  11. Andrew
    Forum moderator
    Posted 1 year ago #

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

  12. adrianamoni
    Member
    Posted 1 year ago #

    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

  13. Andrew
    Forum moderator
    Posted 1 year ago #

    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

  14. DJ Allyn
    Member
    Posted 1 year ago #

    @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!

  15. pschueller
    Member
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic