Cómo usar una imagen externa como imagen destacada

WordPress tiene una potente librería multimedia que os permite gestionar todas las imágenes que hayáis subido a vuestro servidor. En general, cuando queremos insertar una imagen en una de nuestras entradas, lo que hacemos es seleccionar esa imagen desde la librería (o, si no estaba, la subimos a la librería en ese mismo momento). Sin embargo, hay veces en las que no subimos la imagen al servidor donde tenemos hospedado WordPress, sino que la subimos a otro lado y la enlazamos insertando directamente la etiqueta HTML <img>. Los motivos para optar por una solución como esta son varios, pero en general suelen incluir cuestiones de balanceo de carga, velocidad de transferencia, optimización de recursos, etc.

Si sois de los que usáis este tipo de soluciones, entonces seguro que habréis detectado una de las limitaciones de WordPress: no se puede establecer como imagen destacada de una entrada una imagen que no esté ubicada en la librería. Una posible solución a este problema consiste en crear un custom field en vuestro WordPress (una entrada en la tabla wp_postmeta enlazando a la entrada) y modificar vuestro tema para que utilice la imagen especificada en ese custom field en lugar de la imagen destacada estándar.

Es evidente que modificar el tema para solucionar el problema es algo engorroso. ¡Simplemente pensad por un instante la cantidad de sitios en que se puede utilizar la imagen destacada! O, aún más difícil, el hecho de que WordPress crea, para cada imagen que existe en la librería, diferentes versiones a diferentes tamaños (algunos estándar, como por ejemplo thumbnail, medium, large y full, y otros que dependen del tema) y lo complicado que debe ser hacer cuadrar una imagen externa con una única medida…

Nelio Popups

¡Un plugin fantástico! Es muy fácil crear ventanas emergentes con el editor que ya conoces y las opciones que ofrece están muy bien diseñadas.

Juan Hernando

WordPress.org

Descarga gratis

Versión premium

Imagenes destacadas a través de una URL externa

Conscientes de este hecho (y queriendo contribuir a la comunidad), el equipo de Nelio hemos desarrollado un pequeño plugin que soluciona el problema de una forma rápida y sencilla. Nelio External Featured Image os permite introducir la URL de una imagen externa como imagen destacada de una entrada. Cuando guardéis y publiquéis la entrada, la imagen que haya detrás de esa URL será la que se utilice en absolutamente todos los sitios de vuestra web donde se requiera la imagen destacada de esa entrada: da igual que sea un thumbnail de 50x50px o un banner previo al contenido.

Edición de entrada con imagen destacada externa — Captura de pantalla de la edición de una entrada con el plugin Nelio External Featured Image activo

Así que ya sabéis, si queréis usar imágenes externas como imagen destacada de vuestras entradas, Nelio External Featured Image es lo que necesitáis. ¡Esperamos que os guste esta pequeña herramienta… y que nos hagáis llegar cualquier sugerencia que tengáis para mejorarla!

Imagen destacada Jakob Owens en Unsplash.

44 respuestas a «Establecer como imagen destacada una imagen que no esté en la librería de WordPress»

Bruno Ramos
16 de enero del 2015
Muy bueno el plugin! Lo estamos probando en http://imagenesgratis.eu y es perfecto para simplificar las tareas de publicación. ¡Gracias!
Responder
1. David Aguilera
  16 de enero del 2015
  ¡Gracias a vosotros, Bruno! Siempre es un placer ver que nuestros plugins resultan útiles a la comunidad. Por cierto, no olvidéis puntuar y dejar vuestra opinión en el repo. oficial de plugins de WordPress 😉
  Responder
