Source: https://skatox.com/blog/2016/page/2/
Timestamp: 2017-05-22 17:36:30+00:00

Document:
2016 | Página 2 de 6 | El blog de Skatox El blog de SkatoxCompartiendo mis opiniones informáticas mas allá de los 140 caracteresHoy hace 1 año: Consejos para mejorar tu mercadeo por correo
Imágenes responsive en WordPressEscrito el 20 de Junio de 2016 bajo Desarrollo y Programación, Planetas, Wordpress por Miguel UsecheEscribe el primer comentario
¿Que son las imágenes responsive?Las imágenes reponsive son aquellas imágenes que automáticamente carga la mejor versión para la resolución de tu equipo, esto permite con una misma etiqueta HTML cargar una imagen de alta resolución para una computadora con pantalla HiDPI (Retina Display) y una imagen de baja resolución para un dispositivo móvil con una pantalla de baja calidad. (Si quieres leer mas documentación te recomiendo leer la entrada de <img> en MDN).El código HTML necesario es como cualquier <img> para dar compatibilidad a las páginas existentes, pero adicionalmente se agrega un atributo srcset para poder especificar la imagen correspondiente a cada resolución y también se agrega el atributo sizes para definir las reglas de cuando usar cada imagen.Cómo generar el código en WordPressA partir de WordPress 4.4 ahora podemos contar imágenes responsive de forma automática, usando las funciones de este CMS obtendrás el código HTML para crear imágenes adaptables, pero probablemente si tienes algún código donde generabas las etiquetas de estas imágenes manualmente, necesitaras llamar a varias funcionales para hacerlo.A continuación te explicare cómo es el proceso, el primer paso es obtener los valores de los atributos src y srcset, en este caso pasamos full como tamaño para obtener la imagen en su mayor resolución:$img_src = wp_get_attachment_image_url( $attach_id, 'full' );
$img_srcset = wp_get_attachment_image_srcset( $attach_id, 'full' );Generamos la etiqueta sizes para los tipos de imágenes que queremos mostrar:$wp_sizes = array('full', 'large', 'medium', 'thumbnail');
}Luego podemos generar el HTML de la etiqueta img:$img = sprintf('<img src="%s" srcset="%s" sizes="%s" alt="%s" >',
);Listo, ya tendrás una etiqueta de imagen responsiva donde dependiendo de la resolución del dispositivo, se cambiará la imagen por una de mayor o menor de resolución (dependiendo del dispositivo). Cabe destacar que esta funcionalidad funciona con todo navegador moderno exceptuando…por supuesto…Internet Explorer.FacebookTwitterLinkedInGoogle
Archivos[-] 2017MayoAbrilMarzoFebreroEnero[-] 2016DiciembreNoviembreOctubreAgostoJulioJunioMayoAbrilMarzoFebreroEnero[+] 2015DiciembreNoviembreOctubreSeptiembreAgostoJulioJunioMayoAbrilMarzoFebreroEnero[+] 2014DiciembreNoviembreOctubreSeptiembreAgostoJulioJunioMayoAbrilMarzoFebreroEnero[+] 2013DiciembreNoviembreOctubreSeptiembreAgostoJulioJunioMayoAbrilMarzoFebreroEnero[+] 2012DiciembreNoviembreOctubreSeptiembreAgostoJunioMayoAbrilMarzoFebreroEnero[+] 2011DiciembreNoviembreOctubreSeptiembreAgostoJulioJunioMayoAbrilMarzoFebreroEnero[+] 2010DiciembreNoviembreOctubreSeptiembreAgostoJulioJunioMayoAbrilMarzoFebreroEnero[+] 2009DiciembreNoviembreOctubreSeptiembreAgostoJulioJunioMayoAbrilMarzoFebreroEnero[+] 2008DiciembreNoviembreOctubreSeptiembreAgostoJulioJunioMayoAbrilMarzoFebreroEnero[+] 2007DiciembreNoviembreOctubreSeptiembreAgostoJulioJunioMayoAbrilMarzoFebreroEnero[+] 2006DiciembreNoviembreOctubreSeptiembreAgostoJulioJunioMayoAbrilMarzoFebreroEnero[+] 2005DiciembreNoviembreOctubreSeptiembreJulioMayoEneroCategoríasApple/Mac(18)Desarrollo y Programación(76)[+]Base de datos(7)C++(4)Desarrollo web(46)[+]Wordpress(19)Java(9)Javascript(2)Netbeans(6)Eventos Informáticos(60)Gimp(1)Gnu/Linux(144)[+]Archlinux(17)Google(31)[+]Android(19)Hacking / Seguridad Informática(34)Informática(46)Internet(50)Libros(9)Microsoft/Windows(53)Mozilla / Firefox / Thunderbird(32)[+]Firefox OS(8)Musica Geek(27)Otras cosas(86)[+]Mi Página(32)Rubik(3)Videojuegos(79)[+]Playstation 3 ( PS3 )(29)PSP(3)Artículos recomendadosArtículo sobre la situación de Internet en Venezuela¿Como tener páginas web seguras?¿Por qué usar Cyanogenmod en mi teléfono Android?Mi opinión sobre la ley de videojuegos bélicos en VenezuelaPelículas y documentales recomendados sobre hacking, programación e InternetBlogroll GeekCassianetCodigeekEl Blog de LuisEl rincon geekGespadasPanchosoftRichzendySYSADMITTatica

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución