Skip to Content | Skip to Menus | Copyright?

Posted on

masih di seri DIY aka Do It Yourself, kita akan belajar bagaimana caranya membuat custom photo album gallery yang fleksibel alias sesuai dengan apa yang kita butuhkan dan kalau perlu diinginkan.

Tutorial kali ini tidak akan melibatkan custom post type sama sekali, dan bisa digunakan untuk jumlah album photo gallery tanpa batas. OK, langsung aja ke spesifikasinya ya.

  • Photo harus dengan mudah digonta-ganti tanpa harus merubah kode php
  • Judul per foto dapat diubah dengan mudah
  • Urutan photo dapat diubah-ubah sekehendak hati ( selera )
  • Ukuran photo dapat diubah dengan mudah ( baik dengan tambahan kode atau melalui select box )
  • Jumlah foto per album tidak dibatasi
  • Ditampilkan dengan penggunaan resource yang seefisien mungkin ( bukan 100% efisien lho ya )
  • Kustomisasi dengan CSS harus mudah ( yeah, I’m css lover…you got it )
  • clean HTML 5
  • gak pake lama ( GPL ) …. hahaha
  • spesifikasi ini bisa ditambah tau dikurangi sesuai selera ( yo wes, it’s DIY project kok )

OK, dari spesifikasi yang dibuat diatas akan di breakdown menjadi :

  • photo album dibuat dengan menggunakan post meta dalam post type page dan atau post
  • penggunaan array dalam array ?
  • menggunakan tools pihak ketiga untuk mempercepat proses ( kan supaya GPL alias gak pake lama )

tools yang dibutuhkan :

  • Piklist plugin ( untuk modelling post meta )
  • Text editor ( saya pakai Sublime Text, silakan yang mau pakai Notepad juga bisa kok )
  • PHP versi 5.3.x atau lebih ( kalau tidak salah saya sempat test di server dengan PHP 7 dan ada sejumlah deprecated function di Piklist )
  • Bootstrap CSS untuk membentuk layout gallery

Instalasi Piklist

Download dan instal Piklist ( min versi 0.9.9.6 ) dari GitHub. Versi stabil 0.9.4.29 ( saat artikel ini tayang ), entah kenapa masih ada beberapa fitur yang tidak berjalan sebagaimana mestinya. Tapi kalau mau coba versi stable nya silakan aja.

Kali ini kita akan membuat tampilan post meta dengan bantuan Piklist untuk berjalan di themes, dan strukturnya adalah :

-nama theme
   - piklist ( folder )
      	-parts ( folder juga )
      	    -meta-boxes ( ini juga folder )
                - photogallery-form.php ( photo gallery form )

Start coding …yeah it’s the fun time, honey

Langkah pertama adalah membuat tampilan di post meta, dan itu berarti menulis kode untuk file photogallery-form.php

berikut rangkaiannya ( penjelasan dibawah )

/*
Title: Photo Gallery
Post Type: page
Order: 1
Collapse: true
*/

piklist('field', array(
  'type' => 'group',
  'field' => 'photogall',
  'add_more' => true,
  'label' => __('Photo collection', 'devio-photogallery'),
  'fields'  => array(

    array(
      'type' => 'file',
      'field' => 'image',
      'label' => __('Photo', 'devio-photogallery'),
      'columns' => 12,
      'help' => __('help me tooltip-nya disini','devio-photogallery'),
      'options' => array(
          'modal_title' => __('Set folder cover photo','devio-photogallery'),
          'button' => __('Upload','devio-photogallery'),
      ),
      'required' => true,
      'validate' => array(
        array(
          'type' => 'limit',
          'options' => array(
            'min' => 1,
            'max' => 1
          )
        ),
        array(
          'type' => 'image'
        )
      )
    ),

    array(
      'type' => 'text',
      'field' => 'judul',
      'label' => __('Title', 'devio-photogallery'),
      'columns' => 12,
    ),
  )
));

