web-dev-qa-db-fra.com

comment faire en sorte que la galerie shortcode produise une seule liste d'UL au lieu de plusieurs DL?

J'ai besoin du shortcode de la galerie intégrée pour produire UL au lieu de DL. Comment puis-je le faire? Je sais que je peux utiliser le filtre 'post_gallery', mais cela revient presque à dupliquer la fonction gallery_shortcode du média. Je voudrais trouver une solution moins "verbeuse".

Je vous remercie

shortcodegallery
3
Luca Reghellin

Ok, j'ai donc réécrit la fonction de shortcode de la galerie en copiant l'original et en supprimant/ajoutant/modifiant ce dont j'avais besoin, et maintenant je la partage avec vous. Les principales choses que j'ai ajoutées/modifiées sont:

  • Une seule liste UL/LI par galerie au lieu d'un DL pour chaque élément maudit.
  • Suppression de 'itemtag' attr, puisqu'il est inutile d'utiliser une autre balise pour les éléments à l'intérieur d'une UL
  • 'icontag' utilise désormais par défaut 'figure', 'captiontag' utilise désormais 'p'
  • nouvelle 'classe' attr pour l'ajout d'une classe personnalisée au conteneur UL
  • nouvelles classes d'aide 'premier-en-ligne', 'dernier-en-ligne', 'première-ligne', 'dernière ligne' pour les éléments LI (bien que je recommande fortement d'utiliser nth-child css sélecteurs à la place)

Voici le code:

//remove styles: I'll use mine
add_filter('use_default_gallery_style','__return_false');


//remove default shortcode
remove_shortcode('gallery');
//add new shortcode
add_shortcode('gallery', 'custom_gallery');

function custom_gallery($attr) {
  $post = get_post();

  static $instance = 0;
  $instance++;

  if(!empty($attr['ids'])){
    // 'ids' is explicitly ordered, unless you specify otherwise.
    if(empty($attr['orderby'])){ $attr['orderby'] = 'post__in'; }
    $attr['include'] = $attr['ids'];
  }

  $output = '';

  // We're trusting author input, so let's at least make sure it looks like a valid orderby statement
  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 ? $post->ID : 0,
    'icontag'    => 'figure',
    'captiontag' => 'p',
    'columns'    => 3,
    'size'       => 'thumbnail',
    'include'    => '',
    'exclude'    => '',
    'link'       => '',
    'class'      => ''//now you can add custom class to container UL 
  ), $attr, 'gallery'));

  $id = intval($id);

  if('Rand' == $order) $orderby = 'none';

  if(!empty($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];
    }
  } elseif (!empty($exclude)){
    $attachments = get_children(array(
      'post_parent' => $id,
      'exclude' => $exclude,
      'post_status' => 'inherit',
      'post_type' => 'attachment',
      'post_mime_type' => 'image',
      'order' => $order,
      'orderby' => $orderby
    ));
  } else {
    $attachments = get_children(array(
      'post_parent' => $id,
      'post_status' => 'inherit',
      'post_type' => 'attachment',
      'post_mime_type' => 'image',
      'order' => $order,
      'orderby' => $orderby
    ));
  }

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

  //if ( is_feed() ) //removed, see original in media.php


  $itemtag = tag_escape('li');//new tag for item 
  $captiontag = tag_escape($captiontag);
  $icontag = tag_escape($icontag);

  //valid tags check removed, see original in media.php

  $columns = intval($columns);
  $selector = "gallery-{$instance}";

  $size_class = sanitize_html_class( $size );

  //new tag for container 
  $output = "<ul id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class} {$class}'>";

  $i = 0;
  $c = count($attachments);
  $o = (int)floor($c/$columns)*$columns;

  foreach ( $attachments as $id => $attachment ) {
    if(!empty($link) && 'file' === $link) $image_output = wp_get_attachment_link($id,$size,false,false);
    elseif(!empty($link) && 'none' === $link) $image_output = wp_get_attachment_image($id,$size,false);
    else $image_output = wp_get_attachment_link( $id, $size, true, false );
    $image_meta = wp_get_attachment_metadata($id);
    $orientation = '';
    if(isset($image_meta['height'], $image_meta['width'])) $orientation = ($image_meta['height'] > $image_meta['width']) ? 'portrait' : 'landscape';

    //setup custom aux classes to help style
    $m = ++$i % $columns;
    $item_pos_class = ($m == 1) ? 'first-in-row' : (($m == 0) ? 'last-in-row' : '');
    $row_class = ($i <= $columns) ? 'first-row' : (($i > $o) ? 'last-row' : '');

    //added: custom aux classes
    $output .= "<{$itemtag} class='gallery-item {$item_pos_class} {$row_class}'>";
    $output .= "<{$icontag} class='gallery-icon {$orientation}'>$image_output</{$icontag}>";
    if($captiontag && trim($attachment->post_excerpt)){
      $output .= "<{$captiontag} class='wp-caption-text gallery-caption'>" . wptexturize($attachment->post_excerpt) . "</{$captiontag}>";
    }
    $output .= "</{$itemtag}>";
  }

  //changed BR>clear:both with a more conventional clearfix div
  $output .= "</ul>\n<div class='clearfix'></div>";

  return $output;
}//end custom gallery

Et juste pour compléter le shortcode de la galerie "chapitre", je vous montre ici comment éventuellement modifier par programme les attributs par défaut et/ou définis par l'utilisateur. Supposons par exemple que je doive modifier la taille attr en fonction du nombre d'éléments:

add_filter('shortcode_atts_gallery','set_gallery_thumbs_size',10,3);

function set_gallery_thumbs_size($out, $pairs, $atts) {

  //in this case, if size was defined by the user, keep original and stop here
  if(isset($atts['size'])) return $out;

  //get number of images
  $c = count(explode(',',$atts['ids']));
  //set different sizes based on items count
  //new sizes were created with add_image_size() and image_size_names_choose filter (see wp docs)
  $atts['size'] = ($c > 2) ? 'thumb-3c' : ( ($c > 1) ? 'thumb-2c' : 'thumbnail');
  //merge original array with new one and return it
  return array_merge($out,$atts);
}

J'espère que cela aidera d'autres personnes à la recherche d'un balisage de galerie plus propre.

3
Luca Reghellin

Vous pouvez utiliser les attributs suivants pour le shortcode de la galerie:

[gallery itemtag="ul" icontag="li" captiontag="li"]

Le problème avec ceci est que le shortcode de la galerie encapsule l'image et la légende dans différents éléments (c'est pourquoi la solution par défaut utilise dl-dt-dd), ce qui générera un élément li pour l'image et un pour la légende. Vous pouvez quand même le styler en utilisant CSS, car les deux éléments ont des noms de classe uniques.

3
passatgt