Tarjetas Flip Destacadas

Una modificación del componente de tema Featured Tiles. Muestra temas destacados en una fila de tarjetas giratorias:

Dado que las tarjetas no deberían ser demasiado grandes ni demasiado pequeñas, el componente utiliza puntos de interrupción para diferentes dimensiones de ventana. Básicamente, muestra dos tarjetas en móviles, cuatro en tabletas y cinco o seis en escritorio. Deberías destacar al menos seis temas.

En cualquier caso, es más divertido si tienes más y utilizas la función de aleatorizar:

Screenshot from 2021-06-18 21-06-49

De esta manera, siempre obtendrás una nueva distribución de tarjetas :black_joker:

\u003c!-- add the preview and repository links –\u003e

22 Me gusta

¡Se ve genial! Solo para informarte, esto ocurre en Safari:

¿Hay alguna posibilidad de incluir una opción de recorte cuadrado? No queda muy bien con diferentes relaciones de aspecto, o quizás podrías añadir una versión desenfocada de la imagen detrás, similar a lo que hacen las miniaturas de temas. Solo lanzando ideas por ahí :+1:

2 Me gusta

Sí, aún no está configurado de manera tan flexible. Por eso es genial recibir comentarios sobre posibles casos de uso, ¡gracias! Voy a experimentar un poco con un aspecto más pulido para las fotos para ver cómo ajustar mejor los estilos.

En cuanto a más opciones, he añadido ajustes configurables para la relación de aspecto de las tarjetas y cómo deben redimensionarse las miniaturas:

4 Me gusta

¿Hay alguna posibilidad de aumentar el número de temas destacados en móviles y permitir el desplazamiento horizontal? Eso sería genial.

Tengo un problema: la tarjeta giratoria no se muestra en el móvil.

Safari

Chrome

Mi sitio web:

1 me gusta

No puedo reproducirlo en mi sitio, pero veo que tienes varios componentes instalados para mostrarlos encima del área de la lista y, excepto “quién está conectado”, ninguno de ellos se muestra. ¿Quizás podrías revisar eso?

1 me gusta

Creo que de alguna manera es un problema con Safari, ya que desde que se instaló esto, los únicos miembros que tienen problemas en nuestro foro son los que usan Safari, que parece que @Bank_Live también utiliza.

El sitio de @Bank_Live tampoco muestra el componente en Chrome. No creo que ese problema esté relacionado con el componente; al menos, no puedo reproducirlo.

Sin embargo, sí hay algunos problemas de CSS con Safari y puedo revisarlos en una semana. Por ahora no tengo un Mac a mano y no puedo reproducirlo en WebKit en Linux.

2 Me gusta

¿Hay alguna novedad sobre el problema de Safari?

El componente utiliza la propiedad aspect-ratio. Pensé que era compatible con Safari, pero parece que solo lo será a partir de la próxima versión (15).

Para que funcione por ahora, he añadido una solución rápida en la configuración. Tendrás que añadir un porcentaje calculado y luego la relación de aspecto se simulará con un truco de CSS:

3 Me gusta

¡Gracias! Funciona de maravilla en nuestra comunidad
Season 2 Dancing GIF by The Fresh Prince of Bel-Air

2 Me gusta

Solicitud de Funcionalidad.

¿Podemos tener una opción para que esto se muestre en una página de categoría específica?

es decir, si se ven las tarjetas destacadas de Lounge, se muestran aquí.

la imagen que se muestra es la Imagen de Categoría. Estoy usando el tema Air. Aplicación para mostrar temas destacados relacionados con esa categoría de su subcategoría Frontier news.

¿cuál es el tamaño de imagen recomendado para la imagen de la tarjeta?

Esta es mi idea sobre una aplicación para mostrar temas destacados encima de una categoría específica de interés.

Estoy usando el tema Air. Necesitará tener una opción de configuración para estar debajo del logo de la categoría. Y si es posible, tener la opción de mostrar en múltiples categorías seleccionadas.

Es decir, tengo una Categoría principal con un par de subcategorías que me gustaría mostrar la subcategoría de Noticias.