ShowMeTheViral.com
29 de enero del 2015
Buenas,
Lo he instalado pero lo he tenido que desistalar porque me sacaba la imagen completamente amorfa. Es decir, le subía una foto de 330 px de alto por 600px de ancho y me la saca de 600px de ancho pero muy vertical, tambien unos 600px de altura… si pudieráis poner un menu de configuración del plugin en el admin, estaría genial. Para así ponerl el thumbnail que yo quiero, no el que le de la gana al plugin jeje.
Gracias. Saludos
http://www.showmetheviral.com – Los contenidos más virales de Internet!
Responder
1. David Aguilera
  29 de enero del 2015
  ¡Hola! Por desgracia, dependemos de las medidas que define el tema para las imágenes destacadas. Así, el tamaño de una imagen destacada suele depender de los CSS de tu tema y de los tamaños de thumbnail que haya definido. En cualquier caso, si pudieras activar el plugin en tu web y ponernos un ejemplo donde la imagen no se vea bien, entonces podría echarle una ojeada y pensar en alguna solución (asumiendo que hubiera alguna).
  Responder
ShowMeTheViral.com
31 de enero del 2015
Buenas David,
Ok, lo tengo en cuenta 😉
En cuanto pueda te paso una captura de pantalla por email….
Te comento que al final lo acabé desactivando, pero probé otros 2 plugins y tampoco funcionaban como deseaba…
Por lo que al final estoy subiendo las fotos al server y luego pillándolas como imagen destacada. Es decir, que desistí de usar los plugins.
Saludos
http://www.showmetheviral.com – Los contenidos más virales de Internet
Responder
URL como imagen destacada: plugin perfecto de Wordpress
6 de febrero del 2015
[…] plugin para usar la URL como imagen destacada en WordPress lo encontramos en el blog WPrincipiantes.es, una web muy recomendable para aprender trucos sobre WordPress que te permitirá descubrir todo lo […]
Responder
Bruno Ramos
6 de febrero del 2015
Hola de nuevo!, aprovechamos la ocasión para informaros que hemos hablado de este magnífico plugin en nuestra web de formación online gratis 😉
Podéis leer la review aquí > http://formaciononline.eu/usar-url-como-imagen-destacada-en-wordpress/
Un saludo!
Responder
1. David Aguilera
  6 de febrero del 2015
  ¡Gracias por sugerir nuestro plugin, Bruno!
  Responder
Digeo
14 de mayo del 2015
Hola David! muchas gracias por lo que se ve es un plugin muy util!!
Tengo unas dudas, el plugin lo seguiran actualizando? y sera gratuito por siempre?
Saludos!!
Responder
1. David Aguilera
  14 de mayo del 2015
  ¡Hola Digeo!
  Me alegro que te guste el plugin 🙂 Sí seguiremos actualizando el plugin (de hecho, ya tenemos algunas mejoras en mente, que implementaremos tan pronto como tengamos un poco de tiempo). En cuanto a que sea gratis o no, imagino que sí lo seguirá siendo (no veo porqué cambiarlo).
  Por cierto, ¡no olvides puntuar el plugin en el repo de WordPress!
  ¡Un saludo!
  Responder
Digeo
15 de mayo del 2015
Gracias David!! Ya lo estoy usando y esta super bien!!
Que bueno que si lo seguiran actualizando, esta muy bien el plugin ya que no existia alguno que solucionara ese problema!
Solo tengo una duda, se puede cambiar el tamaño en que se muestra la imagen?
Saludos!!
Responder
1. David Aguilera
  18 de mayo del 2015
  ¡Genial! En principio, no puedes cambiar el tamaño en el que se muestra la imagen. No olvides que una imagen destacada puede aparecer en muchas partes diferentes de un WordPress (la página de Blog con las últimas entradas, un widget que contenga entradas, la página con la propia entrada), con lo cual no acaba de tener sentido el definir un tamaño, ¿no?
  Responder