Dan tampilan awalnya akan seperti screenshot berikut :
add_newgallery-riesurya
Sampai sini bagaimana, gak pake lama kan …hehehe
OK, yuk kita breakdown penjelasan kode diatas. ( Jangan sampai nulis copy paste tapi tidak tahu kenapanya ..hehehe ).

  • Baris ke-2 : Judul post meta gallery box
  • Baris 3 : gallery box akan berada di post type Page
  • Order : tampil setelah text editor
  • Collapse :
  • Baris 9 : kita kelompokkan menjadi group ( serial array nanti datanya )
  • Baris 10 : id post meta ( photogall )
  • Baris 11 : Tombol untuk menambah-kurangkan foto
  • Baris 15-37 : field Upload. Perhatikan pada baris ke 25-32 ada validasi untuk membatasi per upload hanya boleh 1 foto saja.
  • Baris 39 – 44 : field untuk Judul, kita set dalam bentuk text field

OK, sampai disini bagian backend untuk photo gallery sudah selesai, dan selanjutnya tinggal bagaimana cara menampilkan data output.

Untuk itu ceritanya kita sudah mengupload dan melengkapi photo gallery box dengan sejumlah image berikut judul per foto nya.

drag and drop mode

photogallery-items

all items

photogallery-riesurya

Mengolah data menampilkan photo gallery

Nah ini bagian yang menyenangkan. Kita akan keluarkan data yang disimpan dari isian di atas ke front-end.
Karena data disimpan sebagai post meta, maka kita akan gunakan fungsi get_post_meta() untuk menampilkannya.

<?php global $post;
$gallery = get_post_meta( $post->ID, 'photogall', false );

Image akan ditampilkan berupa thumbnail dengan ukuran 360px X 220px, caranya adalah dengan menambahkan baris-baris kode berikut di functions.php

add_action( 'after_setup_theme', 'additional_image_size' );
function additional_image_size()
{
    add_image_size( 'img360', '360', '220', true );
}

Untuk memastikan seperti data array yang kita dapatkan, tidak ada salahnya melakukan pengecekan dengan menggunakan fungsi var_dump(). ( baca juga artikel Mengurai array, menampilkan data )

dan ternyata data array-nya adalah sebagai berikut :

array
  0 => 
    array
      'image' => 
        array
          0 => string '6098' (length=4)
      'judul' => string 'sweemee' (length=7)
  1 => 
    array
      'image' => 
        array
          0 => string '6119' (length=4)
      'judul' => string 'pizza like' (length=10)
  2 => 
    array
      'image' => 
        array
          0 => string '6107' (length=4)
      'judul' => string 'nasgor ?' (length=6)
  3 => 
    array
      'image' => 
        array
          0 => string '6105' (length=4)
      'judul' => string 'sliced fish' (length=9)

Perhatikan model array yang terbentuk dari form yang dibuat sebelumnya. Mumet ya….tenang, tidak serumit yang dikira kok. Santai aja.
Dari data hasil var_dump di atas, kita mendapati bahwa :

  • Data terdapat sebagai array dalam array
  • value untuk key image ( foto ) ditampilkan dalam bentuk ID ( attachment_id ) dan bukan URL. Untuk itu untuk itu digunakan fungsi wp_get_attachment_image_src()
  • value untuk key judul sudah bisa langsung diakses, siip lah

PS: penggunaan wp_get_attachment_image_src() akan menghasilkan array ( berikut dimensi thumbnail ), sementara dengan wp_get_attachment_url() akan menghasilkan string URL nya langsung.

OK, saatnya mengubah data array menjadi loop tampilan :

add_filter( 'the_content', 'content_gallery' );

