Change header picture and use multiple pictures

  • Resolved moserengineering

    (@moserengineering)


    14 years, 4 months ago

    I am using the twentyten template and would like to change the header picture. I know how to change the picture but can I modify the header so I can have three or four pictures across the top instead of one? Thanks.

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

  • using the following method, you can no more change the header image with the options in the dashboard; one manual added set of images, which have to be located in the images folder of the theme;
    (in which case you could actually easier photoshop a new image out of the three/four images and use it as usual)

    edit header.php and find:

    <?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; ?>

    change it to:

    <img src="<?php bloginfo('template_url'); ?>/images/image1.jpg" alt="" /><img src="<?php bloginfo('template_url'); ?>/images/image2.jpg" alt="" /><img src="<?php bloginfo('template_url'); ?>/images/image3.jpg" alt="" /><img src="<?php bloginfo('template_url'); ?>/images/image4.jpg" alt="" />

    (fourth image code optional; image widths should add up to the total width of header; one long line, no linebreaks)

    Thread Starter moserengineering

    (@moserengineering)

    do I just need to upload my new images into the header folder in the twentyten directory. do I need to change any of the text in your post above?

    the above assumes that the images are in the /images folder of TwentyTen;

    however, if you prefer to use the /headers folder, which is a subfolder of /images – the changes should be here for each single image code:
    in place of:
    ?>/images/image1.jpg

    use this:
    ?>/images/headers/image1.jpg

    and so on

    Thread Starter moserengineering

    (@moserengineering)

    I pasted what you mentioned above in and uploaded image1 into the images folder. Now there are four red x’s showing up on my page. Do I need all four images in there or should image1 show up by itself? Thanks.

    image1 should show up by itself;

    could you post the new code from header.php plus a few lines before and after?

    double check (for instance by typing the image url into the browser) that the image is uploaded to the /images folder of TwentyTen

    idealy, do you have a link to the site, so someone could have a look at it?

    Thread Starter moserengineering

    (@moserengineering)

    Below is the new code with a few lines above and below. I went to the images folder in twentyten and the image is there. I clicked on it and selected view and it looks right.

    </head>

    <body <?php body_class(); ?>>
    <div id=”wrapper” class=”hfeed”>
    <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>

    <img src=”<?php bloginfo(‘template_url’); ?>/images/image1.jpg” alt=”” /><img src=”<?php bloginfo(‘template_url’); ?>/images/image2.jpg” alt=”” /><img src=”<?php bloginfo(‘template_url’); ?>/images/image3.jpg” alt=”” /><img src=”<?php bloginfo(‘template_url’); ?>/images/image4.jpg” alt=”” />

    <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 –>

    <div id=”main”>

    Thread Starter moserengineering

    (@moserengineering)

    the page is https://www.jmoserengineering.com

    thanks.

    something must have gone wrong – i can’t see an image under this location (in the images folder of the theme twentyten)
    https://www.jmoserengineering.com/wp-content/themes/twentyten/images/image1.jpg

    Thread Starter moserengineering

    (@moserengineering)

    it is in this folder

    /public_html/wp-content/themes/twentyten/images

    what is the url you type in to see the image in the browser?

    Thread Starter moserengineering

    (@moserengineering)

    https://www.jmoserengineering.com/wp-content/themes/twentyten/images/image1.JPG

    for some reason if the JPG is not capitalized it doesn’t find it.

    Thread Starter moserengineering

    (@moserengineering)

    should I be making these changes in the public_html folders or the www folders?

    you can change the capitalisation in the header.php in the code for the 3/4 images.

    Thread Starter moserengineering

    (@moserengineering)

    should I be making these changes in the public_html folders or the www folders?

    Thread Starter moserengineering

    (@moserengineering)

    I got it to work. Thanks for all the help.

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Change header picture and use multiple pictures’ is closed to new replies.