Dani
24 de noviembre del 2015
En mi web no funciona y no se ve en ningún sitio la imagen.
Responder
1. David Aguilera
  24 de noviembre del 2015
  Hola, Dani.
  ¡Vaya! Es una lástima que no te funcione. El problema suele deberse a cuestiones de CSS o a cómo está implementado el tema. Si es lo segundo, estamos delante de una situación bastante más complicada de solucionar; WordPress ofrece a los desarrolladores múltiples formas de dibujar una imagen destacada en tu web y sólo una de ellas permite que un plugin modifique el resultado final. En función de cómo esté implementado el tema que utilices, Nelio External Featured Images podrá (o no) insertar una imagen externa como imagen destacada.
  ¿Podrías compartir un par de enlaces a tu blog? En particular me interesa ver una entrada que use una imagen externa y otra que use una imagen de la librería multimedia. Con un poco de suerte, el problema con tu web es cuestión de las hojas de estilo y se puede solucionar fácilmente…
  ¡Un saludo!
  David
  Responder
  1. christopher
    19 de marzo del 2016
    tengo el mismo problema, mi web es http://www.somoschiloe.cl trabajo bastante con feed pero manualmente pongo las url de las imagenes y no pasa nada..
    saludos
    Responder
    1. David Aguilera
      21 de marzo del 2016
      Hola, Christopher.
      Veo que en tu blog usas el tema Newspaper. Por defecto, nuestro plugin no es compatible con este tema, puesto que para mostrar las imágenes destacadas no utiliza ninguna de las funciones en las que nuestro plugin se puede enganchar…
      En cualquier caso, es relativamente sencillo modificar Newspaper para poder ver las imágenes destacadas. En concreto, bastara con que abras el fichero includes/wp_booster/td_module_single_base.php y vayas hacia la línea 115. Allí verás lo siguiente:
      if ( get_post_format( $this->post->ID ) == 'video' ) { //if it's a video post... $td_post_video = … … if ( ! empty( … ) ) { return td_video_support::render_video… } } else { //if it's a normal post, show the default thumb … }
      Si te fijas, este gran bloque de código lo que hace es separar las entradas que son vídeo de las normales y, para las normales, acaba pintando la imagen destacada (los puntos suspensivos del else). Lo único que deberás hacer es añadir este pequeño fragmento else if justo antes del else:
      } else if ( function_exists( 'uses_nelioefi' ) && uses_nelioefi( $this->post->ID ) ) { $img = nelioefi_get_thumbnail_src( $this->post->ID ); return '<img width="100%" class="entry-thumb" src="' . esc_attr( $img ) . '" />';
      Siendo el resultado final este:
      if ( get_post_format( $this->post->ID ) == 'video' ) { //if it's a video post... $td_post_video = … … if ( ! empty( … ) ) { return td_video_support::render_video… } } else if ( function_exists( 'uses_nelioefi' ) && uses_nelioefi( $this->post->ID ) ) { $img = nelioefi_get_thumbnail_src( $this->post->ID ); return '<img width="100%" class="entry-thumb" src="' . esc_attr( $img ) . '" />'; } else { //if it's a normal post, show the default thumb … }
      ¡Espero que te ayude!
      Un saludo,
      David
      Responder
edwin
24 de noviembre del 2015
Como puedo llamar al plugin dentro del php, ya q publico autopost y quiero q tengan imagenes destacadas
Responder
1. David Aguilera
  25 de noviembre del 2015
  Lo único que tienes que hacer es poner un atributo personalizado a la entrada que estés creando con autopost. El atributo tiene que llamarse _nelioefi_url y su valor tiene que ser la URL de la imagen destacada. Una vez hayas hecho eso, el plugin se encargará automáticamente de mostrar la imagen (asumiendo, claro, que el tema que tengas instalado utilice la función (get_)the_post_thumbnail, puesto que es una limitación que nos «impone» la arquitectura de WordPress).
  ¡Un saludo!
  David
  Responder
Bartolomé Moreno Martos
16 de febrero del 2016
A mí tampoco me funciona. Efectivamente si hago una entrada me inserta la imagen, pero luego, en la página principal, donde hay mosaicos de entradas o o listas de posts no se visualiza la imagen de ese post en concreto, sí de las que se insertan de la biblioteca. Uso el tema Goliath
Responder
1. David Aguilera
  16 de febrero del 2016
  Hola, Bartolomé.
  Como ya he comentado anteriormente, nuestro plugin únicamente funciona si tu tema utiliza la función the_post_thumbnail (o get_the_post_thumbnail), puesto que es la única función pensada para pintar una imagen destacada que tiene algún filtro que podamos usar para modificar esa imagen. Si tu tema usa otra cosa (lo más probable, una combinación de las funciones get_post_thumbnail_id y wp_get_attachment_image_src), deberás modificar la plantilla donde se usen esas funciones.
  Una solución genérica que compartí recientemente en los foros de soporte del plugin es la siguiente. Asumiendo que tu tema hace algo así:
  <?php $image_id = get_post_thumbnail_id( get_the_ID() ); $image_thumb = wp_get_attachment_image_src( get_the_ID(), 'full', true ); ?> <img src="<?php echo $image_thumb[0]; ?>" ... />
  tienes que cambiarlo para que incluya nuestro código:
  <?php $image_id = get_post_thumbnail_id( get_the_ID() ); $image_thumb = wp_get_attachment_image_src( get_the_ID(), 'full', true ); // Fragmento nuevo: if ( function_exists( 'uses_nelioefi' ) && uses_nelioefi( get_the_ID() ) { $image_thumb = array( nelioefi_get_thumbnail_src( get_the_ID() ) ); }//end if ?> <img src="<?php echo $image_thumb[0]; ?>" ... />
  Soy consciente de que no es la mejor solución (no me gusta tener que pedir a los usuarios que modifiquen su tema), pero me temo que, de momento, es la única opción disponible.
  ¡Dinos qué tal te va!
  Un saludo,
  David
  Responder
Sergi
11 de abril del 2016
Felicidades por el plugin !
Todo perfecto
Responder
1. David Aguilera
  11 de abril del 2016
  Muchas gracias, Sergi 🙂
  Responder
Donaciano Bueno Diez
21 de abril del 2016
Hola, podríais indicarme como colocar una imagen distinta en tamaño de la destacada y la de la página?
De antemano, muchas gracias.
Responder
1. David Aguilera
  22 de abril del 2016
  Buenos días, Donaciano.
  Si quieres modificar el tamaño de una imagen destacada añadida con nuestro plugin, deberás usar reglas CSS. Por ejemplo:
  .home .nelioefi { width: 320px; height: 240px; }
  para modificar el tamaño de todas las imágenes externas en la página principal.
  Si las imágenes que quieres modificar son de la Biblioteca de Medios, me temo que no es posible «hacerlo bien»; el tema es el que se encarga de seleccionar qué miniatura usar. No obstante, nada te impide hacer el escalado de la imagen a través de estilos CSS… pero te arriesgas a «romper» la relación de aspecto de la imagen (y que, por lo tanto, se vea más alta o gordita de lo que es).
  Un saludo,
  David
  Responder
Isa Araujo
28 de mayo del 2016
A imagem o meu ficou 900X900px, mas gostaria que ficasse o tamanho real 900x400px. Tem como?
Responder
1. David Aguilera
  30 de mayo del 2016
  Hola Isa,
  Para conseguir el tamaño que deseas, tienes que usar reglas CSS tales como:
  .nelioefi { max-height: 400px }
  Por desgracia, el tamaño de la imagen destacada nunca será (usando nuestro plugin) el tamaño original de la imagen. Esto es así debido al funcionamiento interno de WordPress. Cuando subes una imagen a la biblioteca de medios, WordPress genera una o más miniaturas de ésta (según el tema que tengas activado). Si, a continuación, usas esa imagen en alguna entrada, tu tema puede decidir usar la imagen a tamaño completo o alguna de las miniaturas. Así pues, es imposible saber de antemano qué medidas de imagen va a usar el tema en cada momento, y nos vemos obligados a trabajar con estilos CSS.
  ¡Un saludo y gracias por leernos!
  Responder
Manuel
7 de junio del 2016
Hola David! Estoy probando vuestro plugin pero el problema que me da es que me sale la imagen en chiquitito…. 🙁
Utilizo Genesis, quizás tiene algo que ver…
Podrías ayudarme un poquitet?, me interesa mucho ese plugin…
Un saludo!
Responder
1. David Aguilera
  7 de junio del 2016
  ¡Hola Manuel!
  Si la imagen aparece, pero esta es muy pequeña, entonces el problema está en los CSS. Ya lo he comentado (creo) anteriormente, pero lo repito por si acaso. Cuando subes una imagen a la Biblioteca de Medios de WordPress, éste creará múltiples miniaturas de la imagen, escalándola y cortándola según le indique el tema activo. Luego, cuando el tema tiene que mostrar una imagen (por ejemplo, la imagen destacada de una entrada), le pedirá a WordPress cosas como «dame la imagen a tamaño real» o «dame la miniatura de 50x50px», en función de dónde vaya a usar esa imagen.
  Sabiendo esto, ¿cómo funcionan las imágenes externas de nuestro plugin? Para empezar, tiene que quedarnos claro que no podemos crear miniaturas, con lo que siempre estaremos trabajando con la imagen a tamaño completo. Para poder simular este comportamiento de «escalar» y «recortar» que hace WordPress, lo que hacemos es meter la imagen destacada como background de una imagen GIF transparente. Así, cuando este GIF escala, la imagen se recorta y escala gracias a las reglas CSS que aplicamos.
  Ahora, volviendo a tu pregunta original, si tu imagen se ve pequeña, tendrás que «forzar» el tamaño de la imagen con reglas CSS. Puedes probar cosas como lo siguiente:
  img.nelioefi { min-width: 640px; min-height: 480px; }
  Obviamente, puede pasar que esta regla no te sirva siempre y te veas obligado a usar reglas más específicas. Es decir, un cierto tamaño para single, otra para home, otra para un div que contiene entradas relacionadas… y a eso quizás tengas que sumarle, además, algunas @media queries si tu tema es responsive. En fin, un montón de trabajo que, por desgracia, no podemos automatizar ni hacer por ti 🙁
  En fin, espero que esto te ayude. ¡Ya nos dirás qué tal el resultado!
  Un saludo,
  David
  Responder
Manuel
7 de junio del 2016
Buff, me ha funcionado pero a mitad, le he aplicado la siguiente regla:
img.nelioefi {
min-width: 100%!important;
}
Pero lo que hace es escalarme la de 150×150 🙁
Voy a ver si puedo cambiar el formato básico en vuestro plugin, me dices por donde empezar? 🙂
Moltes gracies!
Responder
1. David Aguilera
  8 de junio del 2016
  Hola Manuel,
  Ese es el tema que te comentaba: la regla CSS va a modificar* todas las etiquetas img con la clase nelioefi. Necesitas, pues, encontrar reglas lo más específicas posibles, mirando el código HTML y viendo bajo qué etiquetas están, para poder definir reglas tal que así:
  .home .content-area .site-main .entry-header img.nelioefi { /* Reglas aquí */ }
  Es un proceso lento… pero me temo que no hay otra solución. Tampoco creo que puedas hacer nada desde PHP. De todas formas, si te interesa echarle un vistazo, en includes/nelio-efi-main.php:
  nelioefi_get_thumbnail_src: recupera la URL de la imagen externa.
  nelioefi_get_html_thumbnail: es la función que hace la «magia», sustituyendo la etiqueta div que genera WordPress por una con la imagen externa.
  Un saludo,
  David
  * Suponiendo que no haya otra regla aún más específica o posterior que la sobrescriba.
  Responder
Miguel
30 de septiembre del 2016
Hola que tal mi pana, acabo de utilizar tu plugin y no me funciono como imagen destaca, al agregar una imagen desde una url no me aparece en la entrada principal, de todas formas te dejo mi web para que la veas
http://artealado.com
Saludos y de ante mano muchas gracias, espero tu respuesta. 🙂
Responder
1. David Aguilera
  3 de octubre del 2016
  Hola Miguel,
  Como explico en la propia documentación del plugin (la poca que se puede poner en WordPress.org), Nelio External Featured Images sólo funciona si el tema utiliza la función (get_)the_post_thumbnail para insertar la imagen destacada. Deberías mirar el código fuente de tu tema y ver cómo se añaden las imágenes destacadas; con un poco de suerte, quizás esté encapsulado en una función propia del tema que puedas manipular.
  Un saludo,
  David
  Responder
Alberto
28 de octubre del 2016
Antes de nada gracias por este plugin.
Quería preguntaros si existe alguna forma de que la versión AMP detecte esa imagen.
Responder
1. David Aguilera
  31 de octubre del 2016
  ¡Hola!
  Habría que saber qué plugin usas para AMP y ver cómo ese plugin «monta» la versión AMP; supongo que arreglarlo sería fácil, pero sin un poco más de información es complicado.
  Un saludo,
  David
  Responder
Jose Bustamante
19 de noviembre del 2016
Hola me gustaria que me ayudes porque he hecho lo que a publicado arriba y no me a servido.
Espero me pueda ayudarme.
Responder
1. David Aguilera
  21 de noviembre del 2016
  Hola Jose,
  Prueba a descargarte nuestro nuevo plugin Nelio Content. La versión 1.1.1 incluye la posibilidad de usar imágenes externas como imagen destacada, de forma parecida a lo que hacía Nelio External Featured Image, pero con una implementación mejorada. Es posible que éste sí te funcione. ¡Ya me dirás qué tal!
  Un saludo,
  David
  Responder
Saul
24 de enero del 2017
Hola, necesito una alternativa ya que el servicio de host es muy limitado y no me es posible subir mas imagenes y agregarlas como imagen destacada.
utilizo el theme http://www.fabthemes.com/Kent/ Instale el plugin y no me funciono, al añadir la URL si carga pero al publicar el post o entrada, se publica sin imagen destacada «miniatura» abre hecho algo mal?
gracias.
Responder
1. David Aguilera
  25 de enero del 2017
  Hola Saul,
  Recientemente hemos fusionado este plugin con Nelio Content. ¿Has intentado usar Nelio Content? La forma que tiene de añadir imágenes destacadas es ligeramente diferente, y dispone de algunos ajustes para «adaptarse» a tu tema (aunque no siempre es posible).
  ¡Pruébalo y nos dices!
  Un saludo,
  David
  Responder
Javier
27 de junio del 2017
Muy practico y bueno para ahorrar espacio además permite agregar atributos alt también , el único inconveniente que tengo es que cuando uso elementos de visual composer para mostrar entradas, me recorta las imágenes , en cambio si la imagen la subo a la biblioteca , esta se acopla sin ningún problema.
Responder
1. David Aguilera
  28 de junio del 2017
  Gracias por comentar, Javier. Lo de los tamaños de imagen no debería sorprenderte; cuando subes una imagen a la biblioteca multimedia, WordPress genera múltiples miniaturas, escalando y recortando, cosa que no se puede hacer con imágenes externas.
  Responder
Cesar.
6 de agosto del 2020
Hola, utilizo el plugin en la version 1.4.5, me funcion bien pero desde mayo tuve un gran bajon en mi visitas en mi web y estoy analizando el contenido de mi web y me gustaria modicar el plugin para que no muestre las imagenes del index con miniaturas con una ruta «data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7» que se puede modificar para que se muestre la ruta verdadera de la imagen.
Muchas gracias.
Responder
1. David Aguilera
  7 de agosto del 2020
  Por desgracia, las imágenes destacadas en WordPress deben estar en tu biblioteca de medios. La imagen que aparece en una entrada es algo que se genera dinámicamente por tu tema, así que no es posible hacer ninguna sustitución en base de datos ni nada por el estilo.
  Responder
Josep
6 de noviembre del 2020
Hola David
Antes de nada, gracias por vuestro plugin, y ayuda.
Te comento instalo y coloco un enlace de la imagen de mi librería, como imagen destacada externa. Y cuando voy al ver la web, el portfolio aparece en blanco. No se ve nada y sin embarco en el panel de trabajo cuando estoy haciendola si. Uso Workality theme
Gracias!
Josep
Responder
1. David Aguilera
  9 de noviembre del 2020
  Hola, Josep. Por desgracia, nuestro plugin no es compatible con todos los temas (ni puede serlo, en general). El problema es que los programadores de temas dan por sentado que las imágenes destacadas estarán subidas a la biblioteca de medios y, partiendo de esa premisa, hay algunos programadores que usan funciones alternativas para obtener la imagen destacada y meterla en la web. El problema de esas funciones alternativas es que no pueden extenderse a través de un plugin y, por lo tanto, nuestro plugin no puede meterse en medio y darle al tema la URL de la imagen externa. Una pena, pero es lo que hay.
  Responder