search

zurb / orbit

454 stars 96 forks source link

Orbit Caption with Wordpress (no plugin) #117

Open ghost opened 12 years ago

ghost commented 12 years ago

I am trying to add orbit slider with Wordpress theme and getting trouble to make it works with caption and title or the post

I want to display all latest post thumbnail on the slider (number defined in query) and excerpt as a caption + post title. I am getting images without any issue but I am not able to understand how to add caption dynamicaly within the same while loop. Because I have to keep loop in between

and caption div starts after featured div. So in this case I have to use two different while loop and than it is giving me strange result. May be because I don't know how to add #htmlcaption

Below is my code. I would really appreciate your help

        <div id="featured">
            <?php 
                //SliderContent(); 
                $arrParams = array(
                 'post_type' => array('post'),
                 'posts_per_page' => 5
                );

                $arrQuery = array();
                parse_str($query_string,$arrQuery);

                $temp = $wp_query;
                $wp_query = null;
                $wp_query = new WP_Query();
                $wp_query->query(array_merge($arrQuery, $arrParams));

                while ( $wp_query->have_posts() ) : $wp_query->the_post(); // loop for posts

                $title_attr = array(
                    'title' => get_the_title(),
                    'alt' => get_the_title()
                );  ?>

                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                    <?php if ( has_post_thumbnail() ) {
                        the_post_thumbnail('full', $title_attr);
                    } else { ?>
                        <img src="<?php bloginfo('template_directory'); ?>/images/no-thumb-640.jpg" alt="<?php the_title(); ?>" class="wp-post-image" />
                    <?php } ?>                          
                </a>    

            <?php endwhile; ?>                  

        </div>
dannymichel commented 12 years ago

Please let me know how this goes for you. I'm looking to do the same thing

ghost commented 12 years ago

@dannymichel

This works completely fine without any issue for me. However for caption I had to modified this code a bit.

dannymichel commented 12 years ago

Ok, the caption works fine for me too, but I'm having a hard time trying to figure out how to add a link to the image and how to add the title as well. Any help would be appreciated

dannymichel commented 12 years ago

function slides_register() {

$labels = array(
    'name' => _x('Slideshow', 'post type general name'),
    'singular_name' => _x('Slide', 'post type singular name'),
    'add_new' => _x('Add New', 'slide'),
    'add_new_item' => __('Add New Slide'),
    'edit_item' => __('Edit Slide'),
    'new_item' => __('New Slide'),
    'all_items' => __('All Slides'),
    'view_item' => __('View Slide'),
    'search_items' => __('Search Slides'),
    'not_found' =>  __('Nothing found'),
    'not_found_in_trash' => __('Nothing found in Trash'),
    'parent_item_colon' => '',
    'menu_name' => 'Slides'
);

$args = array(
    'labels' => $labels,
    'public' => true,
    'publicly_queryable' => true,
    'show_ui' => true,
    'show_in_menu' => true,
    'query_var' => true,
    'rewrite'   => true,
    'capability_type' => 'post',
    'has_archive' => false,
    'hierarchical' => false,
    'menu_position' => 7,
        'rewrite' => array(  
        'slug' => 'slideshow-item',  
        'with_front' => false,  
        'feed' => true,  
        'pages' => true ),
    'supports' => array('title','editor','thumbnail', 'excerpt')
  ); 

register_post_type( 'slides' , $args );

}

add_action('init', 'slides_register');

<?php wp_reset_query(); ?>

ghost commented 12 years ago

Check this slider http://pixelngrain.com. I have used this code and I didn't linked image but Caption title. Here I have done. This is my full working code.

array('post', 'news'), 'posts_per_page' => 5 ); $slider_query = new WP_Query( $args ); // Display the featured images in div echo ''; // Print the captions while ( $slider_query->have_posts() ) : $slider_query->the_post(); ?>

How can I strip html tags in code here on github? any idea

dannymichel commented 12 years ago

So replace

<?php wp_reset_query(); ?>

with

array('post', 'news'), 'posts_per_page' => 5 ); $slider_query = new WP_Query( $args ); // Display the featured images in div echo ' '; while ( $slider_query->have_posts() ) : $slider_query->the_post() ; $attr = array( 'alt' => 'the-alt-tag', 'data-caption' => '#htmlCaption-'.$slider_query->current_post, ); if ( has_post_thumbnail() ) { the_post_thumbnail('home-slider-thumb', $attr); } else { ?> rewind_posts(); echo ' '; // Print the captions while ( $slider_query->have_posts() ) : $slider_query->the_post(); ?>

?

dannymichel commented 12 years ago

Can you pastebin it for me? the code parser here doesnt seem to be working http://pastie.org/5091886

ghost commented 12 years ago

@dannymichel

Here is the complete code now pasted http://pastie.org/5091895

ghost commented 12 years ago

@dannymichel

Have you checked code? Does it works for you? Also please provide modified code so I also can check for future use. :)