Esta sugerencia rápida explica cómo agregar una columna personalizada en las pantallas de administración de su blog de WordPress.
Recientemente, me encontré necesitando comenzar a usar imágenes destacadas en lugar de timthumb.php por primera vez. Todo fue genial, excepto que lo encontré realmente molesto porque no pude especificar exactamente qué tamaño debe tener una imagen (recorte).
Después de mirar a mi alrededor por un tiempo, descubrí que la solución de la mayoría de las personas era usar un complemento que terminaba teniendo una cantidad excesiva de código..
Además, quería poder servir un diseño sensible utilizando la clase de sistema de cuadrícula Skeleton de "escala con rejilla"- la razón original para usar imágenes destacadas que no requieren un atributo de ancho y alto de extremo frontal.
Aquí está la solución que se me ocurrió dadas las necesidades del proyecto.
Paso 1 Aplica una clase arbitraria a tus imágenes de publicaciones destacadas
Necesitamos poder tener control sobre la imagen usando nuestra hoja de estilos, por lo que necesitamos aplicar una clase que solo afecte a la imagen en sí. Elegí simplemente envolver mi imagen en una figura/div llamado 'titular'. Eso era además de un tamaño personalizado de miniatura de publicación que ya había establecido en el funciones.php archivo llamado 'enorme'- este tamaño de miniatura tenía un ancho máximo de 940, mientras que la altura era de 900.
Eso está bien suponiendo que quieres una imagen con una altura de 900 px, pero seamos realistas: probablemente no lo hagas porque se ve así:
Aquí está el código que escribí para la plantilla:
Y después de agregar ese código, obtenemos el siguiente resultado, que es mucho más manejable:
Por que funciona
Esto funciona porque solo establecemos una altura máxima y no una anchura máxima. WordPress utiliza por defecto el ancho máximo que configuramos a través de nuestra función:
add_action ('init', 'my_register_image_sizes'); function my_register_image_sizes () add_image_size ('huge', 940,900, true);
Técnicamente, la imagen sigue siendo todo lo que hay en su tamaño completo, pero hicimos que el navegador ocultara cualquier cosa a una altura superior a 400px utilizando desbordamiento: oculto atributo.
Funciona!
Solo un problema aunque ...
Si bien se ve bien, en realidad estamos hackeando violentamente nuestro navegador aquí. Recuerde que la imagen solo se ve como si hubiera cambiado de tamaño, como ya hemos dicho, la imagen todavía está allí en su totalidad.
Eso significa que, a pesar de que se ve muy bien hasta el móvil, en realidad está ocupando bastante espacio..
¿Alguien tiene una solución mejor? Deja tus ideas en los comentarios a continuación.!
Share
Accentsconagua
