Blog

  • Converting WordPress Default Gallery Into Unite Gallery

    Posted at 28 Jul, 2018 in Tutorials

    Everyone knows that WordPress offering a Gallery feature in its WYSIWYG editor and we can easily create galleries using it. But the downside is, it just displays a thumbnail clicking on which displays an enlarged image. We sometimes feel that it may look better if we hook some popularly available jQuery gallery plugins to it.

    In this tutorial you are going to learn how to convert WordPress default gallery into Unite Gallery without using any of the Plugins.

    Step 1:

    You need to download Unite Gallery first. Extract the ZIP file and you can find a folder named source in it. Copy the whole folder to your theme’s root and rename as ‘unitegallery’.

    Step 2:

    You know that a shortcode [gallery] will be created if you insert a WordPress default gallery. We need to extract the gallery alone from other content in order to make it rendering with our Unite Gallery. For that add the following functions to your theme’s ‘functions.php’.


    function my_gallery_shortcode( $output = '', $atts, $content = false, $tag = false ) {
    $return = $output;
    $my_result = get_my_gallery_content( $atts ); //var_dump() die();
    if( !empty( $my_result ) ) {
    $return = $my_result;
    }
    return $return;
    }
    add_filter( 'post_gallery', 'my_gallery_shortcode', 10, 4 );
    function get_my_gallery_content($gallery)
    {
    global $post;
    $g_list='';
    $tlist='';
    $ids = explode( ",", $gallery['ids'] );
    $gallery_id='gallery_'.get_the_ID();
    $full_size='full';
    foreach( $ids as $id )
    {
    $attachment = get_post( $id );
    $img_url= wp_get_attachment_image_src( $attachment->ID, $full_size);
    $img_caption= $attachment->post_excerpt;
    $img_description= $attachment->post_content;
    $g_list.=''.$img_caption.'';
    }
    wp_enqueue_style('unitegallery-css');
    wp_enqueue_script('unitegallery-js');
    wp_enqueue_script('unitegallery-theme-js');
    $gallery_chdt='<div class="gallery_section"'>'<div id="'.$gallery_id.'" class="gallery">'.$g_list.''</div>'</div>';
    wp_add_inline_script( 'unitegallery-theme-js', 'jQuery(document).ready(function(){ jQuery("#'.$gallery_id.'").unitegallery({tiles_type:"justified"}); });' );
    return $gallery_chdt;
    }

    Step 3:

    Next, we need to add the required Unite Gallery’s JS & CSS scripts. Add this function to your theme’s ‘functions.php’. Please note that these will be loaded only if particular page has WordPress gallery in it.


    function my_gallery_scripts() {
    wp_register_style( 'unitegallery-css', get_template_directory_uri() . '/unitegallery/css/unite-gallery.css' );
    wp_register_script( 'unitegallery-js', get_template_directory_uri() . '/unitegallery/js/unitegallery.min.js' , array( 'jquery' ), '', true );
    wp_register_script( 'unitegallery-theme-js', get_template_directory_uri() . '/unitegallery/themes/tiles/ug-theme-tiles.js' , array( 'jquery','unitegallery-js' ), '', true );
    }
    add_action( 'wp_enqueue_scripts', 'my_gallery_scripts' );

    Here Unite Gallery’s core JS & CSS scripts are mandatory to include but you can change theme scripts according to the theme you want. Also change the theme in last line. You can also remove unwanted theme scripts from ‘unitegallery’ folder.

    Check your front-end now and your gallery will look beautifully rendered by Unite Gallery automatically.

Categories

Categories

Archives

Archives