function content_gallery( $content ) 
{ 
    if ( is_page_template( 'page-templates/my-gallery.php' )):
        global $post;
        $gallery = get_post_meta( $post->ID, 'photogall', false );
        $content = '';
        $content .= '<div class="col-md-12"><!--wrapper untuk gallery-->';
        foreach ( $gallery as $gallery_value ) :
            foreach ( $gallery_value as $v ):
                $image_url = wp_get_attachment_image_src( $v['image'][0] , 'img360', false);
                $content .= '<div class="col-md-4">';
                $content .= '<h3>' . esc_html( $v['judul'] ) . '</h3>';                    
                $content .= '<img class="img-responsive" src="' . esc_url( $image_url[0] ) .'">';
                $content .= '</div>';
            endforeach; //end foreach specific data
        endforeach; //end foreach $gallery - data group
        $content .= '</div><!-- .container -->';
        return $content;
    endif; //eof check page template
}

Mari kita breakdown kode di atas :

  • baris 1 : set filter hook untuk menyelipkan eh menyisipkan content gallery ke dalam loop ( the_content )
  • baris 5 : pengecekan bahwa output hanya boleh ditampilkan pada page yang menggunakan page template yang sudah ditentukan sebelumnya ( page-templates/my-template.php )
  • baris 6 : set global $post ( digunakan untuk mendapatkan ID artikel dimana gallery box terpasang )
  • baris 7 : pengambilan data dari database dengan menggunakan get_post_meta()
  • baris 10 : mengurai data array utama ( group items )
  • baris 11 : mengurai data untuk tiap item
  • baris 12 : ambil data image url dengan wp_get_attachment_image_src(), dengan ukuran 360px x 220px
  • baris 14 : panggil data judul
  • baris 15 : panggil data image URL

Bagaimana, simple kan ?

PS : kalau menggunakan DeVioPlayground kita tidak perlu repot-repot lagi menggunakan filter hooks the_content(), mau tahu aja atau mau tahu sama tempe sekalian ? hehehe

OK, ini kode bila menggunakan DeVioPlayground – fun theme framework :

add_action( 'devio/my-gallery/maincontent/do_action', 'content_gallery' );
//action hook yang spesifik untuk page template yang spesifik pula
function content_gallery() 
{ 
    global $post;
    $gallery = get_post_meta( $post->ID, 'photogall', false );
    ?>
    <div class="col-md-12"><!--wrapper untuk gallery-->
    <?php
    foreach ( $gallery as $gallery_value ) :
        foreach ( $gallery_value as $v ):
            $image_url = wp_get_attachment_image_src( $v['image'][0] , 'img360', false);
            ?>
            <div class="col-md-4">
                <h3><?php echo esc_html( $v['judul'] );?></h3>                   
                <img class="img-responsive" src="<?php echo esc_url( $image_url[0] );?>">
            </div>
        <?php    
        endforeach; //end foreach specific data
    endforeach; //end foreach $gallery - data group
    ?>
    </div><!-- .container -->
    <?php
}

Gimana? Lebih mudah dan sederhana kan ?

PS lagi : bila dicermati, terdapat escaping berupa esc_html untuk Judul dan esc_url untuk image. Mungkin lebay, ini hanya soal kebiasaan saja. “late escape principle“.

dan tampilannya saat ini adalah :

photogallerybox-riesurya

Untuk sisi style-nya silakan dipoles lebih lanjut dengan CSS atau bila mau dikembangkan lebih lanjut ya monggo gitu lho..

Gak janji, mungkin akan ada sambungan untuk stylingnya, lihat nanti saja deh

OK, sampai disini dulu tutorial membuat custom gallery. Mohon maaf bila ada penjelasan yang kurang jelas atau terlalu mendetail.

Terus terang ( tapi gak terus-terusan ), sharing via media teks tampak rumit dibanding bila tatap muka secara langsung. Kalau ada kesempatan dan kita bisa bertemu langsung dan belajar bareng, saya jamin tutorial ini bisa dipahami dalam kutang eh dalam waktu kurang dari 15 menit, beneran. ( gak mau serius, Serius aja bubar kok …hehehe )

sampai ketemu lagi di sesi tutorial lainnya.ahh miss u Ve

Last Modified on :

CopyRight & Left : ©2007 - now and forever

part of DeVio Multimedia

TOS - Help - Contact - About

Developed with DeVio Playground - Theme Framework