Cerrar
Image Alt

Campo personalizado repetible para subir imágenes en WordPress

Hay ocasiones en las que tenemos que crear una plantilla para páginas, entradas o entradas personalizadas en las que es necesario asignar una o varias imágenes.

Podemos hacerlo subiendo las imágenes mediante el apartado «Multimedia» y luego copiando la URL de la imagen en un Campo Personalizado:

Si la web es para nosotros mismos puede ser que no nos importe este sistema tan rudimentario, pero si es para un tercero quizás no sea esta la mejor opción.

Lo mejor es usar la función que WordPress nos ofrece y que hemos visto en artículos anteriores. Se trata de add_meta_box().

Ya vimos en un artículo anterior cómo crear un plugin que añade meta boxes para subir imágenes. Pero aprovechando este artículo de wp-tuts+ y basándome en él, vamos a crear una serie de funciones que nos permitan nó sólo crear un meta box para subir imágenes, sino incluso añadir todos los que queramos en función de las imágenes que queramos subir en cada página.

Esto es lo que vamos a conseguir:

Meta Box para imágenes repetible en WordPress

Hay un texto explicativo abajo de todo, donde podéis poner lo que queráis, por ejemplo unas breves instrucciones con el tamaño que tienen que tener las imágenes, etc.

Para crear esto abrimos el archivo functions.php de nuestro tema. Vamos a ver el código.

Lo primero que hacemos es crear el meta box con la función add_meta_box:

Como vemos estos nuevos campos personalizados van a aparecer sólo en las páginas. Si quieres que aparezcan en las entradas, pon «posts» y si quieres que aparezcan en entradas personalizadas, pon el nombre de la misma. Si queremos que salgan en las páginas y en las entradas, haríamos:

Seguimos. Necesitaremos un poco de jQuery para cargar el editor multimedia. Para añadir un archivo de Javascript la manera adecuada de hacerlo es mediante wp_enqueue_script. A continuación escribimos:

Como vemos, en este caso cargaremos el archivo sólo si estamos en una página. El archivo está ubicado en la carpeta «js» de nuestro tema.

¿Qué tiene este archivo custom-js.js?

Como veis hay varios eventos importantes. El primero se activa al hacer click en el botón de «Seleccionar imagen», lanzando el cargador multimedia de WordPress y sustituyendo la imagen por defecto por la que hemos elegido para poder verla una vez subida en el administrador. A continuación tenemos el botón de Quitar imagen.
Luego viene el botón para añadir un nuevo campo donde subir una imagen, para lo que usamos la función clone() de jQuery. Nos aseguramos también de que el campo «name» de este nuevo campo sea diferente del anterior. Buscamos el último introducido ye incluimos el clonado a continuación.
A continuación está el botón para quitar una fila (usamos simplemente remove() de jQuery) y por último, gracias a sortable() de jQuery tenemos la función para mover el orden de cada fila.

Bueno, después de este paréntesis volvemos a nuestro archivo functions.php. Vamos a definir el campo personalizado. Como sólo tenemos un tipo (la imagen repetible) escribimos:

Podríamos haber incluido más tipos dentro del array. Os aconsejo que leáis el artículo que os enlacé más arriba para ver otras opciones.

A continuación escribiremos la función a la que se llama desde add_meta_box. Si veis más arriba veréis que se llama show_custom_meta_box(). Como es muy largo el código he intentado comentarlo todo lo posible:

Ya nos falta una sola función, la de grabar los datos. A continuación (y seguimos en functions.php) escribimos:

¿Y ahora cómo obtenemos las imágenes?

Una vez tenemos ya creados los campos personalizados toca ir subiendo imágenes en cada página/entrada o entrada personalizada de nuestro tema.

Para luego obtener las imágenes para la web usaremos la función de WordPress get_post_meta.

En este caso lo que obtendremos es un array con todos los ID de las imágenes que pertenecen al $post->ID actual:

Si hacéis un:

veréis que tenéis en el array los ID de las imágenes. ¿Como podemos ahora verlas? Si las imágenes tienen que estar todas seguidas, una detrás de otra, podéis hacer:

Fijaros que vamos recorriendo imagen a imagen a través del bucle que crea el foreach. Obtenemos la url, el ancho y el alto de la imagen gracias a la función de WordPress wp_get_attachment_image_src y lo almacenamos en el array $imagen. Por ello $imagen[0] será la url, $imagen[1] será el ancho y $imagen[2] será el alto de la imagen.
Luego obtenemos el valor del atributo alt de la imagen con get_post_meta y lo grabamos en la variable $alt. Comprobamos si existe y si es así lo ponemos.

Si no queremos poner una imagen tras otra, al hacer print_r veremos en qué posición está la imagen que queremos recuperar en cada momento, por lo que en vez de $item tendríamos por ejemplo $attachID[1] etc..

Como veis en el código hemos usado la imagen «full», que es la de mayor tamaño al subir la imagen. Podemos poner otra que hayamos creado en nuestro archivo functions.php de nuestro tema, por ejemplo:

Para este ejemplo podríamos poner en vez de «full», «portada» (por ejemplo).

Y con esto hemos acabado! Os dejo a continuación las dos imágenes que he usado en el código, por si os fueran útiles:

