Tarjetas de colección de imágenes de la página de inicio con efecto de desplazamiento
Las tarjetas de colección predeterminadas en la página de inicio son alargadas y sencillas, con miniaturas diminutas y principalmente texto. Esta receta le permitirá tener tarjetas basadas en imágenes con un interesante efecto animado al pasar el ratón sobre ellas.
Ver: Ver el código fuente en el sitio de demostración del libro de recetas de CONTENTdm.
Esta personalización está inspirada en el Archivo Virtual de Tennessee (TeVA) y el Repositorio de Medios Digitales de la Universidad Estatal Ball.
Paso 1: Suba los archivos CSS y JS
Para aplicar la nueva receta de tarjeta de colección, debe descargar los archivos CSS y JavaScript del portal de descarga del sitio de demostración (vinculado arriba) y cargarlos en las secciones "CSS Personalizado" y "Scripts Personalizados" de la Herramienta de Configuración de Sitios Web > Ajustes Globales > Personalizado, respectivamente.
Paso 2: Suba imágenes personalizadas
Dado que la imagen utilizada en la receta es mucho más grande que la miniatura predeterminada de la colección, deberá cargar una miniatura personalizada para cada una de sus colecciones a través de la Herramienta de Configuración del Sitio Web > Configuración a nivel de colección > (seleccione SuColección en el menú desplegable) > Tipos de página > Páginas de destino > Preferencias de imagen para esta colección en la página de inicio > Cargue una imagen personalizada.
El tamaño predeterminado de estas tarjetas de imagen es de 300px por 300px. Así que, como regla general, usted querrá subir una imagen que mida al menos 300px por 300px. Una imagen más pequeña se estirará, y una imagen no cuadrada se recortará.
Paso 3 (opcional): Ajuste el resumen de la colección
El resumen de la colección se mostrará en una fuente diferente. Por lo tanto, es posible que deba ajustarlo yendo a: Herramienta de configuración del sitio web > Configuración a nivel de colección > (seleccione SuColección en el menú desplegable) > Tipos de página > Páginas de destino > Resumen de la colección en la página de inicio.
Paso 4 (opcional): Modificar el estilo
Usted puede ajustar fácilmente el tamaño de las tarjetas de imagen cambiando los 300px por otros números en el .css archivo:
.cdm-animated-card { … … width: 300px; height: 300px; … …
También puede descomentar lo siguiente para tener un estilo de borde interesante para las tarjetas:
/*Opcional: añadir borde */ /*borde: 5px sólido #006FA7; radio del borde: 25px;*/
Puede modificar el texto del título de la colección editando los estilos de .cardTitle, y el texto de resumen de la colección editando .cardDescriptionText. y el botón de doble chevrón (>>) editando .cdm-animated-card en el archivo CSS.
Descargo de responsabilidad: esta receta afecta ciertas funciones de accesibilidad de la página principal. Asegúrese de que cumpla con los requisitos de accesibilidad de su institución antes de liberarlo.