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

Publicada en WordPress.

Mira nuestro vídeo

Existe una versión mejor de tu web

Comparte este artículo

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…

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 comentarios en «Establecer como imagen destacada una imagen que no esté en la librería de WordPress»

  1. 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!

    1. ¡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).

  2. 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

  3. 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!!

    1. ¡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!

  4. 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!!

    1. ¡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?

  5. En mi web no funciona y no se ve en ningún sitio la imagen.

    1. 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

        1. 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

  6. Como puedo llamar al plugin dentro del php, ya q publico autopost y quiero q tengan imagenes destacadas

    1. 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

  7. 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

    1. 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

    1. 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

  8. A imagem o meu ficou 900X900px, mas gostaria que ficasse o tamanho real 900x400px. Tem como?

    1. 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!

  9. 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!

    1. ¡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

  10. 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!

    1. 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.

  11. 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. 🙂

    1. 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

  12. Antes de nada gracias por este plugin.
    Quería preguntaros si existe alguna forma de que la versión AMP detecte esa imagen.

    1. ¡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

    1. 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

  13. 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.

    1. 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

  14. 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.

    1. 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.

  15. 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.

    1. 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.

  16. 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

    1. 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.

Deja una respuesta

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.

'),document.contains||document.write(''),window.DOMRect||document.write(''),window.URL&&window.URL.prototype&&window.URLSearchParams||document.write(''),window.FormData&&window.FormData.prototype.keys||document.write(''),Element.prototype.matches&&Element.prototype.closest||document.write('')