Comentarios

  • Juan Pablo

    Hola Juan! Un placer saludarte desde Argentina. La verdad son muy buenos las articulos que publicas, he visto varios… muy bien explicados!
    Con respecto a este caso, te hago una consulta, lo revise mil veces y no lo pude hacer funcionar… O sea, el código está bien, el campo me aparece en el editor de articulos… Cuando me abre el multimedia probe con todas las opciones para poder ingresar la imagen y nunca me la mostro en la «preview» del editor… y tampoco en el template (pensando que quizás el campo hubiese estado bien cargado pero que no se veia en el editor) El resto de las funcionalidad creo que funcionan bien…
    Sabes que puede estar ocurriendo?
    Muchas gracias! Un saludo!

    10 febrero, 2012
    contestar
      • Juan Pablo

        Hola! Gracias por la respuesta…
        Las imágenes me las carga el sistema, las carga en «uploads» como todas. El problema es que no me lo carga en el campo personalizado que he generado con tus funciones. O sea, yo le doy click a «seleccionar imágen» me abre el Multimedia, selecciono el archivo… lo carga; le doy click a «insertar en la entrada» y no me aparece la preview como vos mostras a comienzos en el articulo. Actualizo la entrada y veo si se carga en el theme, pero tampoco…
        Probablemente algo no este funcionando correctamente… o yo le erre en algo…

        10 febrero, 2012
        contestar
          • Juan Pablo

            Hola Juan! Gracias nuevamente…
            Hice una copy/Paste rápido, por si había errado en algo, pero nada… no se que puede estar fallandome… Tengo que dar click en «Insertar en la entrada» verdad? digo, en Multimedia…
            Bueno, después me pongo con más tiempo, a ver si lo soluciono… Cualquier cosa vuelvo a preguntar! Muchas Gracias!

            14 febrero, 2012
          • Juan Pablo

            No, revise y lo pegue tal cual al primero, solo para post… y cambie el ‘page’ por ‘post’ dado que yo luego llamo al campo personalizado desde un single.php … La verdad, no sé, lo revise mil veces… Tendrá algo que ver con la integración del jquery? no, no?

            14 febrero, 2012
          • Juan Pablo

            Tengo Firebug en Mozilla y Chrome… el tema es que no se leer los problemas de Javascript ni el DOM… solo HTML y CSS…
            El script (custom-js.js) lo carga bien… cuando pongo print_r($attachID); me tira en el theme: Array ( [0] =>; [1] =>; [2] =&>; ). Habiendo intentado cargar 3 imágenes. Quizás debería probar las funciones en otra instalación de WP más limpia.
            Me habia olvidado de comentarte que encontre un «}» que tira ERROR antes del segundo add_meta_box en el ejemplo para ‘post’ y ‘page’.
            Gracias por la ayuda Juan!

            15 febrero, 2012
          • Juan Pablo

            Hola Juan!
            Lo probé en la última versión (3.3.1) y anda perfectamente! Era ese el problema… estaba usando la versión 3.2.1 asi que para los que tengan este problema… fijarse la versión que usan!
            Muchas gracias Juan por compartir! Un abrazo!

            17 febrero, 2012
          • Juan Pablo

            Hola Juan, volvi… es para decirte que descubri finalmente el problema que tenia. no se si tiene relación directa con la versión de WP (por que no lo intente aun)… es más bien el pluggin «Custom Field Template» evidentemente algo sucede cuando ese pluggin está activo… y es lo que NO me permitia usar correctamente tu «pluggin» que a decir verdad es excelente. Tienes idea que puede ser? Un abrazo, y nuevamente… gracias!

            29 febrero, 2012
  • Excelente post!, era lo que estaba buscando en galerías wordpress desde hace tiempo.

    muchas gracias por ayudarnos.

    13 febrero, 2012
    contestar
  • Claudio

    Hola Juan, primero que todo muchísimas gracias por este aporte que ha sido de gran utilidad poder encontrarlo, pero tengo un problema al implementarlo, tengo todo listo pero cuando quiero ver el sitio me aparece: Warning: Invalid argument supplied for foreach() in C:\wamp\www\wordpress\wp-content\themes\BLANK-Theme\single-portafolio.php on line 23 y la verdad es que no sé mucho de programación y no sé cual podría ser el error ya que he copiado y pegado el código tal como lo entregas. Estoy implementando este campo personalizado para subir imagenes y el post de Campos personalizados para las Entradas personalizadas en WordPress. Muchas gracias desde ya por cualquier ayuda.

    15 febrero, 2012
    contestar
      • Claudio

        Muchas gracias por responder, disculpa la demora en contestar, pero estuve un tiempo fuera. No me funcionaba porque no habia subido ninguna imagen, luego de algunos cambios logré que funcionara y de nuevo muchas gracias porque me ha sido muy útil.

        1 marzo, 2012
        contestar
  • Hola he implementado este tutorial en mi sitio de wordpress y funciona perfectamente. Muchísimas gracias por tu aporte.

    Solo tengo una duda, quisiera poder mostrar todas estas imagenes que he subido a mi post coo un slideshow al principio del mismo, cree que se podría hacer, soy algo nuevo en esto del php y no me aclaro muy bien. Te agradecería si me ayudaras a mirar en la buena dirección.

    Gracias de antemano !!

    17 abril, 2012
    contestar
  • Ariel

    Hola Juan
    Muuuy Bueno y funciona de 10 lo estoy implementando en una galería junto a bxslider cuando lo termine lo paso a la comunidad, tengo una consulta si quisiera agregar a cada imagen una descripción por donnde debería iniciar mi busqueda? intente agregarlo un campo de texto a cada imagen pero no logro guardarlo. la otra opción sería colocarle descripción a la imagen mediante wp pero no logro obtener esa descripción.

    saludos y espero puedas ayudarme.

    6 mayo, 2012
    contestar
      • Ariel

        Juan Sos lo Maximo lo pruebo y te comento, una vez terminado te paso el codigo para que lo puedas compartir.

        10 mayo, 2012
        contestar
  • Raid_

    Hola, fantastico el tutorial me ha sido de gran utilidad.
    Pero tengo una duda, intente seguir el post en el que te basaste, pero mi ingles es pesimo, y el traductor de google deja bastante que desear.

    Como podria aplicar este mismo proceso, pero a una textarea, y como aplicarle diferentes estilos.

    Muchas gracias

    17 mayo, 2012
    contestar
  • Muchas gracias lo provare d einmediato tengo un proyecto que necesita esto, gracias por tua yuda, cualqueir duda igual te dejo un comment

    1 junio, 2012
    contestar
  • Marie Fontaine

    Hola, soy nueva en wordpress copie tu código en el functions.php, pero no me funciona subo la imagen y no se ve como la de tu ejemplo, cambie todos los nombre de las variables porque utilizo custom_field_template pero lo único que se guarda es esto:
    Meta_id post_id meta_key meta_value
    508 70 custom_ximagenrepetible a:2:{i:0;s:0:»»;i:1;s:0:»»;}

    No sé si es correcto porque no veo ninguna ruta de la imagen ni la imagen pequeña, como en su ejemplo.

    Le agradecería su ayuda.

    11 junio, 2012
    contestar
  • Galo

    Que tal, me sirvió de maravillas este tutorial, muchas gracias. Quiero hacerte una consulta, estoy trabajando con un Custom Post Types, llamado Fotos y solo quiero que me cargue en el editor, el titulo, el Excerpt, y este meta_box creado por vos. Pero nosé como cargar esto ultimo. Solo me carga el titulo y el Excerpt.
    Si me podrias ayudar, te estaré agradecido eternamente!
    Saludos

    14 junio, 2012
    contestar
    • Galo

      Solucionado, despues de buscar por todos lados, y hacer deducciones sobre el codigo, me dí cuenta que en la primer linea de tu tutorial aclarás como hacer esto!!!. Solo tenia que poner el nombre de mi entrada personalizada. En fin, la vista en la lectura y las ganas de terminar un trabajo aveces no van de la mano.

      15 junio, 2012
      contestar
  • nico

    hola juan, primero q nada muchas gracias por este tutorial.
    me anda muy bien, pero tengo un problema… no me deja añadir imagenes externas, por ejemplo tengo un plugin de imgur que sube las imagenes a dicho host y luego se pueden usar en el post, pero cuando hago click en insertar en entrada no hace nada… pasa lo mismo cuando intento poner la imagen desde la pestaña «añadir imagen desde url» hago click en insertar imagen y no hace nada
    alguna solucion? o solo a mi me pasa?

    gracias!

    22 junio, 2012
    contestar
  • Hola Juan, he implementado tu «plugin» en un tema para wordpress que estoy desarrollando y funciona a las mil maravillas, enhorabuena por tu estupendo trabajo. Por otro lado me gustaría poder utilizarlo tanto con imagenes como con videos ya que se pueden subir perfectamente con el media uploader de wordpress. Estoy rompien´´éndome la cabeza y me pregunto si será tan sencillo como creo o será imposible. Por favor ¿me podrías echar una mano o decirme como puedo hacerlo ?

    Muchas gracias de antemano y fgracias por tu atención.

    Un saludo!

    2 julio, 2012
    contestar
    • I also have a problem with sortable, eworking ok but wordpress Quick Edit buttons for post a pages don´t work.

      Could you help me, someone has had this problem?

      Thank you!

      3 julio, 2012
      contestar
    • No sería mejor crear un campo personalizado y pegar la URL del video alli y en html configurarlo para youtube o vimeo,
      te dejo un ejemplo de un sitio que realize carga de video con vimeo http://lasmoreriascollection.com/caballo/cisne-mor/ y tambien utilize el plugin de galería de emenia.

      13 julio, 2012
      contestar
  • david

    Hola Juan, son fatásticos estos tutoriales, en solo un par de días he avanzado mucho!

    Me funciona todo perfecto en WP 3.4 con twentyeleven, excepto la parte final! la de obtener las imagenes y verlas en el post.

    a partir de

    los últimos 3 bloques me fallan.

    Cree el post type Videojuegos, pero dentro de este tipo no sale el campo personalizado, me sale en los post genericos, pero al incluir este código para mostrar las imágenes me da error. Te agradecería algún consejo a ver si consigo terminarlo. Mucchas gracias!

    24 julio, 2012
    contestar
    • david

      hola, conseguí hacerlo, te estoy muy agradecido por toda esta información.

      25 julio, 2012
      contestar
      • diego

        lo resolvi, cambie

        17 julio, 2013
        contestar
  • Hola Juan,
    primero agradecerte el tutorial, me esta sirviendo mucho, el caso es que no soy muy bueno en php, llevo dias intentando añadir campo descripcion personalizado para que además de poder subir una imagen pueda incluir un título y descripción he leido la solución que muestras mas arriba incluyendo la Descripción” que aparece en el cargador de la imagen, funciona perfectamente, pero mis necesidades van mas allá me gustaría que el campo repetible estuviera formado por titulo descripción e imagen, cualquier pista o ayuda sería de gran utilidad.
    Mil gracias por tu esfuerzo. Es un gran tutorial

    17 septiembre, 2012
    contestar
  • Damián

    Hola Juan, gusto saludarte.
    Gracias por este aporte funciona perfecto, he estado tratando de agregar 2 campos a cada imagen, veras, tengo una web en lenguaje Español e Ingles y ademas es multiusuario, por lo que quiero tener 2 campos extras, uno para la descripción en español de la imagen y el otro para la descripción en ingles, para luego en el sitio web hacer una condicional del lenguaje en uso y en consecuencia mostrar la descripción correspondiente, pero no he tenido suerte con los campos. Espero puedas apoyarme en ese sentido.

    Gracias y saludos desde Nicaragua.

    26 septiembre, 2012
    contestar
  • Francisco

    Hola Juan, espero estés bien.

    He estado tratando, sin éxito, el poner un condicionante para que en caso de que ninguna imagen esté subida, el ciclo no se lleve a cabo.

    Sucede, que al no subir ninguna imagen, marca el siguiente error: «Warning: Invalid argument supplied for foreach() »

    La idea sería que con alguna función de WP (o creando alguna) compruebe si hay imágenes y de no haberlas no correr el ciclo y dejar vacío (como un isset).

    No he podido, se te ocurre algo?

    28 septiembre, 2012
    contestar
  • daniel

    Cuando borras las fotos, no se borran ni de la base de datos ni de la carpeta uploads,,,

    Asi se queda la DB cada vez mas llena de basura y la carpeta uploads tambien.

    Tampoco me guarda el orden de las fotos. Las cambio de lugar, y al guardar, todo vuelve como estaba….

    6 noviembre, 2012
    contestar
  • daniel

    Pues un plugin como «Types», es mucho mejor…..

    2 diciembre, 2012
    contestar
  • Félix

    Esta modificación funciona en WordPress 3.5 ?? es que no consigo hacerla funcionar…. una vez selecciono la imagen a subir desde la librería multimedia por ejemplo, le doy a insertar en la entrada y se queda en blanco la ventana pop-up, aún asi cierro por si acaso y la imagen no aparece en el campo personalizado y po rlo tanto no la añade a la entrada.
    Saludos !

    14 enero, 2013
    contestar
  • Félix

    Gracias por responder Juan.
    No tengo claro donde hay que poner las últimas líneas que hacen referencia a la función de WordPress get_post_meta.

    Me refiro a los tres bloques de líneas de código

    Saludos

    14 enero, 2013
    contestar
  • Félix

    Perdón, he escrito código y se ha comido parte de mi mensaje….

    Me refiero al apartado: ¿Y ahora cómo obtenemos las imágenes?
    los tres bloques anteriores al tamaño de imagen y el bloque del tamaño de imagen, donde hay que pegarlos ??? en funtions.php también ?
    Ya he conseguido que me salga la imagen seleccionada, pero no aparece en la entrada….

    15 enero, 2013
    contestar
  • Félix

    Vale… ya he conseguido hacerlo funcionar, pero pensaba que esto se podía utilizar para añadir fotos a las entradas, entiendo que es para añadir imágenes fijas en cualquier parte del theme, como publicidad, etc.

    Gracias, un saludo !!

    15 enero, 2013
    contestar
  • inaki

    Hola Juan! La verdad que solo puedo agradecerte el código que has puesto en tu web!! Mil gracias!! La verdad que llevaba bastante tiempo buscando una solución a este problema. GRACIAS!! Eres un crack!!

    19 febrero, 2013
    contestar
  • Juan

    Muy bueno, lo hice andar en el archivo functions, pero ahora estoy tratando de meterlo como plugin (junto con un post_type) me aparece el campo pero como que no me carga el jquery pareciera, me sale esto:

    para que apunte a la carpeta de plugins y no al theme. Sera eso?

    26 febrero, 2013
    contestar
  • Estimado! Me sirvió mucho el tutorial. Logré adaptarlo para mi web para mostrar información de los integrantes de conjuntos folcloricos de Argentina. Con la foto y demas información en title, descripcion y alt de la foto y luego imprimiendo eso datos.

     

    Ahora bien, necesito crear un plugin similar para la discrografia en donde muestre la imagen de la tapa del disco y la lista de temas al lado. Para eso necesito que me repita en conjunto un meta qu contenga la imagen y otro que sea para introducir texto.

     

    Empeze a hacerlo como pude, lo primero qu hice fue poner todo el mismo codigo repetido dentro del functions.php pero al cargar la pagina ya me tira un error en una linea de php y no carga. Quizas no tenga q poner el codigo y si empezar desde otro lado? Ademas este campo debe ser mostrado en otros custom post types. Algun consejo para orientarme sobre esto y sobre de como agregar un campo meta de texto que se repita en conjutno?

     

    Muchas Gracias desde ya.

    Saludos!

    4 marzo, 2013
    contestar
  • Dale! Voy a intentar a ver si le puedo dar forma y hacer funcionar de esa manera. saludos y gracias por todo el material!

    4 marzo, 2013
    contestar
  • Genial artículo, llevaba tiempo buscando algo así, hasta el momento lo hacía mediante el plugin Advanced Custom Fields, pero con este código es mucho mas rápido de generar y la interfaz no tiene nada que envidar.

    Gracias!

    14 marzo, 2013
    contestar
  • Hola Juan, ayer de repente empezaron a fallar los campos personalizados, resulta que al subir una imagen e insertarla o seleccionarla de la librería para subirla la ventana emergente se queda en blanco y no llega a insertar la imagen. He mirado en la consola y me da un error en el custom-js.js.

    ¿Sabes que puede ser?  ¡Gracias!

    26 marzo, 2013
    contestar
  • Hola Juan, Gracias por tu respuesta, cierto, era porque tenía el campo de URL de imagen vacío.
    ¿Existe alguna forma para que no sea necesario rellenar este campo? Es que ya sabes los clientes normalmente no quieren este tipo de complicaciones.

    26 marzo, 2013
    contestar
  • Alfredo

    Hola Juan, como te comentaba en el anterior articulo, muchas gracias por tu fantástico trabajo, gracias por compartirlo con nosotros.

    He seguido tus pasos, y me funciona a la perfección en mi instalación en local. Pero ahora, cuando lo he puesto en mi servidor, no funciona la opción de reordenar las imágenes. Las puedo mover, pero al guardar la entrada, vuelven a aparecer en el orden inicial.

    ¿Puede ser algún problema con jquery?

    4 abril, 2013
    contestar
      • Alfredo

        Cuando los muevo, no me salta ningún error. Sí que me muestras este error, pero sino me equivoco es por los autoguardados de wordpress:

        Error: Exponer objetos JS del chrome al contenido sin __exposedProps__ es inseguro y desaprobado. javascript:self.on(«click», function (node, data) { self.postMessage(node.src);});
        Línea: 1

        4 abril, 2013
        contestar
          • Alfredo

            El fichero del ejemplo es completamente igual. A mi lo único que se me ocurre es que cargue alguna otra librera jquery, desde otro plugin

            4 abril, 2013
  • diego

    como lo arreglaste?

    17 julio, 2013
    contestar
  • diego

    Hola, estoy creando un pagina en wordpress, donde quiero utilizar tres grupos de galerias de fotos, pero no consigo que los tres funcionen, estoy importando en la pagina functions.php

    en cada uno estoy poniendo el código

    en cada uno estoy cambiando el nombre de algunas variables y funciones para que no se redeclaren, llegue hasta aqui, pero solamente guarda los cambios las actualizaciones para el ultimo grupo /tercero.php es decir que si quito tercero.php solamente toman en cuenta el segundo.php y si quito segundo.php solo toma en cuenta los cambios para primero.php,

    agradeceria vuestra ayuda

    19 julio, 2013
    contestar
  • José

    Muy buen trabajo Juan, felicitaciones!

    Me surge una pregunta: ¿se puede acceder a una imagen sin el bucle?

    En bruto sería algo como 

    Muchas gracias

    30 julio, 2013
    contestar
  • José

    Hice una pequeña función que quizás le sirva a alguien.
    Es que en muchos casos hay clientes que siguen eso de «no me hagas pensar» y hay que dárselo masticado.

    Y en las paginas esto:
    (para acceder a la url de la imagen 1)

    (para acceder a la url de la imagen 2)

    Saludos desde Uruguay 😉

    30 julio, 2013
    contestar
    • disculpa cual seria exactamente el codigo para imprimir las imagenes individualmente?

      18 noviembre, 2014
      contestar
  • Olivier

    Hola,

    cuando se mueve el orden de las imagenes y despues se hace «save post» el orden esta perdido a recargar la pagina. Tengo que mover la imagenes y despues anadir una nueva imagen (vacia) par que el orden este grabado. Cual seria la cuasa?

    13 agosto, 2013
    contestar
  • Ivan Mendo

    Excelente Tutorial, pero me da un error en el

    el código que utilizo es tal cual esta en esta web.

    Alguna idea de como solucionarlo?

    Desde ya muchas gracias

    30 agosto, 2013
    contestar
  • Ivan Mendo

    Hola Juan el error que me indica es el siguiente

    30 agosto, 2013
    contestar
  • Ivan Mendo

    Listo solucionado, excelente script y funciona perfecto

     

    31 agosto, 2013
    contestar
  • Yllelder

    Como mis conocimientos de php son más bien básicos, no entiendo exactamente como hay que modificar el foreach para mostrar sólo la primera imagen adjunta, y no una detrás de otra. ¿Podrías ser más específico?

    Por cierto, el código funciona de miedo, muchas gracias.

    31 agosto, 2013
    contestar
  • Lo he solucionado de manera sencilla:

    Muchas gracias Juan por el tutorial 🙂

    2 septiembre, 2013
    contestar
  • oscar fercas

    Otro tutorial genial, como muchos en tu blog!

    Viendo este tuto, tengo una duda que podria solucionarme una web que estoy desarrollando.

    ¿Es posible crear un campo personalizado tipo checkbox o radio button,  que tenga una url de una imagen en la biblioteca de medios? ¿Y que checkeando o no, mueste la imagen en la entrada?

    No se si queda muy claro, es una web téxtil, y mediante estos checks, introducir los típicos iconos de «planchado»,»no usar lejia», «lavar en seco»….

    Gracia y sigue con tu blog, que es genial!

    10 septiembre, 2013
    contestar
  • Miguel Peres

    Hola Juan!

    Siguiendo vuestro tutorial me he encontrado que al  seleccionar la imagen me encuentro con esta libreria multimedia.:

    http://www.subirimagenes.net/i/131015101313387608.png

    y me gustaria que saliese esta libreria:

    http://www.subirimagenes.net/i/131015101313959424.png

    Es posible?

     

     

    15 octubre, 2013
    contestar
  • Hola, excelente tutorial.

    Una pregunta, al momento de cambiar de orden las imágenes y actualizar la entrada no se guarda el orden deseado.

    Sebes que podría ser, ya revise y no me manda error de javascript

     

    Saludos

    24 octubre, 2013
    contestar
  • Revisando el Javascript, me manda el siguiente error

    podrías ayudarme con esto?

    24 octubre, 2013
    contestar
  • Hola Juan, muchisimas gracias por el tuto, estubo muy bien explicado y funcional, me surgio la idea de dividir la carga de mi blog y poner las imagenes en otro servidor (otra página), me preguntaba si sería posible indicarle al wordpress que suba las imagenes no al servidor mismo, sino a otro de otra página, agregandole antes claro los accesos FTP guardados por ahi nosé, talves en el mismo plugin…

    el orden sería:

     Al hacer click en «seleccionar foto», que las suba localmente al servidor donde esta alojado el mismo wordpress, obviamente para poder cortar las imagenes con los tamaños personalizados y demás…
     Luego, pasarlas internamente por FTP al otro servidor, simplemente una transferencia, para luego borraslas del local.
     te debuelba el enlace de la imagen.. y punto..

    Se podría hacer eso?, he estado buscando gran parte de la madrugada, y no he podido encontrar algo asi.. :/, como podría hacer eso?

    Muchas Gracias, espero tu prota respuesta:

    NOTA: seria bueno agregar el plugin de «Suscribirse a los comentarios», para suscribirme a los nuevos comentarios de este post.. y no estar haciendo F5 para ver si respondes xDDD

    4 diciembre, 2013
    contestar
  • Muchas gracias por responder, estaba ancioso por tu respuesta :),, acabo de hacer un plugins para agregarle campos personalizados a mis entradas , estoy desarrollando una web de peliculas propia, , si me das tu email te paso el plugins, es muy funcional y tiene buena pinta ya que le meti jQuery 🙂 , es super simple, pero cumple con lo esperado… si lo mirás te agradeceria un monton.. Disculpa por no ofrecerte una remuneración económica, :/ , pero puedo ofrecer mis conocimientos sobre «GameServers», en eso tambien me estoy desarrollando a la par que en wordpress

    5 diciembre, 2013
    contestar
  • Oscar Revilla

    Lo primero, gracias por este extensísimo tutorial para incluir algo que, para mí, es muy necesario en el tema que estoy construyendo. He copiado todo lo que comentas pero cuando le doy a «insertar en la entrada» se me queda en blanco y no se carga nada.

    El código tiene muy buena pinta, lo he revisado y no doy con el motivo por el que todo funciona perfectamente hasta ese punto. Tengo la última versión de wordpress, el 3.8. No sé si tendrá algo que ver.

    He leído en algún comentario un problema similar, aunque en mi caso no tengo esa versión wordpress ni tengo instalado ningún plug-in, ya que quiero construir el tema sin ellos. ¿No sabrás donde puede estar el problema?

    15 diciembre, 2013
    contestar
  • Oscar Revilla

    Hola Juan!

    Efectivamente, el problema era ese!! Ya lo veo todo perfectamente. Ahora me toca «cacharrear» un poco para darle forma y tamaño a las imágenes y colocarlas en la parte del post que necesito, pero lo realmente complicado era dar con un código como este tuyo.
    Muchas gracias, de verdad!!

    17 diciembre, 2013
    contestar
  • Olivier

    el problema estaba relacionado con el plugin qtranslate.
    el problema ha desaparecido con la actualización de qtranslate.

    18 diciembre, 2013
    contestar
  • Hola gracias por toda la enseñanza.

    Tengo una pregunta…tengo varios campos personalizados para subir imágenes de lo que vendo…pero estar subiendo de a una en cada campo y pegar la URL es  muy tedioso y lento.

    Puedo cargar varias imágenes en la librería o en galería…pero… como hacer para que se ordenen automáticamente una por una en los campos en que hay que pegar las url para las imágenes???

    gracias y saludos

    23 diciembre, 2013
    contestar
  • Fernando

    Hola, muy bueno y explicativo el post, pero la verdad que no logro hacerlo funcionar, tengo wordpress 3.8.1. Lo único que me aparece es «Homepage tagline area».

    He mirado el código, pero la verdad que no se cual es el error.

    Se que es un poco antiguo el post, pero tal vez sepas cual es el error que estoy cometiendo.

     

    Saludos

    Fernando

    11 abril, 2014
    contestar
  • Fernando

    Hola, encotraste solución al problema que presentas,. a mi me aparece solo «Homepage tagline area» como campo personalizado, no llego a cargar nada,. y no se como solucionarlo.

    Saludos

    11 abril, 2014
    contestar
  • Fernando

    En la página de entradas, no llego a cargar nada,. Me aparece el espacio para el campo personalizado, donde se muestra solo el título del campo, y no me aparecen las opciones para cargar las imágenes.
    Solo el texto que te comento.

    Saludos

    11 abril, 2014
    contestar
  • Fernando

    Este es el código, lo copie y pegue dos veces, y siempre lo mismo, lo único que cambie fue el prefix.

    11 abril, 2014
    contestar
  • Fernando

    Si subí el archivo js, y lo chequee desde Chrome, y esta cargado bien.

    Copio el código nuevamente

    —————————————————————————————-

     

    11 abril, 2014
    contestar
  • Fernando

    Hola Juan, muchas gracias por el tiempo dedicado a resolver mi problema. Voy a probar con esto último que me comentas.

    “Homepage tagline area” aparece en lugar de mostrarme el botón para subir las imágenes, dentro de la edición del Post. O sea, en lugar de ver lo que vos mostras en la segunda imagen de este post (onde se ven las imágenes subidas), yo veo la línea de texto “Homepage tagline area” y nada más. No tengo la posibilidad ni siquiera de subir las imágenes.

    Muchas gracias nuevamente.
    Saludos

    13 abril, 2014
    contestar
  • Diego

    Hola Juan.

    Muchas gracias por tu post, esta excelente me ayudo bastante.

    Tuve un problema con el archivo js para subir las imágenes y me gustaría aportar una condición que me ayudo a prevenir el error por undefind.

     

     

    5 mayo, 2014
    contestar
    • irene

      muchisimas gracias por este aporte!! justo tenía este problema y se me ha solucionado.
      gracias!!

      24 octubre, 2017
      contestar
  • nat

    ¿es posible levantar el nuevo cargador multimedia?

    15 julio, 2014
    contestar
  • Jorge Camacho

    Hola Juan,

    He puesto el codigo funciona bien con agregado un post type, pero cuando quiero ponerlo a otro post type y quiero crear un articulo me sale cargadas las imagenes como si las hubiese subido.

    15 noviembre, 2014
    contestar
  • Hola disculpa estoy teniendo problemas y me acabas de dar el 50% de la solucion, lo unico que me faltaria es saber, como podria yo obtener las url de las imagenes para ponerlas en un slideshow!, seguramente es muy facil, pero estos codigos ya me quemaron el cerebro, si alguno tiene alguna idea se las agradeceria.

    18 noviembre, 2014
    contestar
    • Estimado Teesood, eso lo obtienes mediante una array indicando el indice 0 ($imagen[0])

      2 diciembre, 2014
      contestar
  • Hola que tal es un excelente metabox el que nos has indicado como crear, sin embargo tengo un problema para mostrar las imágenes.
    A mis imágenes las estoy colocando dentro de un container el cual tiene diferentes formatos para darle la apariencia de una pizarra, sin embargo quisiera saber la forma de editar la condicional para indicarle que si no hay ninguna imagen no se muestre el bloque, ya que aunque no suba imagenes este bloque se seguirá viendo y tengo que eliminar la fila vacía del metabox para que el bloque no se muestre.
    El código que estoy utilizando para mostrar las imágenes es el siguiente:
    Y aquí dos páginas de muestra con las imágenes:
    Página con imágenes subidas:
    Progresión de trazos
    Esta página no tiene ninguna imagen subida pero no eliminé la fila vacía para que vean a que me refiero:
    Grupos de aprendizaje
    Y esta con la fila vacía eliminada:
    Cambiar tamaño de avatar

    Espero que me puedan ayudar, ya que es un trabajo estar revisando todas las entradas para ir quitando la fila vacía.

    12 febrero, 2015
    contestar
  • Estaba tratando de publicar nuevamente el código pero no me dejaba publicar, lo que tengo actualmente funcionando es lo siguiente:

    Lo que debería hacer dicho código es determinar si el campo de imagenes repetibles contiene datos y mostrar las imágenes que se han subido, lógicamente como quería darle formato al bloque de imágenes, tuve que hacerlo con una condicional esperando que al no haber datos el bloque no se mostrara, sin embargo este no es el caso ya que al momento de publicar una entrada que no contiene imágenes, si yo no quito la fila vacía en el metabox, al momento de guardar al visualizar la entrada va a mostrar el diseño de fondo del bloque de imágenes, lo que no sucede si quito la fila vacía en el metabox.

    14 febrero, 2015
    contestar
  • Eduardo

    Saludos,

    El plugin que realizaste es excelente amigo, solo que lo estoy adaptando para hacer una especie de galeria.

    Como puedo obtener el url de la primera imagen solamente, o hacer algo parecido a esta pequeña funcion que e realizado pero con la ayuda de tu plugin.

    Lo que quiero es mostrar la primera imagen en tamaño original, el resto en miniaturas para que al hacer click sobre ellas cambia por la primera imagen mostrandose en tamaño original.

    Algo parecido a esto:

    1 marzo, 2015
    contestar
  • Perdonen nuevamente, al parecer mi código no se muestra bien; quería mencionar que estuve modificando un poco el código para ver si el bloque de imagenes se muestra únicamente cuando haya imágenes pero aún no logro hacerlo funcionar.
    El código actual con el que estoy trabajando es el siguiente:

    He puesto algunos comentarios pero aun no logro hacerlo funcionar, en el caso de que al publicar la entrada no elimine la fila en blanco tomará como si existieran datos en el campo por lo que se mostrarán igualmente los formatos.

    8 marzo, 2015
    contestar
  • Eduardo

    Saludos,

    Amigo hay alguna forma de agregar css al momento de colocar la imagenes, es decir que se ponga en cuadricula, me refiera a la zona de edicion de la entradas, donde seleccionamos las imagenes.

    17 marzo, 2015
    contestar
  • Josh WIn

    Emenia son geniales ! Debo agregar lo siguiente :

    En modo Debug en WP genera : estos WARNING –> Notice: Undefined index:

    La solución es aplicar isset a esas variables :

    Y agregar esta sentencia :

    || En el siguiente código :

    Buen día

    26 marzo, 2015
    contestar
  • Josh WIn

    Saludos Juan se que vives muy ocupado pero agradezco tu ayuda para saber como podría hacer mas de un metabox y a cada metabox activarlo en una página especifica, me funciono para para una página pero cuando intento validarla de la siguiente forma no me funciona :

    // add_custom_meta_box for Gallery
    function add_custom_meta_box() {
    $post_id = isset($_GET[‘post’]) ? isset($_GET[‘post’]) : isset($_POST[‘post_ID’]) ;
    if ( is_page( ‘Gallery’ ) || $post_id == ‘135’){
    add_meta_box(
    ‘custom_meta_box’, // id
    ‘Gallery XYZ’, // title custom meta box
    ‘show_custom_meta_box’, // name function
    ‘page’, // pages
    ‘normal’, // context
    ‘high’); // priority
    }
    }
    add_action(‘add_meta_boxes’, ‘add_custom_meta_box’);

    Agradezco una guia de tu experiencia.

    Mil gracias.

    23 abril, 2015
    contestar
  • hola buens tardes que pregunta si sabes algun forma de uni tus dos post es que teng instalado actualmente el plugin qu creas en esta pag https://www.emenia.es/plugin-subir-imagenes-campo-personalizado-wordpress/
    pero quisiera agregarle los preview de las imagenes solamente pero no he podido sabes alguna forma?

    18 diciembre, 2015
    contestar
  • Oscar Madrid

    Hola qué tal?
    Muy buen aporte, lo he usado bastante, está muy bueno.
    Ahora tengo un problema, estoy tratando de usar el mismo código que he usado siempre para mis sitios que he creado y ahora tengo un problema al insertar la imagen, no me la carga en el campo personalizado, y la ventana de carga queda en blanco, este es el error que me sale

    Uncaught TypeError: Cannot read property ‘replace’ of undefined
    window.send_to_editor @ custom-js.js?ver=4.4.2:10
    (anonymous function) @ media-upload.php?type=image&tab=library&post_id=0:3

    Me podrías echar una manito con esto?

    7 abril, 2016
    contestar
    • Andrea

      Hola Oscar,
      Ya sé que ha pasado algún tiempo, pero he tenido el mismo problema y esta es la solución que he encontrado, por si le puede servir a alguien más que esté en la misma situación.

      He cambiado este bloque en el custom-js.js:

      Por este otro:

      Con esto funciona ok con la última versión de wordpress, la 4.5.3.

      Muchas gracias Juan por el artículo, he aprendido un montón!

      Un saludo.

      6 julio, 2016
      contestar
  • Marco A. García Guerra

    Alguien sabe donde puedo agregar las clases y id´s para los atributos del contenedor?

    Me refiero para poder apilarlos correctamente por columnas.

    29 julio, 2016
    contestar
  • Muy buenas! Solo quería darte las gracias por este fantástico tutorial!

    18 noviembre, 2016
    contestar
  • asilvestre87

    Muy bueno el tutorial! es justo lo que llevo todo el día buscandol!
    Gracias! =)

    8 marzo, 2017
    contestar
  • Adol

    Antes que todo gracias por el post. alguien logro hacerlo andar en la version 4.8 actual. porque recien lo encuentro y es justo lo que necesito para un template que estoy haciendo y no logro hacerlo andar, cuando elijo la imagen en la ventana emergente queda en blanco y no logro cargar la foto..

    saludos a toda la comunidad

    22 junio, 2017
    contestar
  • Lucas

    Hola, este ejemplo me sirvió y lo estoy usando a la perfección.

    Mi único problema es que me gustaría limitar el máximo de imágenes a subir a la cantidad de 3.
    Estuve viendo el código, y no supe como hacerlo.

    Podrías ayudarme nuevamente??

    Muchas gracias por compartir.

    Saludos.

    14 septiembre, 2017
    contestar
  • David

    Para los que tienen problemas con el Uncaught TypeError: Cannot read property ‘replace’ of undefined:
    Si se produce este error porque el campo url enlace de la imagen que se sube está vacío se le puede indicar a wordpress que lo ponga por defecto con la url, para ello accedes al link: /wp-admin/options.php de tu web

    y buscas image_default_link_type y le pones el valor : file.

    Espero que sea de ayuda. Saludos y gracias por el código que aportas.

    25 abril, 2018
    contestar

Escribe un comentario