WordPress.org

Ready to get started?Download WordPress

Forums

Slideshow
[resolved] Slideshow header on Esplanade theme (13 posts)

  1. joaojulio
    Member
    Posted 1 year ago #

    Hi,

    I´m a complete noob coding and programing, but I wanted to give it a try and started to make my own website with WordPress.

    Using the Esplanade theme, I tried to use Slideshow in the header, but I can´t make it work correctly.

    Don´t know where to put the code in the Header.php file!

    Help, please!

    http://wordpress.org/extend/plugins/slideshow-jquery-image-gallery/

  2. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    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

  3. joaojulio
    Member
    Posted 1 year ago #

    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.

  4. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  5. joaojulio
    Member
    Posted 1 year ago #

    Thank you for your patience!

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

    It is in the configuration that you asked.

    Best regards!

  6. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    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>
  7. joaojulio
    Member
    Posted 1 year ago #

    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" />
    <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 -->

  8. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    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>
  9. joaojulio
    Member
    Posted 1 year ago #

    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() ) ) : ?>

  10. joaojulio
    Member
    Posted 1 year ago #

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

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

    Best regards!

  11. joaojulio
    Member
    Posted 1 year ago #

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

  12. joaojulio
    Member
    Posted 1 year ago #

    Now it is done...After many trials and errors!

    I feel like a blind man walking on the street...

    Thank you for your patience!

  13. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.