1

I want to integrate a bs4 carousel inside all the posts of a wordpress page that is a portfolio. I'm thinking to use the attached images of a post, I don't want to use custom post type to do this. Can anyone with a good wordpress knowledge tell me a nice way to achieve this? My idea is to create a template part that will hold the carousel.

EDIT: Here is the code that I'm using for create a carousel. It's based on custom post type, but as I write I want to use post attachements and not custom post type

function custom_slider() {
    $labels = array(
        'name'               => _x( 'Slider', 'post type general name'),
        'singular_name'      => _x( 'Slide', 'post type singular name'),
        'menu_name'          => _x( 'Slider sede', 'admin menu'),
        'name_admin_bar'     => _x( 'Slide', 'add new on admin bar'),
        'add_new'            => _x( 'Add New', 'Slide'),
        'add_new_item'       => __( 'Name'),
        'new_item'           => __( 'New Slide'),
        'edit_item'          => __( 'Edit Slide'),
        'view_item'          => __( 'View Slide'),
        'all_items'          => __( 'All Slide'),
        'featured_image'     => __( 'Featured Image', 'text_domain' ),
        'search_items'       => __( 'Search Slide'),
        'parent_item_colon'  => __( 'Parent Slide:'),
        'not_found'          => __( 'No Slide found.'),
        'not_found_in_trash' => __( 'No Slide found in Trash.'),
    );

    $args = array(
        'labels'             => $labels,
        #'menu_icon'         => 'dashicons-star-half',
                'description'        => __( 'Description.'),
        'public'             => true,
        'publicly_queryable' => true,
        'show_ui'            => true,
        'show_in_menu'       => true,
        'query_var'          => true,
        'rewrite'            => true,
        'capability_type'    => 'post',
        'has_archive'        => true,
        'hierarchical'       => true,
        'menu_position'      => null,
        'supports'           => array('title','editor','thumbnail')
    );

    register_post_type( 'slider', $args );
  }
  add_action('init', 'custom_slider');

<div class="container-fluid" id="carousel-wrapper">
  <div id="sede-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <?php $slider = get_posts(array('post_type' => 'slider', 'posts_per_page' => 5)); ?>
        <?php $count = 0; ?>
        <?php foreach($slider as $slide): ?>
        <div class="carousel-item <?php echo ($count == 0) ? 'active' : ''; ?>">
          <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($slide->ID)) ?>" class="img-responsive d-block w-100 slide"/>
        </div>
        <?php $count++; ?>
      <?php endforeach; ?>
    </div>

    <a class="carousel-control-prev" href="#scarousel" role="button" data-slide="prev">
      <span class="carousel-control-next-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#scarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
  • Can you show us some code that you’ve tried? What error are you seeing? – Sam Feb 6 '19 at 9:44
  • I've added the code that I'm using. There is no error, I want only switch it to use post attachments instead of post type. – ZWPDev Feb 6 '19 at 10:43
  • Am I correct in thinking that you would only like the carousel to appear on the "Portfolio" post type and not any other posts or pages? You would then like to use the post attachments to be shown within the carousel? – Sam Feb 6 '19 at 15:37
  • yes, I need that inside the single portfolio posts there is a carousel. Custom post type needs to be added and I don't want to explain the user that he need to first upload the images and then create a post for every portfolio entries. – ZWPDev Feb 7 '19 at 16:05
0

First, create a custom post type for your portfolio posts:

// Register Custom Post Type
function portfolio_cpt() {

    $labels = array(
        'name'                  => _x( 'Portfolio', 'Post Type General Name', 'text_domain' ),
        'singular_name'         => _x( 'Portfolio', 'Post Type Singular Name', 'text_domain' ),
        'menu_name'             => __( 'Portfolio', 'text_domain' ),
        'name_admin_bar'        => __( 'Portfolio', 'text_domain' ),
        'archives'              => __( 'Item Archives', 'text_domain' ),
        'attributes'            => __( 'Item Attributes', 'text_domain' ),
        'parent_item_colon'     => __( 'Parent Item:', 'text_domain' ),
        'all_items'             => __( 'All Items', 'text_domain' ),
        'add_new_item'          => __( 'Add New Item', 'text_domain' ),
        'add_new'               => __( 'Add New', 'text_domain' ),
        'new_item'              => __( 'New Item', 'text_domain' ),
        'edit_item'             => __( 'Edit Item', 'text_domain' ),
        'update_item'           => __( 'Update Item', 'text_domain' ),
        'view_item'             => __( 'View Item', 'text_domain' ),
        'view_items'            => __( 'View Items', 'text_domain' ),
        'search_items'          => __( 'Search Item', 'text_domain' ),
        'not_found'             => __( 'Not found', 'text_domain' ),
        'not_found_in_trash'    => __( 'Not found in Trash', 'text_domain' ),
        'featured_image'        => __( 'Featured Image', 'text_domain' ),
        'set_featured_image'    => __( 'Set featured image', 'text_domain' ),
        'remove_featured_image' => __( 'Remove featured image', 'text_domain' ),
        'use_featured_image'    => __( 'Use as featured image', 'text_domain' ),
        'insert_into_item'      => __( 'Insert into item', 'text_domain' ),
        'uploaded_to_this_item' => __( 'Uploaded to this item', 'text_domain' ),
        'items_list'            => __( 'Items list', 'text_domain' ),
        'items_list_navigation' => __( 'Items list navigation', 'text_domain' ),
        'filter_items_list'     => __( 'Filter items list', 'text_domain' ),
    );
    $args = array(
        'label'                 => __( 'Portfolio', 'text_domain' ),
        'description'           => __( 'Post Type Description', 'text_domain' ),
        'labels'                => $labels,
        'supports'              => array( 'title', 'editor', 'thumbnail' ),
        'taxonomies'            => array( 'category', 'post_tag' ),
        'hierarchical'          => false,
        'public'                => true,
        'show_ui'               => true,
        'show_in_menu'          => true,
        'menu_position'         => 5,
        'show_in_admin_bar'     => true,
        'show_in_nav_menus'     => true,
        'can_export'            => true,
        'has_archive'           => true,
        'exclude_from_search'   => false,
        'publicly_queryable'    => true,
        'capability_type'       => 'page',
    );
    register_post_type( 'portfolio', $args );

}
add_action( 'init', 'portfolio_cpt', 0 );

Next, duplicate the single.php template file from your theme and rename it to single-portfolio.php. WordPress will automatically load this when visiting a post from your custom post type. You can read more about this, here.

For the gallery functionality, I would use the gallery addon for ACF. This will allow editors to easily upload images and re-order them. You can then output the images within your carousel. When creating your fields within ACF, you can specify the gallery only to appear on the "Portfolio" custom post type.

Here's an example from ACF showing you how to integrate the gallery with an image slider:

<?php 

$images = get_field('gallery');

if( $images ): ?>
    <div id="slider" class="flexslider">
        <ul class="slides">
            <?php foreach( $images as $image ): ?>
                <li>
                    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
                    <p><?php echo $image['caption']; ?></p>
                </li>
            <?php endforeach; ?>
        </ul>
    </div>
    <div id="carousel" class="flexslider">
        <ul class="slides">
            <?php foreach( $images as $image ): ?>
                <li>
                    <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                </li>
            <?php endforeach; ?>
        </ul>
    </div>
<?php endif; ?>

If you'd prefer not to use ACF, you could use the WordPress native gallery.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.