WordPress.org

Ready to get started?Download WordPress

Forums

CPT Bootstrap Carousel
[resolved] Adding custom field support? (4 posts)

  1. StenW
    Member
    Posted 8 months ago #

    Hey Phil.

    I really like the CPT Carousel, but I need to add a feature small feature. I want tot have a button on the individual carousel items, which I can link to either an external or internal url. I think I am pretty close to solving it, but I don´t quite understand your loop.

    I added custom field to the $args / supports
    'supports' => array('title','excerpt','thumbnail', 'page-attributes', 'custom-fields')
    I called the key link and the value is any url set from the backend.

    I updated the loop:

    function cptbc_frontend($atts){
    	$id = rand(0, 999); // use a random ID so that the CSS IDs work with multiple on one page
    	$args = array( 'post_type' => 'cptbc', 'orderby' => 'menu_order', 'order' => 'ASC');
    	$loop = new WP_Query( $args );
    	$images = array();
    	while ( $loop->have_posts() ) {
    		$loop->the_post();
    		if ( '' != get_the_post_thumbnail() ) {
    			$title = get_the_title();
    			$content = get_the_excerpt();
    			$image = get_the_post_thumbnail( get_the_ID(), 'full' );
    			$link = get_post_meta($post->ID,'link',true);
    			$images[] = array('title' => $title, 'content' => $content, 'image' => $image, 'link' => $link);
    		}
    	}
    	if(count($images) > 0){
    		ob_start();
    		?>

    I also updated the output to this:

    ob_start();
    		?>
    		<div id="cptbc_<?php echo $id; ?>" class="carousel slide">
    			<ol class="carousel-indicators">
    			<?php foreach ($images as $key => $image) { ?>
    				<li data-target="#cptbc_<?php echo $id; ?>" data-slide-to="<?php echo $key; ?>" data-interval="<?php echo $atts['interval']; ?>" <?php echo $key == 0 ? 'class="active"' : ''; ?>></li>
    			<?php } ?>
    			</ol>
    			<div class="carousel-inner">
    			<?php foreach ($images as $key => $image) { ?>
    				<div class="item <?php echo $key == 0 ? 'active' : ''; ?>">
    					<?php echo $image['image']; ?>
    					<?php if($atts['showcaption'] === 'true') { ?>
    						<div class="carousel-caption">
    							<h2><?php echo $image['title']; ?></h2>
    							<p class="lead"><?php echo $image['content']; ?></p>
    							<?php echo '<a class="btn btn-large btn-primary" href="' . $image['link'] . '">Läs mer</a>';?>
    						</div>
    					<?php } ?>
    				</div>
    			<?php } ?>
    			</div>
    			<?php if($atts['showcontrols'] === 'true') { ?>
    				<a class="left carousel-control" href="#cptbc_<?php echo $id; ?>" data-slide="prev">‹</a>
    				<a class="right carousel-control" href="#cptbc_<?php echo $id; ?>" data-slide="next">›</a>
    			<?php } ?>
    		</div>
    <?php }
    	$output = ob_get_contents();
    	ob_end_clean();

    I still can´t get the href to be set from the backend, where I think there is something wrong with the loop.
    For full code please see: http://wordpress.stackexchange.com/questions/108369/echo-custom-field-value?noredirect=1#comment150918_108369

    http://wordpress.org/plugins/cpt-bootstrap-carousel/

  2. Phil Ewels
    Member
    Plugin Author

    Posted 8 months ago #

    Hi StenW ,

    Your timing is very good, I was working on something similar last night! Github user @atnon made a very similar modification to the code 10 days ago, also using custom-fields (though giving the image a link rather than putting a link in the caption). You can see his pull request here: https://github.com/atnon/cpt-bootstrap-carousel/blob/ed4e8bf2e2ebe73a54d8de7f0e3075f830993029/trunk/cpt-bootstrap-carousel.php

    I re-wrote his code and released an update to the plugin last night, so if you're happy with just the image having a link you should be able to do that with the update.

    I can't see any problems with your code on the face of it. If I were you, I'd update the plugin to incorporate my new code and then make a small edit just to change where the link is being printed in the output. That way you get a cleaner meta-box instead of relying on custom fields and it should work without much debugging.

    Example (untested):

    <div class="item <?php echo $key == 0 ? 'active' : ''; ?>">
    	<?php echo $image['image'];
    	if($atts['showcaption'] === 'true') { ?>
    		<div class="carousel-caption">
    			<h4><?php echo $image['title']; ?></h4>
    			<p><?php echo $image['content']; ?></p>
     			<?php if($image['url']) {
    				echo '<a href="'.$image['url'].'"';
    				if($image['url_openblank']) {
    					echo ' target="_blank"';
    				}
    				echo '>Läs mer</a>';
    			} ?>
    		</div>
    	<?php } ?>
    </div>

    I hope that helps, let me know how you get on..

    Phil

  3. Phil Ewels
    Member
    Plugin Author

    Posted 8 months ago #

    Also, if you like the plugin I'd appreciate you leaving a review here - it makes a big difference! Cheers..

  4. StenW
    Member
    Posted 8 months ago #

    My solution, which is very similar to the one above, but uses a button instead of making the image a link.

    <?php
    /*
    Plugin Name: CPT Bootstrap Carousel
    Plugin URI: http://www.tallphil.co.uk/bootstrap-carousel
    Description: A custom post type for choosing images and content which outputs <a href="http://twitter.github.io/bootstrap/javascript.html#carousel" target="_blank">Bootstrap Carousel</a> from a shortcode. Requires Bootstrap javascript and CSS to be loaded separately.
    Version: 1.1
    Author: Phil Ewels
    Author URI: http://phil.ewels.co.uk
    License: GPLv2
    */
    
    // Custom Post Type Setup
    add_action( 'init', 'cptbc_post_type' );
    function cptbc_post_type() {
    	$labels = array(
    		'name' => 'Carousel Images',
    		'singular_name' => 'Carousel Image',
    		'add_new' => 'Add New',
    		'add_new_item' => 'Add New Carousel Image',
    		'edit_item' => 'Edit Carousel Image',
    		'new_item' => 'New Carousel Image',
    		'view_item' => 'View Carousel Image',
    		'search_items' => 'Search Carousel Images',
    		'not_found' =>  'No Carousel Image',
    		'not_found_in_trash' => 'No Carousel Images found in Trash',
    		'parent_item_colon' => '',
    		'menu_name' => 'Carousel'
    	);
    	$args = array(
    		'labels' => $labels,
    		'public' => true,
    		'exclude_from_search' => true,
    		'publicly_queryable' => false,
    		'show_ui' => true,
    		'show_in_menu' => true,
    		'query_var' => true,
    		'rewrite' => true,
    		'capability_type' => 'page',
    		'has_archive' => true,
    		'hierarchical' => false,
    		'menu_position' => 21,
    		'supports' => array('title','excerpt','thumbnail', 'page-attributes', 'custom-fields')
    	);
    	register_post_type('cptbc', $args);
    }
    
    // Add theme support for featured images if not already present
    // http://wordpress.stackexchange.com/questions/23839/using-add-theme-support-inside-a-plugin
    function cptbc_addFeaturedImageSupport() {
    	$supportedTypes = get_theme_support( 'post-thumbnails' );
    	if( $supportedTypes === false )
    		add_theme_support( 'post-thumbnails', array( 'cptbc' ) );
    	elseif( is_array( $supportedTypes ) ) {
    		$supportedTypes[0][] = 'cptbc';
    		add_theme_support( 'post-thumbnails', $supportedTypes[0] );
    	}
    }
    add_action( 'after_setup_theme', 'cptbc_addFeaturedImageSupport');
    
    // FRONT END
    
    // Shortcode
    function cptbc_shortcode($atts, $content = null) {
    	// Set default shortcode attributes
    	$defaults = array(
    		'interval' => '5000',
    		'showcaption' => 'true',
    		'showcontrols' => 'true'
    	);
    
    	// Parse incomming $atts into an array and merge it with $defaults
    	$atts = shortcode_atts($defaults, $atts);
    
    	return cptbc_frontend($atts);
    }
    add_shortcode('image-carousel', 'cptbc_shortcode');
    
    // Display latest WftC
    function cptbc_frontend($atts){
    	$id = rand(0, 999); // use a random ID so that the CSS IDs work with multiple on one page
    	$args = array( 'post_type' => 'cptbc', 'orderby' => 'menu_order', 'order' => 'ASC');
    	$loop = new WP_Query( $args );
    	$images = array();
    	while ( $loop->have_posts() ) {
    		$loop->the_post();
    		if ( '' != get_the_post_thumbnail() ) {
    			$title = get_the_title();
    			$content = get_the_excerpt();
    			$image = get_the_post_thumbnail( get_the_ID(), 'full' );
    			$url = get_post_custom_values("url");
    			$images[] = array('title' => $title, 'content' => $content, 'image' => $image, 'url' => esc_url($url[0]));
    		}
    	}
    	if(count($images) > 0){
    		ob_start();
    		?>
    		<div id="cptbc_<?php echo $id; ?>" class="carousel slide">
    			<ol class="carousel-indicators">
    			<?php foreach ($images as $key => $image) { ?>
    				<li data-target="#cptbc_<?php echo $id; ?>" data-slide-to="<?php echo $key; ?>" data-interval="<?php echo $atts['interval']; ?>" <?php echo $key == 0 ? 'class="active"' : ''; ?>></li>
    			<?php } ?>
    			</ol>
    			<div class="carousel-inner">
    			<?php foreach ($images as $key => $image) { ?>
    				<div class="item <?php echo $key == 0 ? 'active' : ''; ?>">
    					<?php echo $image['image']; ?>
    					<?php if($atts['showcaption'] === 'true') { ?>
    						<div class="carousel-caption">
    							<h2><?php echo $image['title']; ?></h2>
    							<p class="lead"><?php echo $image['content']; ?></p>
    							<?php if($image['url']) { echo '<a class="btn btn-large btn-primary" href="' . $image['url'] . '">Läs mer</a>'; }?>
    						</div>
    					<?php } ?>
    				</div>
    			<?php } ?>
    			</div>
    			<?php if($atts['showcontrols'] === 'true') { ?>
    				<a class="left carousel-control" href="#cptbc_<?php echo $id; ?>" data-slide="prev">‹</a>
    				<a class="right carousel-control" href="#cptbc_<?php echo $id; ?>" data-slide="next">›</a>
    			<?php } ?>
    		</div>
    <?php }
    	$output = ob_get_contents();
    	ob_end_clean();
    
    	// Restore original Post Data
    	wp_reset_postdata();	
    
    	return $output;
    }
    
    // Call the carousel in javascript, else it won't start scrolling on its own
    function cptbc_footer_js() {
    ?>
    <script type="text/javascript">
    	jQuery(function(){
    		jQuery('.carousel').carousel()
    	});
    </script>
    <?php
    }
    add_action('wp_footer', 'cptbc_footer_js');
    
    ?>

Reply

You must log in to post.

About this Plugin

About this Topic