¿Estás buscando una forma de adjuntar imágenes a las publicaciones con un simple metabox de selección de miniaturas? Si bien probablemente exista un plugin para esto, hemos creado un fragmento de código rápido que puedes usar para adjuntar imágenes a las publicaciones con un simple metabox de selección de miniaturas en WordPress.
Instrucciones:
Todo lo que tienes que hacer es agregar este código al archivo functions.php de tu tema o a un plugin específico del sitio:
add_action("admin_init", "images_init");
add_action('save_post', 'save_images_link');
function images_init(){
$post_types = get_post_types();
foreach ( $post_types as $post_type ) {
add_meta_box("my-images", "Pictures", "images_link", $post_type, "normal", "low");
}
}
function images_link(){
global $post;
$custom = get_post_custom($post->ID);
$link = $custom["_link"][0];
$count = 0;
echo '<div class="link_header">';
$query_images_args = array(
'post_type' => 'attachment',
'post_mime_type' =>array(
'jpg|jpeg|jpe' => 'image/jpeg',
'gif' => 'image/gif',
'png' => 'image/png',
),
'post_status' => 'inherit',
'posts_per_page' => -1,
);
$query_images = new WP_Query( $query_images_args );
$images = array();
echo '<div class="frame">';
$thelinks = explode(',', $link);
foreach ( $query_images->posts as $file) {
if(in_array($images[]= $file->ID, $thelinks)){
echo '<label><input type="checkbox" group="images" value="'.$images[]= $file->ID.'" checked /><img src="'.$images[]= $file->guid.'" width="60" height="60" /></label>';
}else{
echo '<label><input type="checkbox" group="images" value="'.$images[]= $file->ID.'" /><img src="'.$images[]= $file->guid.'" width="60" height="60" /></label>';
}
$count++;
}
echo '<br /><br /></div></div>';
echo '<input type="hidden" name="link" class="field" value="'.$link.'" />';
echo '<div class="images_count"><span>Files: <b>'.$count.'</b></span> <div class="count-selected"></div></div>';
}
function save_images_link(){
global $post;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE){ return $post->ID; }
update_post_meta($post->ID, "_link", $_POST["link"]);
}
add_action( 'admin_head-post.php', 'images_css' );
add_action( 'admin_head-post-new.php', 'images_css' );
function images_css() {
echo '<style type="text/css">
#my-images .inside{padding:0px !important;margin:0px !important;}
.frame{
width:100%;
height:320px;
overflow:auto;
background:#e5e5e5;
padding-bottom:10px;
}
.field{width:800px;}
#results {
width:100%;
overflow:auto;
background:#e5e5e5;
padding:0px 0px 10px 0px;
margin:0px 0px 0px 0px;
}
#results img{
border:solid 5px #FDD153;
-moz-border-radius:3px;
margin:10px 0px 0px 10px;
}
.frame label{
margin:10px 0px 0px 10px;
padding:5px;
background:#fff;
-moz-border-radius:3px;
border:solid 1px #B5B5B5;
height:60px;
display:block;
float:left;
overflow:hidden;
}
.frame label:hover{
background:#74D3F2;
}
.frame label.checked{background:#FDD153 !important;}
.frame label input{
opacity:0.0;
position:absolute;
top:-20px;
}
.images_count{
font-size:10px;
color:#666;
text-transform:uppercase;
background:#f3f3f3;
border-top:solid 1px #ccc;
position:relative;
}
.selected_title{border-top:solid 1px #ccc;}
.images_count span{
color:#666;
padding:10px 6px 6px 12px;
display:block;
}
.count-selected{
font-size:9px;
font-weight:bold;
text-transform:normal;
position:absolute;
top:10px;
right:10px;
}
</style>';
}
add_action( 'admin_head-post.php', 'images_js' );
add_action( 'admin_head-post-new.php', 'images_js' );
function images_js(){?>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.frame input').change(function() {
var values = new Array();
$("#results").empty();
var result = new Array();
$.each($(".frame input:checked"), function() {
result.push($(this).attr("value"));
$(this).parent().addClass('checked');
});
$('.field').val(result.join(','));
$('.count-selected').text('Selected: '+result.length);
$.each($(".frame input:not(:checked)"), function() {
$(this).parent().removeClass('checked');
});
});
var result = new Array();
$.each($(".frame input:checked"), function() {
result.push($(this).attr("value"));
$(this).parent().addClass('checked');
});
$('.field').val(result.join(','));
$('.count-selected').text('Selected: '+result.length);
$.each($(".frame input:not(:checked)"), function() {
$(this).parent().removeClass('checked');
});
});
</script>
<?}
function wps_thumbnails_list(){
global $post;
$image = get_post_meta($post->ID, '_link', true);
$image = explode(",", $image);
foreach($image as $images){
$url = wp_get_attachment_image_src($images, 1, 1);
echo '<a href="';
echo $url[0];
echo '" class="lightbox">';
echo wp_get_attachment_image($images,'thumbnail', 1, 1);
echo '</a>';
}
}
Agrega este fragmento dentro del bucle de tu archivo single.php para mostrar las imágenes en tus publicaciones o páginas.
<?
wps_thumbnails_list()
?>
Nota: Si es la primera vez que agregas fragmentos de código en WordPress, consulta nuestra guía sobre cómo copiar / pegar fragmentos de código correctamente en WordPress, para que no rompas accidentalmente tu sitio.
Si te gustó este fragmento de código, considera echar un vistazo a nuestros otros artículos en el sitio como: 11 mejores servicios de hosting web gratuitos y cómo migrar un sitio del creador de sitios web de GoDaddy a WordPress.
¿Hay alguna razón para el doble código jquery?
Gran plugin. He estado intentando recuperar en la página o publicación los metadatos correspondientes de cada imagen sin éxito. ¿Alguien lo ha descubierto o es posible con este plugin?
Esto te mostrará cómo obtener metadatos,
http://wpsnipp.com/index.php/loop/display-attachment-thumbnail-with-image-metadata/
Obtengo una pantalla blanca al incluir este código en functions.php. Estoy usando WP 3.8, ¿hay una solución? 🙂 Me gustaría usar esto.
¡Hola! ¿Qué hay de Múltiples Imágenes Adjuntas a Una Miniatura? Ayúdame por favor
Hola Kevin
Solo me pregunto si en lugar de mostrar todos los archivos adjuntos en la Biblioteca de Medios, ¿hay alguna forma de mostrar solo las imágenes subidas para cada publicación a la que están adjuntas?
Gracias
Solo agrega esto
‘post_parent’ => $post->ID
Debajo
‘posts_per_page’ => -1,
Kevin, ¿te has encontrado con algo que permita la carga de imágenes para los campos de perfil de usuario? He visto algunos plugins premium, y supongo que esto tiene que hacerse con JS similar, pero solo me preguntaba si has encontrado algún código para eso.
¿Te refieres a algo como un tipo de carga de avatar?
Gracias, amigo. Fácil de usar, tal cual, o un excelente punto de partida para personalizar.
Genial, me alegra escucharlo. Actualmente estoy trabajando en una versión de plugin de este fragmento que admitirá cosas como carga diferida, vista previa de imágenes emergentes, etc., y la lanzaré gratis en un futuro cercano. Sígueme en Twitter o Facebook, haré un anuncio al respecto.
Esto es simplemente súper genial. Mencionaste en los comentarios de publicar una versión actualizada, solo tengo curiosidad si ya lo habías hecho o no. Gracias por el genial fragmento.
Parece una gran función de PHP. Quizás sea solo mi computadora, pero me parece muy lento, ¿hay alguna manera de acelerarlo?
¡Buen comienzo! Pero no uses $file->guid. Eso destruirá las proporciones. Usa $thumbnail = wp_get_attachment_image_src($file->ID, ‘thumbnail’); y reemplaza $file->guid con $thumbnail[0] en su lugar. ¡Mucho, mucho mejor!
Gracias Jens, tendré que publicar una versión actualizada con las sugerencias que he estado recibiendo. Me alegra saber que te gusta el fragmento.
Solo quería decir que finalmente lo hice funcionar, de nuevo, gracias. Tu ayuda es muy apreciada 🙂
De nada, me alegra saber que lograste que las cosas funcionaran correctamente.
Mmm, no sabía que la parte de “AT kevin” se convertiría en un enlace de Twitter con el nombre de usuario 'kevin'
Disculpa 🙂 Solo te estaba respondiendo a ti Kevin (Chard).
jaja, no hay problema 🙂
@Kevin:twitter , ¡wow, este debe ser mi día de suerte, he estado buscando algo como esto por un tiempo! Estoy muy agradecido, ¡gracias! Esto será útil y funciona muy bien, pero me gustaría saber cómo deshabilitar la opción de selección múltiple, solo quiero que la función pueda seleccionar un solo archivo adjunto 🙂
(Ya lo edité para que solo muestre la url/fuente para poder implementarlo en el bucle del tema)...
Simplemente cambia esto de casillas de verificación a botones de radio, todo dentro del mismo grupo.
Kevin, gracias pero eso no funcionó, en primer lugar, al seleccionar una imagen, selecciona la imagen pero si ya había otra imagen seleccionada, no la deselecciona, y todavía muestra varias imágenes en la publicación (no es realmente un gran problema, pero sería más fácil de usar si un usuario solo pudiera seleccionar una imagen :))
En segundo lugar, me gustaría saber si es posible mostrar el tamaño de la imagen en la sección alt o title de, o debajo de la imagen misma como en un span. ¿Es esto siquiera posible con este fragmento? Intenté lo siguiente:
(Sé que no es correcto :))
title=”””
Esto debería funcionar para ti, los botones de radio necesitan tener el mismo name=”” de lo contrario no forman parte del mismo grupo y funcionarían como una casilla de verificación.
http://pastebin.com/vF6mjyZL
Hice dos versiones, una que hace una sola imagen por las mismas razones que podrías tener, ambas deberían funcionar juntas aunque esta tiene algo de código comentado pero debería funcionar bien.
Lo que he intentado:
título = "' '"
Hola Señor, ¿puedo decir que este es uno de sus mejores fragmentos? ¡¿Mayo!?
Gracias, me alegra ver que te gusta el fragmento.