romano
Al crear una galería de imágenes en WordPress utilizando el cargador de medios predeterminado, WordPress envuelve las imágenes en un montón de marcado HTML.
¿Cómo puedo sobrescribir esto antes de que se genere para poder generar el marcado deseado y cambiar la forma en que se crea el diseño de la galería?
Actualmente, WordPress está generando el código así:
<div id="container">
<div src="https://stackoverflow.com/questions/14585538/<?php bloginfo("template_directory'); ?>/images/small.jpg">
<div src="https://stackoverflow.com/questions/14585538/<?php bloginfo("template_directory'); ?>/images/medium.jpg" data-media="(min-width: 400px)"></div>
<div src="https://stackoverflow.com/questions/14585538/<?php bloginfo("template_directory'); ?>/images/large.jpg" data-media="(min-width: 950px)"></div>
<div src="https://stackoverflow.com/questions/14585538/<?php bloginfo("template_directory'); ?>/images/extralarge.jpg" data-media="(min-width: 1200px)"></div>
</div>
davidf
En lugar de sobrescribir la función de shortcode de la galería, una mejor manera es usar el filtro post_gallery que se incluye dentro de esa función.
Agregue esto en functions.php
add_filter('post_gallery','customFormatGallery',10,2);
function customFormatGallery($string,$attr){
$output = "<div id=\"container\">";
$posts = get_posts(array('include' => $attr['ids'],'post_type' => 'attachment'));
foreach($posts as $imagePost){
$output .= "<div src="".wp_get_attachment_image_src($imagePost->ID, "small')[0]."'>";
$output .= "<div src="".wp_get_attachment_image_src($imagePost->ID, "medium')[0]."' data-media=\"(min-width: 400px)\">";
$output .= "<div src="".wp_get_attachment_image_src($imagePost->ID, "large')[0]."' data-media=\"(min-width: 950px)\">";
$output .= "<div src="".wp_get_attachment_image_src($imagePost->ID, "extralarge')[0]."' data-media=\"(min-width: 1200px)\">";
}
$output .= "</div>";
return $output;
}
Esto supone que ha configurado tamaños de imagen para los diferentes tamaños que necesita usando https://codex.wordpress.org/Function_Reference/add_image_size
-
El filtro y get_posts funcionan muy bien, aunque tuve que cambiar el ciclo foreach ya que wp_get_attachment_image no recuperó nada a pesar de que tenía los tamaños de pulgar correctos. Pero podría cambiarlo fácilmente para obtener los datos que necesitaba. Muy útil la sugerencia de filtro post_gallery, ¡gracias!
– Larzán
16 de julio de 2015 a las 13:27
-
A pesar de que,
divsería la mejor solución, en mi humilde opinión, usando fondo CSS;)– Julián F. Weinert
19/04/2017 a las 21:35
-
Esto funciona, aunque el argumento de orden no se puede pasar
get_posts()ya que los ID simplemente se ordenan en el propio shortcode. ¿Alguien tiene un método para mantener el orden de la galería de esta manera?– RC Neil
1 de septiembre de 2017 a las 17:28
-
@RCNeil
post_gallerytiene 3 argumentos:$output, $atts, $instance.$atts['ids']contiene los identificadores (de los elementos de la galería) y$atts['orderby']contiene el pedido..– bocinazo31
12 oct 2018 a las 11:29
david.binda
me perdí el post_gallery filtrar mencionado en la Respuesta justo debajo de esta. Realmente deberías considerar usar ese filtro. en lugar de copiar toda la función.
Agregue este código a functions.php de su plantilla y modifique la función HTML interna. Esta función es una copia de la función de shortcode de la galería predeterminada de WP35. acorde a Códicecada shortcode solo puede tener una función asignada y, por eso, su función anulará la predeterminada de WordPress:
add_shortcode('gallery', 'my_gallery_shortcode');
function my_gallery_shortcode($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'];
}
// Allow plugins/themes to override the default gallery template.
$output = apply_filters('post_gallery', '', $attr);
if ( $output != '' )
return $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->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) ) {
$_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() ) {
$output = "\n";
foreach ( $attachments as $att_id => $attachment )
$output .= wp_get_attachment_link($att_id, $size, true) . "\n";
return $output;
}
$itemtag = tag_escape($itemtag);
$captiontag = tag_escape($captiontag);
$icontag = tag_escape($icontag);
$valid_tags = wp_kses_allowed_html( 'post' );
if ( ! isset( $valid_tags[ $itemtag ] ) )
$itemtag = 'dl';
if ( ! isset( $valid_tags[ $captiontag ] ) )
$captiontag = 'dd';
if ( ! isset( $valid_tags[ $icontag ] ) )
$icontag = 'dt';
$columns = intval($columns);
$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
$float = is_rtl() ? 'right' : 'left';
$selector = "gallery-{$instance}";
$gallery_style = $gallery_div = '';
if ( apply_filters( 'use_default_gallery_style', true ) )
$gallery_style = "
<style type="text/css">
#{$selector} {
margin: auto;
}
#{$selector} .gallery-item {
float: {$float};
margin-top: 10px;
text-align: center;
width: {$itemwidth}%;
}
#{$selector} img {
border: 2px solid #cfcfcf;
}
#{$selector} .gallery-caption {
margin-left: 0;
}
</style>
<!-- see gallery_shortcode() in wp-includes/media.php -->";
$size_class = sanitize_html_class( $size );
$gallery_div = "<div id='$selector' class="gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}">";
$output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );
$i = 0;
foreach ( $attachments as $id => $attachment ) {
$link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
$output .= "<{$itemtag} class="gallery-item">";
$output .= "
<{$icontag} class="gallery-icon">
$link
</{$icontag}>";
if ( $captiontag && trim($attachment->post_excerpt) ) {
$output .= "
<{$captiontag} class="wp-caption-text gallery-caption">
" . wptexturize($attachment->post_excerpt) . "
</{$captiontag}>";
}
$output .= "</{$itemtag}>";
if ( $columns > 0 && ++$i % $columns == 0 )
$output .= '<br style="clear: both" />';
}
$output .= "
<br style="clear: both;" />
</div>\n";
return $output;
}
-
Muchas gracias, era exactamente lo que necesitaba. Me alegras el día =)
– Romain
30 de enero de 2013 a las 10:06
-
Hola chicos, esto se ve genial. Puedo ver lo que está haciendo, pero cuando lo incluyo en mi functions.php, no tiene ningún efecto. La convertí en la última función del archivo en un esfuerzo por que se cargue en último lugar. ¿Alguna idea de cuál podría ser el problema?
– tadywankenobi
23 de julio de 2013 a las 10:03
-
Yo tampoco puedo hacer que esto funcione. Traté de pasar a functions.php, sin cambios. @tadywankenobi: ¿cómo lo hiciste funcionar?
– avexdesigns
5 de diciembre de 2013 a las 17:20
-
En realidad, lo tengo. No tendrá efecto hasta que agregues una NUEVA galería. Por alguna razón no aplica a galerías ya existentes
– avexdesigns
5 de diciembre de 2013 a las 17:22
-
En realidad, esto es incorrecto. Primero debe desconectar la función predeterminada y luego agregar una nueva función para manejarla. Desenganche usando remove_shortcode(‘gallery’), luego add_shortcode(‘gallery’, ‘your function’). Además, no hay necesidad de copiar toda la función. Solo necesita usar el filtro ‘post_gallery’ para devolver su propio marcado, y no se usará la función predeterminada.
– Juan
04/06/2015 a las 22:55
RCNeil
Partiendo de la respuesta de @DaveF, aquí hay una función de galería que mantiene el orden de la galería y también aleatoriza si se selecciona en el editor de WP:
add_filter('post_gallery','customFormatGallery',10,2);
function customFormatGallery($string,$attr){
$posts_order_string = $attr['ids'];
$posts_order = explode(',', $posts_order_string);
$output = "<div class=\"gallery-container\">";
$posts = get_posts(array(
'include' => $posts_order,
'post_type' => 'attachment',
'orderby' => 'post__in'
));
if($attr['orderby'] == 'rand') {
shuffle($posts);
}
foreach($posts as $imagePost){
$output .= '<img src="' . wp_get_attachment_image_src($imagePost->ID, 'full')[0] . '" alt="" />';
}
$output .= "</div>";
return $output;
}
-
Comentario tardío: aparece un error de sintaxis en la línea de salida de $ en foreach. Parecen ser los argumentos wp_get_attachment_image_src….
–Rick Hellewell
23 de agosto de 2018 a las 21:55
Solo una adición a la respuesta aceptada Para que funcione, primero debe eliminar el código corto predeterminado de la galería como este:
add_action( 'after_setup_theme', 'my_override_of_default_gallery' );
function my_override_of_default_gallery() {
remove_shortcode( 'gallery' );
add_shortcode('gallery', 'my_gallery_shortcode');
}
//add_shortcode('gallery', 'my_gallery_shortcode');
function my_gallery_shortcode($attr) {
$post = get_post();
...
}
Aquí está el código que cambio para obtener el diseño que estaba buscando:
/****** REWRITE THE GALLERIE FUNCTION FROM WORDPRESS **********/
add_shortcode('gallery', 'my_gallery_shortcode');
function my_gallery_shortcode($attr) {
$counter=0;
//var_dump("Rewrite the shortcode gallery");
$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'];
}
// Allow plugins/themes to override the default gallery template.
$output = apply_filters('post_gallery', '', $attr);
if ( $output != '' )
return $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(
/****** CHANGE TO FULL SIZE TO GET THE CORRECT INFORMATION **********/
'order' => 'ASC',
'orderby' => 'menu_order ID',
'id' => $post->ID,
'itemtag' => 'dl',
'icontag' => 'dt',
'captiontag' => 'dd',
'columns' => 3,
'size' => 'Full size',
'include' => '',
'exclude' => ''
), $attr));
/***********************************************************************/
$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() ) {
$output = "\n";
foreach ( $attachments as $att_id => $attachment )
$output .= wp_get_attachment_link($att_id, $size, true) . "\n";
return $output;
}
$itemtag = tag_escape($itemtag);
$captiontag = tag_escape($captiontag);
$icontag = tag_escape($icontag);
$valid_tags = wp_kses_allowed_html( 'post' );
if ( ! isset( $valid_tags[ $itemtag ] ) )
$itemtag = 'dl';
if ( ! isset( $valid_tags[ $captiontag ] ) )
$captiontag = 'dd';
if ( ! isset( $valid_tags[ $icontag ] ) )
$icontag = 'dt';
$columns = intval($columns);
$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
$float = is_rtl() ? 'right' : 'left';
$selector = "gallery-{$instance}";
$gallery_div ="<div pictures-content>";
$gallery_style ="";
$output = apply_filters( 'gallery_style', "\n\t\t" . $gallery_div );
$i = 0;
$count=0;
foreach ( $attachments as $id => $attachment ) {
$test = $attachments[$id];
$link=$test->guid;
$nocsript="";
if ($count==0){$nocsript ="<noscript><img src="https://stackoverflow.com/questions/14585538/$link"</noscript>";$sentence ="<div data-src="https://stackoverflow.com/questions/14585538/$link"></div>";}
if ($count==1){$sentence ="<div data-src="https://stackoverflow.com/questions/14585538/$link" data-media="(min-width: 400px)"></div>";}
if ($count==2){$sentence ="<div data-src="https://stackoverflow.com/questions/14585538/$link" data-media="(min-width: 800px)"></div>";}
if ($count==3){$sentence ="<div data-src="https://stackoverflow.com/questions/14585538/$link" data-media="(min-width: 1000px)"></div>";}
if($nocsript==""){ $output .= "$sentence";} else { $output .= $nocsript."$sentence";}
$count++;
}
$output .= "</div>\n";
return $output;
}