WordPress.org

Ready to get started?Download WordPress

Forums

Header Image (8 posts)

  1. ozcam
    Member
    Posted 3 years ago #

    Hi..
    New to wordpress, but not to webdesign and php.
    Just getting familiar with the default 20/10 theme and I am struggling to find the code that loads the header image.. I have searched both the style.css and header.php files in the 20/20 folder but cannot find the code.. I know the image name and location but where is the code that loads this image?
    Thanks

  2. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    <?php
    					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
    					if ( is_singular() &&
    							has_post_thumbnail( $post->ID ) &&
    							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
    							$image[1] >= HEADER_IMAGE_WIDTH ) :
    						// Houston, we have a new header image!
    						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
    					else : ?>
    						<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
    					<?php endif; ?>

    btw:
    modifications to Twenty Ten will be overwritten with the next update of wp;
    it is recommended to create a child theme: http://codex.wordpress.org/Child_Themes

  3. Jaya
    Member
    Posted 3 years ago #

    alchymyth beat me to it :)

  4. ozcam
    Member
    Posted 3 years ago #

    Hi
    Thanks for your input , but I still do not understand..
    Firstly I guess its a page as its the page that first loads when I enter the site.
    But if I want to change the image or if I want to call the image and position with css how do I achieve this.. I cannot see where?
    I know how to place and position the image within css, but how do I remove the call to the exisiting header image?
    Below is the relevant bit from header.php
    -------
    <div id="header">
    <div id="masthead">
    <div id="branding" role="banner">
    <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
    <<?php echo $heading_tag; ?> id="site-title">
    <span>
    " title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?>
    </span>
    </<?php echo $heading_tag; ?>>
    <div id="site-description"><?php bloginfo( 'description' ); ?></div>

    <?php
    // Check if this is a post or page, if it has a thumbnail, and if it's a big one
    if ( is_singular() &&
    has_post_thumbnail( $post->ID ) &&
    ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
    $image[1] >= HEADER_IMAGE_WIDTH ) :
    // Houston, we have a new header image!
    echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
    else : ?>
    <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
    <?php endif; ?>
    </div><!-- #branding -->

    <div id="access" role="navigation">
    <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
    <div class="skip-link screen-reader-text">"><?php _e( 'Skip to content', 'twentyten' ); ?></div>
    <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
    <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
    </div><!-- #access -->
    </div><!-- #masthead -->
    </div><!-- #header -->
    Thanks again

  5. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    it might help if you could describe what you would like to achieve.

    in style.css of the theme, the css style for the image is:

    /* This is the custom header image */
    #branding img {
    	border-top: 4px solid #000;
    	border-bottom: 1px solid #000;
    	clear: both;
    	display: block;
    }

    and there is an option under 'dashboard' 'appearance' 'header'

  6. Jaya
    Member
    Posted 3 years ago #

    Are you trying to hide the header image using css?

    If that's what you're trying to achieve, then here is what you'll have to do:

    In your css file, look for this code:

    #branding IMG
    {
    	border-top: 4px solid #000;
    	border-bottom: 1px solid #000;
    	clear: both;
    	display: block;
    }

    replace the display: block;
    with display: none;

  7. ozcam
    Member
    Posted 3 years ago #

    Hi..
    What I would like to do is place a smaller image as a header graphic.
    Thanks

  8. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    you can change the header images size, which will be used by the 'header' option in 'appearance', in functions.php of the theme:

    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) );
    	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 198 ) );

Topic Closed

This topic has been closed to new replies.

About this Topic