k-isabelle
5/31/2018 - 4:29 PM

Modify WordPress Gallery Output

Modify WordPress Gallery Output

/* -------------------------------------- */
/*  Modify Wordpress Gallery Output
/* -------------------------------------- */

add_filter('post_gallery', 'my_post_gallery', 10, 2);
function my_post_gallery($output, $attr) {
  global $post;

  if (isset($attr['orderby'])) {
    $attr['orderby'] = sanitize_sql_orderby($attr['orderby']);
    if (!$attr['orderby'])
      unset($attr['orderby']);
  }

  extract(shortcode_atts(array(
    'order' => 'ASC',
    'orderby' => 'menu_order ID',
    'id' => $post->ID,
    'itemtag' => 'dl',
    'icontag' => 'dt',
    'captiontag' => 'dd',
    'columns' => 3,
    'size' => 'thumbnail',
    'include' => '',
    'exclude' => ''
  ), $attr));


  $id = intval($id);
  if ('RAND' == $order) $orderby = 'none';

  if (!empty($include)) {
    $include = preg_replace('/[^0-9,]+/', '', $include);
    $_attachments = get_posts(array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby));

    $attachments = array();
    foreach ($_attachments as $key => $val) {
      $attachments[$val->ID] = $_attachments[$key];
    }
  }

  if (empty($attachments)) return '';

  switch ($columns) {
    case '2':
      $col_size = '6';
      break;
    case '3':
      $col_size = '4';
      break;
    case '4':
      $col_size = '3';
      break;
    case '6':
      $col_size = '2';
      break;
    default:
      $col_size = '4';
      break;
  }

  // Here's your actual output, you may customize it to your need
  $output = '<div class="row asra-gallery">';

  // Now you loop through each attachment
  foreach ($attachments as $id => $attachment) {
    // Fetch all data related to attachment 
    $img = wp_prepare_attachment_for_js($id);

    // If you want a different size change 'large' to eg. 'medium'
    $url = $img['sizes']['thumbnail_lg']['url'];
    if(empty($url)){
      $url = $img['sizes']['full']['url'];
      $height = $img['sizes']['full']['height'];
      $width = $img['sizes']['full']['width'];
    }
    else{
      $height = $img['sizes']['thumbnail_lg']['height'];
      $width = $img['sizes']['thumbnail_lg']['width'];
    }
    
    $alt = $img['alt'];

    // Store the caption
    $caption = $img['caption'];

    $output .= '<div class="col-sm-'.$col_size.' col-xs-6 asra-gallery-item">';
    $output .= '<a href="'.$img['sizes']['full']['url'].'" rel="gallery" class="swipebox" title="'.$caption.'">';
    $output .= "<img src=\"{$url}\" width=\"{$width}\" height=\"{$height}\" alt=\"{$alt}\" />";
    $output .= "</a>";
    $output .= "</div>";

    // // Output the caption if it exists
    // if ($caption) { 
    //     $output .= "<div class=\"orbit-caption\">{$caption}</div>\n";
    // }
    
  }

  $output .= "</div>";

  return $output;
}