WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
[resolved] [closed] meteor slider homepage responsive theme 1.7.2 (28 posts)

  1. qmic76
    Member
    Posted 2 years ago #

    I'm using the responsive theme 1.7.2 and it has a "featured" div on home page by default. I would like to replace that feature box with the meteor slider in its place but i'm not sure where to cut/paste the template tag.
    I searched using chrome "expect element" on that featured box above the 3 home widgets and it's in HOME.PHP which I posted the code at the bottom of my post. I don't know where to stick the template tag much less what to comment out if anything of this existing code to get the slideshow to show up. I want it the same width but the height I can be play around with in the settings. Please help as to where I put the template tag. My site mks76.com/mm3000_wp/wk1/

    <?php get_header(); ?>
    
            <div id="featured" class="grid col-940">
    
            <div class="grid col-460">
    
                <?php $options = get_option('responsive_theme_options');
    			// First let's check if headline was set
    			    if ($options['home_headline']) {
                        echo '<h1 class="featured-title">';
    				    echo $options['home_headline'];
    				    echo '</h1>';
    			// If not display dummy headline for preview purposes
    			      } else {
    			        echo '<h1 class="featured-title">';
    				    echo __('Hello, World!','responsive');
    				    echo '</h1>';
    				  }
    			?>
    
                <?php $options = get_option('responsive_theme_options');
    			// First let's check if headline was set
    			    if ($options['home_subheadline']) {
                        echo '<h2 class="featured-subtitle">';
    				    echo $options['home_subheadline'];
    				    echo '</h2>';
    			// If not display dummy headline for preview purposes
    			      } else {
    			        echo '<h2 class="featured-subtitle">';
    				    echo __('Your H2 subheadline here','responsive');
    				    echo '</h2>';
    				  }
    			?>
    
                <?php $options = get_option('responsive_theme_options');
    			// First let's check if content is in place
    			    if ($options['home_content_area']) {
                        echo '<p>';
    				    echo $options['home_content_area'];
    				    echo '</p>';
    			// If not let's show dummy content for demo purposes
    			      } else {
    			        echo '<p>';
    				    echo __('Your title, subtitle and this very content is editable from Theme Option. Call to Action button and its destination link as well. Image on your right can be an image or even YouTube video if you like.','responsive');
    				    echo '</p>';
    				  }
    			?>
    
                <?php $options = get_option('responsive_theme_options'); ?>
    		    <?php if ($options['cta_button'] == 0): ?>
                <div class="call-to-action">
    
                <?php $options = get_option('responsive_theme_options');
    			// First let's check if headline was set
    			    if (!empty($options['cta_url']) && $options['cta_text']) {
    					echo '<a href="'.$options['cta_url'].'" class="blue button">';
    					echo $options['cta_text'];
    				    echo '</a>';
    			// If not display dummy headline for preview purposes
    			      } else {
    					echo '<a href="#nogo" class="blue button">';
    					echo __('Call to Action','responsive');
    				    echo '</a>';
    				  }
    			?>  
    
                </div><!-- end of .call-to-action -->
                <?php endif; ?>         
    
            </div><!-- end of .col-460 -->
    
            <div id="featured-image" class="grid col-460 fit"> 
    
                <?php $options = get_option('responsive_theme_options');
    			// First let's check if image was set
    			    if (!empty($options['featured_content'])) {
    					echo $options['featured_content'];
    		    // If not display dummy image for preview purposes
    			      } else {
                        echo '<img class="aligncenter" src="'.get_stylesheet_directory_uri().'/images/featured-image.png" width="440" height="300" alt="" />';
     				  }
    			?> 
    
            </div><!-- end of #featured-image --> 
    
            </div><!-- end of #featured -->

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

  2. qmic76
    Member
    Posted 2 years ago #

    Please can someone help me with the template tag placement for this theme

  3. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    If you want to replace all the content on the featured box with a slideshow, delete all the code inside the container and add the slideshow template tag, like this:

    <?php get_header(); ?>
    
            <div id="featured" class="grid col-940">
    
    			<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
    
            </div><!-- end of #featured -->
    
    <?php get_sidebar('home'); ?>
    <?php get_footer(); ?>
  4. snowandco
    Member
    Posted 2 years ago #

    I am using the same theme, and I would like a slideshow to replace the featured image. I tried replacing everything under featured image w/ the template tag given above, but I just end up with a grey box. What am I missing? I feel like I am just zoned out and missing something really simple. `<div id="featured-image" class="grid col-460 fit">

    <?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); }?>

    </div><!-- end of #featured-image --> `

  5. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    Can you post a link so I can check it out?

  6. snowandco
    Member
    Posted 2 years ago #

    http://snowboatbuilding.com/

    I disabled it for now bc it was just the grey box in the featured image space. I want to get rid of the image in the background (yuck), and just put a slideshow in the featured image div.

  7. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    If you can add the slideshow back in I can check it out and see what's going on.

  8. snowandco
    Member
    Posted 2 years ago #

    Thanks for the quick response! I've re-enabled the slide show!

    http://snowboatbuilding.com/

  9. snowandco
    Member
    Posted 2 years ago #

    someone suggested using this code in my home.php instead:

    <?php echo do_shortcode('[meteor_slideshow]') ?>

  10. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    No, there's no reason to do that, you can use the template tag if you want to add it to a template file:

    <?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?

    But I don't see a slideshow on there, how are you adding it to the page?

  11. qmic76
    Member
    Posted 2 years ago #

    Hey Jleuze,

    Thanks for the help it worked on the responsive, now I want to put it on the twenty eleven theme and the header php looks a little different (see below). I would like to be in the place of the static header images on the theme with the same dimensions.
    Let me where to paste it and what original code to remove or comment out so the slider can display correctly above the nav and under the site title and search box..if you are familiar with 20/11 theme then basically I want the slider where the header images are placed. Help

    The header code looks like...

    </head>
    
    <body <?php body_class(); ?>>
    <div id="page" class="hfeed">
    	<header id="branding" role="banner">
    			<hgroup>
    				<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
    				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
    			</hgroup>
    
    			<?php
    				// Check to see if the header image has been removed
    				$header_image = get_header_image();
    				if ( $header_image ) :
    					// Compatibility with versions of WordPress prior to 3.4.
    					if ( function_exists( 'get_custom_header' ) ) {
    						// We need to figure out what the minimum width should be for our featured image.
    						// This result would be the suggested width if the theme were to implement flexible widths.
    						$header_image_width = get_theme_support( 'custom-header', 'width' );
    					} else {
    						$header_image_width = HEADER_IMAGE_WIDTH;
    					}
    					?>
    			<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
    				<?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() && has_post_thumbnail( $post->ID ) &&
    							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) &&
    							$image[1] >= $header_image_width ) :
    						// Houston, we have a new header image!
    						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
    					else :
    						// Compatibility with versions of WordPress prior to 3.4.
    						if ( function_exists( 'get_custom_header' ) ) {
    							$header_image_width  = get_custom_header()->width;
    							$header_image_height = get_custom_header()->height;
    						} else {
    							$header_image_width  = HEADER_IMAGE_WIDTH;
    							$header_image_height = HEADER_IMAGE_HEIGHT;
    						}
    						?>
    					<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
    				<?php endif; // end check for featured image or standard header ?>
    			</a>
    			<?php endif; // end check for removed header image ?>
    
    			<?php
    				// Has the text been hidden?
    				if ( 'blank' == get_header_textcolor() ) :
    			?>
    				<div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>">
    				<?php get_search_form(); ?>
    				</div>
    			<?php
    				else :
    			?>
    				<?php get_search_form(); ?>
    			<?php endif; ?>
    
    			<nav id="access" role="navigation">
    				<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
    				<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
    				<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
    				<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
    				<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
    				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    			</nav><!-- #access -->
    	</header><!-- #branding -->
  12. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    Take a look at this thread for info in how to remove the featured header image in Twenty Eleven and replace it with a slideshow.

  13. seanvalier1
    Member
    Posted 1 year ago #

    meteor slider homepage responsive theme

    Hello i've been trying to get the meteor slides plugin working on the responsive theme. I've search everything on wordpress and google and can't get it to work. I've just started the web site and would like to put a slide on the first page in the feature box ( like the first post ).

    I tried replacing the code with what you said:

    <?php get_header(); ?>
    
            <div id="featured" class="grid col-940">
    
    			<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?
         </div><!-- end of #featured -->
    
    <?php get_sidebar('home'); ?>
    <?php get_footer(); ?>

    The image is ther but it's hidden. I've tried on pages as well and it's the same thing.
    In firebug i get this

    <img alt="" src="http://isaureart.ch/wp-content/uploads/2012/09/paint1web1-436x200.jpg" class="meteor-shim" style="visibility: hidden;">

    Please someone help me.
    http://www.isaureart.ch/

  14. cbattle
    Member
    Posted 1 year ago #

    You can try adding the following to your style sheet. This seemed to work for me. (I am using the Responsive theme as well.)

    .meteor-shim {visibility:visible !important;}

    Also, I didn't modify the template file; I just put the shortcode into the page, like this:
    [meteor_slideshow]

    Hope this helps! Good luck...

    Corinne

  15. seanvalier1
    Member
    Posted 1 year ago #

    Thanks you so much it's all good now

  16. abba_mika
    Member
    Posted 1 year ago #

    Hi there,

    I am looking to do something VERY similar with responsive and meteor_slideshow...the difference being I want to keep the information like text, and button, and remove just the right image. I want to then replace the #fff background with the slide show. SO, the background is actually a recycling bunch of pictures instead of a solid background. Is this possible? THANKS!

  17. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    @abba_mika Just to clarify, in the white box on the homepage where it says "Hello, World!", you want to remove that image? And you want to replace the whole white box with the slideshow, and have the Hello World title and other text to the left as the slide caption on top of the slide image, is that right?

  18. abba_mika
    Member
    Posted 1 year ago #

    I ideally wanted to take it a step further and have the slider load new text, button and image with each fade...But I think that may be too complicated to create. So what you wrote is correct. Thanks for the help! Sorry to make this so complicated.

  19. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    Yeah, the text and button would be the caption of the slide, each slide would have its own? What about the image though, you still want the image there to the right, or you want the background image behind the text and button to be the slide image?

  20. abba_mika
    Member
    Posted 1 year ago #

    Yes, all correct. No need for the additional image to the right...the slide show would be the image. Thanks again!

  21. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    OK, that shouldn't be too tough to do. You would need to set the slideshow dimensions in the settings to 960x462 so it matched that spot in the theme.

    Then all the other content aside from the image would be the caption for the slide, you can add that using a custom slideshow template. If you use the same markup as the theme, the theme might style these elements how you want them automatically, but you might need to copy those styles and add new rules for the slideshow captions.

    You can use the slide post title as the title in the caption, and the slide link as the link for the call to action. For adding the subtitle, description, and call to action text, I would add a custom metabox to the slide posts using Advanced Custom Fields.

  22. abba_mika
    Member
    Posted 1 year ago #

    Hi Josh, Thank you so much for your help. I have been able to substitute the original content for the slider. Link here: http://repenso.com/identity/ but I have been unable to figure out how to add the captions (content) ect. to the slider as you suggested. Could you provide a little more incite as to how I would go about this? I have added <p><?php the_title(); ?></p> to the script, but not sure where to add all of this (the captions content):

    <?php $options = get_option('responsive_theme_options');
    			// First let's check if headline was set
    			    if ($options['home_headline']) {
                        echo '<h1 class="featured-title">';
    				    echo $options['home_headline'];
    				    echo '</h1>';
    			// If not display dummy headline for preview purposes
    			      } else {
    			        echo '<h1 class="featured-title">';
    				    echo __('Hello, World!','responsive');
    				    echo '</h1>';
    				  }
    			?>
    
                <?php $options = get_option('responsive_theme_options');
    			// First let's check if headline was set
    			    if ($options['home_subheadline']) {
                        echo '<h2 class="featured-subtitle">';
    				    echo $options['home_subheadline'];
    				    echo '</h2>';
    			// If not display dummy headline for preview purposes
    			      } else {
    			        echo '<h2 class="featured-subtitle">';
    				    echo __('Your H2 subheadline here','responsive');
    				    echo '</h2>';
    				  }
    			?>
    
                <?php $options = get_option('responsive_theme_options');
    			// First let's check if content is in place
    			    if (!empty($options['home_content_area'])) {
                        echo '<p>';
    					echo do_shortcode($options['home_content_area']);
    				    echo '</p>';
    			// If not let's show dummy content for demo purposes
    			      } else {
    			        echo '<p>';
    				    echo __('Your title, subtitle and this very content is editable from Theme Option. Call to Action button and its destination link as well. Image on your right can be an image or even YouTube video if you like.','responsive');
    				    echo '</p>';
    				  }
    			?>
    
                <?php $options = get_option('responsive_theme_options'); ?>
    		    <?php if ($options['cta_button'] == 0): ?>
                <div class="call-to-action">
    
                <?php $options = get_option('responsive_theme_options');
    			// First let's check if headline was set
    			    if (!empty($options['cta_url']) && $options['cta_text']) {
    					echo '<a href="'.$options['cta_url'].'" class="red button">';
    					echo $options['cta_text'];
    				    echo '</a>';
    			// If not display dummy headline for preview purposes
    			      } else {
    					echo '<a href="#nogo" class="red button">';
    					echo __('Call to Action','responsive');
    				    echo '</a>';
    				  }
    			?>  
    
                </div><!-- end of .call-to-action -->
                <?php endif; ?>

    Thank you!

  23. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    Great, you're off to a good start! The thing with the title and other content for the slides is that you need to rebuild all that in the slideshow template. You have to manage that content from the slide posts, not from the theme options, so that each slide has it's own content.

    So all you really need from the old code that you took out of that section is the mark up structure so that you can style it like it was originally, but as a slideshow.

    You wouldn't want to use paragraph tags for the slide title, you want to set it up like the original so the markup that is generate matches. So the slide title would look something like this:

    <h1 class="featured-title"><?php the_title(); ?></h1>

    For the rest of the content, you'd have to add a new custom metabox to the slide posts to add that content. I like to use Advanced Custom Fields to do this. Here's a tutorial on using Meteor Slides with Advanced Custom Fields.

  24. jaiswalarchana
    Member
    Posted 1 year ago #

    hello, thank you for your help
    can i get the captions to show up with the images in the meteor slideshow?
    my website is: ArchanaInternational.com

    :)

  25. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    Did you follow the example in the documentation on custom slideshow templates?

  26. donreyvargas
    Member
    Posted 1 year ago #

    @ Josh,

    sent you email. i seem cant find to put the SLIDERS on my website.

    http://holidaycrafts.com.au/

    i dont know where to copy and paste the CODE for sliders on my website.

    please help,
    Don

  27. camolas08
    Member
    Posted 1 year ago #

    Hello Josh,

    I'm so sorry to bother but I'm having trouble with finding the location to paste the code as well. I'm using the responsive theme but I haven't been able to change the feature contents to the slideshow. Could you please help? Basically I only need to know where to paste the slideshow code.

    Thank you very much

    Vasco

  28. esmi
    Forum Moderator
    Posted 1 year ago #

    @amolas08: As per the Forum Welcome, please post your own topic instead of posting in an 11 month old thread that references an older version of WordPress.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic