WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
[resolved] Slideshow i header Theme by Artisteer - How?? (7 posts)

  1. larsbro
    Member
    Posted 1 year ago #

    Hi

    I would like to place a slideshow in the header of a theme made with Artisteer ... I've view the video but the code in header.php doesnt look nothing like in the video :-(

    Can someone please help??

    Greetings from Lars, Copenhagen

    This is how the header.php looks like

    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset="<?php bloginfo('charset') ?>" />
    <title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>
    <!-- Created by Artisteer v4.0.0.58475 -->
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>" media="screen" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php
    remove_action('wp_head', 'wp_generator');
    if (is_singular() && get_option('thread_comments')) {
    	wp_enqueue_script('comment-reply');
    }
    wp_head();
    ?>
    </head>
    <body <?php body_class(); ?>>
    
    <div id="wst-main">
        <div id="wst-hmenu-bg" class="wst-bar wst-nav clearfix">
        </div>
        <div class="wst-sheet clearfix">
    
    <?php if(theme_has_layout_part("header")) : ?>
    <header class="clearfix wst-header<?php echo (theme_get_option('theme_header_clickable') ? ' clickable' : ''); ?>"><?php get_sidebar('header'); ?>
    
        <div class="wst-shapes">
    <?php if(theme_get_option('theme_header_show_headline')): ?>
    	<?php $headline = theme_get_option('theme_'.(is_home()?'posts':'single').'_headline_tag'); ?>
    	<<?php echo $headline; ?> class="wst-headline" data-left="9.42%">
        <a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a>
    </<?php echo $headline; ?>>
    <?php endif; ?>
    <?php if(theme_get_option('theme_header_show_slogan')): ?>
    	<?php $slogan = theme_get_option('theme_'.(is_home()?'posts':'single').'_slogan_tag'); ?>
    	<<?php echo $slogan; ?> class="wst-slogan" data-left="10.87%"><?php bloginfo('description'); ?></<?php echo $slogan; ?>>
    <?php endif; ?>
    
                </div>
    
    </header>
    <?php endif; ?>
    
    <nav class="wst-nav clearfix">
        <div class="wst-nav-inner">
        <?php
    	echo theme_get_menu(array(
    			'source' => theme_get_option('theme_menu_source'),
    			'depth' => theme_get_option('theme_menu_depth'),
    			'menu' => 'primary-menu',
    			'class' => 'wst-hmenu'
    		)
    	);
    ?>
            </div>
        </nav>
    <div class="wst-layout-wrapper clearfix">
                    <div class="wst-content-layout">
                        <div class="wst-content-layout-row">
                            <div class="wst-layout-cell wst-content clearfix">

    http://wordpress.org/extend/plugins/meteor-slides/

  2. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Lars, the video is for the Twenty Eleven theme. Where you put the slideshow template tag depends on where exactly you want the slideshow, above or below the nav, etc.

    Could you post a link to the site you're working on and let me know where you want it?

  3. larsbro
    Member
    Posted 1 year ago #

    Hi Josh

    Thanks for the quick response!!!

    I would like the slider above the horizontal menu.

    Here is the link for the testsite: testsite

    It's images like this i'll use: Image

    Is that information enough?

    Am i understanding your plugin correct in that way that the slider included in the header.php can be overruled by a single image ("Page header Image") on a specific page/post?
    (sorry my english is poor)

    As a appreciation and thanks in advance I'll make a donation right now :-)

    //Lars, Copenhagen

  4. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    Thanks a lot for your support and feedback Lars!

    You can replace the whole header area above the navigation with a slideshow by taking this bit of code:

    <div class="wst-shapes">
    <?php if(theme_get_option('theme_header_show_headline')): ?>
    	<?php $headline = theme_get_option('theme_'.(is_home()?'posts':'single').'_headline_tag'); ?>
    	<<?php echo $headline; ?> class="wst-headline" data-left="9.42%">
        <a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a>
    </<?php echo $headline; ?>>
    <?php endif; ?>
    <?php if(theme_get_option('theme_header_show_slogan')): ?>
    	<?php $slogan = theme_get_option('theme_'.(is_home()?'posts':'single').'_slogan_tag'); ?>
    	<<?php echo $slogan; ?> class="wst-slogan" data-left="10.87%"><?php bloginfo('description'); ?></<?php echo $slogan; ?>>
    <?php endif; ?>
    
                </div>

    And replacing it with this:

    <div class="wst-shapes">
    <?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
     </div>

    That will be just the slides though, no other content like the title and description that you have on there currently. If you wanted to replace the static background image with a slideshow and keep that content in there you would have to style them with CSS to be positioned above the slideshow.

    By default the slideshow will load on all pages if it is added to the header.php file. You can add a PHP conditional to this, like if it is the homepage load the slideshow, otherwise load a certain static image. You could also use featured images if you wanted to like how Twenty Eleven works, but I don't think your theme supports that by default so you would have to add that in.

  5. larsbro
    Member
    Posted 1 year ago #

    Hi Josh

    Thanks for your reply .... I'll try it out later today

    // Lars

  6. larsbro
    Member
    Posted 1 year ago #

    Hi Josh

    Just had to try it out before leaving for work ;-)

    The slider is now working, but the images are scaling (IE and FireFox) :-( .... can you help with that?

    Link

    How can I "lift" the title and description above the slides so that they are visible?
    is that possible at all with your slider?

    You can add a PHP conditional to this, like if it is the homepage load the slideshow, otherwise load a certain static image.

    Could you please give me a hint on how that PHP-code could look like?

    If I want different slideshow on each page will that be possible with the same PHP-code?

    Sorry for all the questions :-)

    Thanks

    //Lars, Copenhagen

  7. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    It looks like the slideshow is shrunk a bit in all browsers. The slideshow is 981px wide, but the "wst-sheet" container is only 900px wide. To make a slideshow that large fit, the container needs to be resized to match:

    .wst-sheet {
    background: #F9FAFB;
    background: transparent;
    margin: 0 auto;
    position: relative;
    cursor: auto;
    width: 981px;
    z-index: auto !important;
    }

    Layering the title and description over the slideshow is possible, this wouldn't be part of the slideshow, just something you'd style in the theme. That content would be absolutely positioned and set to a high z-index. Just like how the slideshow captions can be styled, take at the CSS for that as an example.

    Here's an example of a PHP conditional that would load the homepage slideshow on the front page, the about slideshow on the about page, and a default static image on all other pages:

    <?php if ( is_front_page() ) {
    	if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow( "homepage", "" ); }
    } elseif ( is_page( 'about' ) ) {
    	if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow( "about", "" ); }
    } else {
    	echo '<img src="default.jpg" alt="" />';
    } ?>

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic