Linking header images

  • Manuel Cervera

    (@manuel-cervera)


    11 years ago

    Hello,
    I just created my site with WordPress using the theme “Yoko”
    In the header, as default options can either place a still image or choose that producing a series of images that come by default. But in neither case can bind to a particular image page. And as the set of images, they appear randomly.
    My purpose is to use this set but placing images I want, which in turn are linked to the pages that I choose.
    How I can do this?

    I’m trying to figure out the operation. Perhaps with that, I might be more focused on the issues.
    These are the questions that I have clarification on this point:
    The photo (s) of “header” that comes with Yoko, would come to be like a “background” of the “header”?
    About that I can overlay text (not being part of the photo) linkable?
    This text may vary on each page?
    If the answers were positive would help me to make my campaigns.

    Thanks for your help.
    I put here the code of the “header”. If you need to replace the code in another file tell me:

    <?php
/**
* @package WordPress
* @subpackage Yoko
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title><?php
  /*
    * Print the <title> tag based on what is being viewed.
    */
  global $page, $paged;
  wp_title( '|', true, 'right' );
  bloginfo( 'name' );
  $site_description = get_bloginfo( 'description', 'display' );
  if ( $site_description && ( is_home() || is_front_page() ) )
      echo " | $site_description";
  if ( $paged >= 2 || $page >= 2 )
      echo ' | ' . sprintf( __( 'Page %s', 'yoko' ), max( $paged, $page ) );
?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->

<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="clearfix">
  <header id="branding">
      <nav id="mainnav" class="clearfix">
        <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
      </nav><!-- end mainnav -->

      <?php global $yoko_options;
      $yoko_settings = get_option( 'yoko_options', $yoko_options ); ?>

      <hgroup id="site-title">
      <?php if( $yoko_settings['custom_logo'] ) : ?>
        <a href="<?php echo home_url( '/' ); ?>" class="logo"><img src="<?php echo $yoko_settings['custom_logo']; ?>" alt="<?php bloginfo('name'); ?>" /></a>
      <?php else : ?>
        <h1><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
            <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
      <?php endif; ?>
      </hgroup><!-- end site-title -->

        <?php
      // The header image
      // Check if this is a post or page, if it has a thumbnail, and if it's a big one
        if ( is_singular() &&
            current_theme_supports( 'post-thumbnails' ) &&
            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 , array(1102,350), array('class' => 'headerimage'));
                  elseif ( get_header_image() ) : ?>
                  <img src="<?php header_image(); ?>" class="headerimage" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /><!-- end headerimage -->
              <?php endif; ?>
              <div class="clear"></div>

      <nav id="subnav">
        <?php
        if (is_nav_menu( 'Sub Menu' ) ) {
        wp_nav_menu( array('menu' => 'Sub Menu' ));} ?>
      </nav><!-- end subnav -->
</header><!-- end header -->

Viewing 1 replies (of 1 total)
  • Thread Starter Manuel Cervera

    (@manuel-cervera)

    11 years ago

    I have found this in “functions” file:

    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'yoko_header_image_width', 1102 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'yoko_header_image_height', 350 ) );

    I fugure out that changing HEIGHT I could the heingt of the images, couldn’t I? I am interested in this.

    I have also found this:
    define( 'NO_HEADER_TEXT', true );

    I figure out that changing true to false I could put text in the header.

    And I found this too:

    register_default_headers( array(
         'ginko' => array(
         'url' => '%s/images/headers/ginko.jpg',
         'thumbnail_url' => '%s/images/headers/ginko-thumbnail.jpg',
         /* translators: header image description */
         'description' => __( 'Ginko', 'yoko' )
         ),
         'flowers' => array(
         'url' => '%s/images/headers/flowers.jpg',
         'thumbnail_url' => '%s/images/headers/flowers-thumbnail.jpg',
         /* translators: header image description */
         'description' => __( 'Flowers', 'yoko' )
         ),
         'plant' => array(
         'url' => '%s/images/headers/plant.jpg',
         'thumbnail_url' => '%s/images/headers/plant-thumbnail.jpg',
         /* translators: header image description */
         'description' => __( 'Plant', 'yoko' )
         ),
         'sailing' => array(
         'url' => '%s/images/headers/sailing.jpg',
         'thumbnail_url' => '%s/images/headers/sailing-thumbnail.jpg',
         /* translators: header image description */
         'description' => __( 'Sailing', 'yoko' )
         ),
         'cape' => array(
         'url' => '%s/images/headers/cape.jpg',
         'thumbnail_url' => '%s/images/headers/cape-thumbnail.jpg',
         /* translators: header image description */
         'description' => __( 'Cape', 'yoko' )
         ),
         'seagull' => array(
         'url' => '%s/images/headers/seagull.jpg',
         'thumbnail_url' => '%s/images/headers/seagull-thumbnail.jpg',
         /* translators: header image description */
         'description' => __( 'Seagull', 'yoko' )
         )
   ) );
}
endif;

    Changing names I can put the images I want, right?
    How could link pictures here?
    What does “header image description” mean?
    What does “description ‘=> __ (‘ Seagull ‘,’ yoko ‘)” mean?
    How could assign a picture to each page

    Sorry my questions, but I am not a programmer and I need to solve this for my website.
    Thanks a lot.

Viewing 1 replies (of 1 total)
  • The topic ‘Linking header images’ is closed to new replies.