Support » Plugin: Slideshow » Slideshow header on Esplanade theme

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author Stefan Boonstra

    (@stefanboonstra)

    Hi,

    If you want to place the slideshow right above the theme’s black navigation bar, I think the best place to put the slideshow’s PHP snippet is right above this line in your theme’s ‘header.php’ file: ‘<nav id="access">

    The result would be the following:

    <?php do_action('slideshow_deploy', 'the ID of your slideshow goes here'); ?>
    <nav id="access">

    Best regards,
    Stefan

    Thread Starter joaojulio

    (@joaojulio)

    Thank you, Stefan, but the problem still remains…this is how it shows:
    http://imageshack.us/photo/my-images/685/wrongjp.png/

    This is how I want it to show (just like the images):
    http://imageshack.us/photo/my-images/22/rightwayk.png/

    Probably it has nothing to do with your plug-in, but with the coding of the margins. Still, if you could point me in the right direction, I would appreciate it.

    Nonetheless, thank you once again for your help.

    Plugin Author Stefan Boonstra

    (@stefanboonstra)

    You should probably try to find out what elements wrap the header image (in this image: http://imageshack.us/photo/my-images/22/rightwayk.png/), and what id’s and classes affect its style.

    You should then wrap the slideshow in those elements.

    If I could see the website with the image in the header, I’d probably be able to point you to what elements you should wrap the slideshow in.

    Thread Starter joaojulio

    (@joaojulio)

    Thank you for your patience!

    The site: http://www.ptmedical.pt

    It is in the configuration that you asked.

    Best regards!

    Plugin Author Stefan Boonstra

    (@stefanboonstra)

    In the ‘header.php’ file, look for this line:

    <img id="header-image" src="http://www.ptmedical.pt/wp-content/uploads/2013/01/cropped-HEADER1.jpg" alt="ptmedical.pt" width="1082" height="280" />

    Then replace it with this:

    <div id="header-image" style="width: 1082px; height: 280px">
        <?php do_action('slideshow_deploy', 'the ID of your slideshow goes here'); ?>
    </div>
    Thread Starter joaojulio

    (@joaojulio)

    That code is not present on header.php

    Nonetheless, I tryed to replace it where I thought to be the right place, and this was the result.

    http://imageshack.us/photo/my-images/210/headerukq.png/

    I copy/paste the original code so you could have a better look, If you would!

    `<!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset=”<?php bloginfo(‘charset’); ?>” />
    <meta name=”viewport” content=”width=device-width” />
    <title><?php wp_title(); ?></title>
    <link rel=”profile” href=”http://gmpg.org/xfn/11&#8243; />
    <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
    <!–[if lt IE 9]>
    <script src=”<?php echo get_template_directory_uri(); ?>/scripts/html5.js” type=”text/javascript”></script>
    <![endif]–>
    <?php wp_head(); ?>
    </head>

    <body <?php body_class() ?>>
    <div id=”wrapper”>
    <header id=”header”>
    <<?php esplanade_title_tag( ‘site’ ); ?> id=”site-title”>” rel=”home”><?php bloginfo( ‘name’ ); ?></<?php esplanade_title_tag( ‘site’ ); ?>>
    <?php if( ! is_active_sidebar( 1 ) ) : ?>
    <<?php esplanade_title_tag( ‘desc’ ); ?> id=”site-description”><?php bloginfo( ‘description’ ); ?></<?php esplanade_title_tag( ‘desc’ ); ?>>
    <?php endif; ?>
    <?php get_sidebar( ‘header’ ); ?>
    <div class=”clear”></div>
    <?php if ( ( ” != get_header_image() ) || ( false != get_header_image() ) ) : ?>
    ” rel=”home”>
    <img id=”header-image” src=”<?php header_image(); ?>” alt=”<?php bloginfo( ‘name’ ); ?>” width=”<?php echo get_custom_header()->width; ?>” height=”<?php echo get_custom_header()->height; ?>” />

    <?php endif; ?>
    <nav id=”access”>
    Navigation
    <?php wp_nav_menu( array( ‘theme_location’ => ‘primary_nav’ ) ); ?>
    <?php get_search_form(); ?>
    <div class=”clear”></div>
    </nav><!– #access –>
    </header><!– #header –>

    Plugin Author Stefan Boonstra

    (@stefanboonstra)

    That looks better already.

    Although you seem to have placed a call to the slideshow into the code, where you only needed to place the ID of the slideshow. The ID of the slideshow is the number presented in the shortcode and PHP snippet on the slideshow page.

    The code actually is present in the file, it’s just encapsulated in PHP code. Some ten lines from the bottom you’ll find ‘<img id="header-image"‘, this is the code I mentioned before.

    You could remove this entire piece of code:

    <?php if ( ( '' != get_header_image() ) || ( false != get_header_image() ) ) : ?>
    " rel="home">
    <img id="header-image" src="<?php header_image(); ?>" alt="<?php bloginfo( 'name' ); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" />
    
    <?php endif; ?>

    And replace it with this:

    <div id="header-image" style="width: 1082px; height: 280px">
        <?php do_action('slideshow_deploy', 'the ID of your slideshow goes between these apostrophes, not the entire PHP snippet'); ?>
    </div>
    Thread Starter joaojulio

    (@joaojulio)

    Huummm…something isn´t right. Nothing happen.

    This is the code that I used:

    <?php get_sidebar( 'header' ); ?>
    <div class="clear"></div>
    <?php if ( ( '' != get_header_image() ) ||  ( false != get_header_image() ) ) : ?>
    <a <div id=&quot;header-image&quot; style=&quot;width: 1082px; height: 280px&quot;>
     <?php do_action('slideshow_deploy', ''74''); ?>
    </div>
    </a>
    <?php endif; ?>
    <nav id="access">
    <a class="nav-toggle" href="#">Navigation</a>
    <?php wp_nav_menu( array( 'theme_location' => 'primary_nav' ) ); ?>
    <?php get_search_form(); ?>
    <div class="clear"></div>
    </nav><!-- #access -->
    </header><!-- #header -->

    If I erase this code it gives me a sintax error.

    <?php if ( ( '' != get_header_image() ) || ( false != get_header_image() ) ) : ?>

    Thread Starter joaojulio

    (@joaojulio)

    IT IS DONE!!!
    My mistake, of course!

    First buck I make with the site it goes directly to YOU.

    Best regards!

    Thread Starter joaojulio

    (@joaojulio)

    False Alarm!

    Using IE9, it appears 2 boxes on top of each other.

    The first is empty and the second has the slideshow.
    If I use Firefox, there is no problem, but since half world uses IE9…

    Thread Starter joaojulio

    (@joaojulio)

    Now it is done…After many trials and errors!

    I feel like a blind man walking on the street…

    Thank you for your patience!

    Plugin Author Stefan Boonstra

    (@stefanboonstra)

    That’s great, I’m glad to hear (and see) that! You’re very welcome.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Slideshow header on Esplanade theme’ is closed to new replies.