(1) Módulos requeridos (Versión: Drupal7.0)
Views
Views Slideshow
Chaos tool suite
Libraries
Link Field
Token
(2) Instalar los módulos
En Drupal7 puede instalar módulos desde la sección de administración, pero todavía siento que esta nueva característica no tiene ningún significado, porque tenemos que buscar el enlace del módulo en el sitio Druapl y luego copiar y pegar en el área de instalación del módulo de administración, realmente loco. Hubiera sido tan bueno si hubieran hecho algo así como WordPress, una pequeña fiesta de búsqueda. De todos modos, solo voy a descargarlo e instalarlo a la antigua usanza (todavía recomiendo esta antigua forma).
Descargue todos los módulos del sitio de Drupal e instálelos en el directorio youritename / sites / all / modules. Vaya a http://www.yoursitename.com/node#overlay=admin/modules y habilite estos módulos como se muestra a continuación;
(1) Vistas (2) Vistas UI (3) Vistas Presentación de diapositivas (4) Vistas Presentación de diapositivas: Ciclo (5) Herramientas de caos (6) Enlace (7) Bibliotecas (8) Token (Opcional) (3) Crear caché de imágenes
En Drupal7, imagecache es parte del módulo central y se denomina Estilos de imagen. Entonces, creemos dos caché de imágenes desde aquí, una para la imagen del control deslizante de tamaño completo y otra para la imagen en miniatura. En este tutorial, uso la dimensión 935x293 (píxeles) para la imagen deslizante de tamaño completo y la dimensión 210x100 (píxeles) para la imagen en miniatura. Nota: Estas configuraciones pueden ser rechazadas dependiendo de sus necesidades.
- Configuración de imagen del control deslizante de tamaño completo
Vaya a http://www.yoursitename.com/node#overlay=admin/config/media/image-styles y haga clic en el enlace Agregar nuevo estilo (1) Dé un nombre de estilo de imagen y haga clic en el botón Crear nuevo estilo (2) ) En la siguiente pantalla de configuración, seleccione el nuevo estilo que desee y luego haga clic en el botón Agregar (en este tutorial elijo cambiar el tamaño del estilo) (3) En la siguiente pantalla, configure el ancho y la altura y haga clic en el botón Agregar efecto. (La configuración puede variar según el estilo que elija). Configuré el ancho como 935 y la altura como 293 píxeles.
Haga este mismo proceso para la imagen en miniatura también. (para la dimensión de la imagen en miniatura, configuré el ancho como 210 y la altura como 100 píxeles). (4) Crear nuevo tipo de contenido
Creemos un nuevo tipo de contenido. Desde la barra de menú del tablero, haga clic en Estructura y luego en tipos de contenido y luego haga clic en el enlace Agregar nuevo tipo de contenido.
(1) Dé un nombre legible para humanos, lo nombré como Control deslizante destacado (el nombre de la máquina se generará automáticamente en función del nombre legible para humanos) (2) Dé una descripción breve y relevante (3) Configuración del formulario de envío, lo dejo como el configuración predeterminada (4) Opciones de publicación, verifiqué solo publicado (todas las demás configuraciones sin marcar) (5) Configuración de pantalla, he desmarcado la información de hora y fecha. (6) Configuración de comentarios, configuro oculto (deshabilitado) (7) Configuración de menú, dejo como configuración predeterminada. (8) Haga clic en el botón Guardar y agregar campos (5) Crear nuevos campos
Aquí, en este ejemplo, creo solo dos fileds, y son campo de imagen y campo de enlace. Utilizaremos el campo de imagen para cargar nuestra imagen del control deslizante y el campo de enlace para crear un enlace personalizado donde queremos que se enlace nuestro control deslizante.
Configuraciones de campo de imagen
(1) Label: Slider Image
(2) Field: slider_image
(3) Field type: image
(4) Widget (form element): image
(5) Click Save button, and on the field settings page leave default settings and click on Save field settings button.
(6) On the image field configuration settings page you can configure as you wish.
Establecí este campo según sea necesario, agregué un nombre de director de archivo llamado slider-image para que estas imágenes se organicen de manera específica a partir de otras imágenes. Puede establecer el tamaño y la resolución máximos de carga aquí, he habilitado el campo alt y title y finalmente hago clic en el botón Guardar configuración.
Al usar el mismo método, cree el campo de enlace también.
Configuración de campo de enlace (1) Etiqueta: Control deslizante Enlace (2) Campo: control deslizante (3) Tipo de campo: enlace (4) Widget (elemento de formulario): enlace (5) Haga clic en el botón Guardar, para las configuraciones de campo de enlace deje todo a la configuración predeterminada . He reorganizado el campo como se muestra a continuación; Campo de título Campo de imagen Campo de enlace Campo de cuerpo (incluso puede eliminar este campo si no es necesario) Administrar pantalla En la pestaña administrar pantalla puede configurar cómo se despliega la salida del campo. Establecí el campo de enlace como oculto y también configuré la etiqueta de la imagen como oculta Drupal7: administrar campos (6) Crear contenido del control deslizante de funciones
He creado cuatro contenidos deslizantes destacados para este tutorial.
(1) Haga clic en el enlace para agregar contenido (2) Crear contenido de control deslizante destacado (3) Proporcione un nombre de título adecuado (4) Cargue la imagen del control deslizante (5) Proporcione nombres de campo alternativo y de título (6) Proporcione un título de enlace y una URL donde desee el control deslizante que se va a vincular (7) Deje todas las configuraciones predeterminadas, excepto el campo de ruta si desea puede dar un alias de URL amigable para SEO. (8) Guarde el contenido.
De la misma manera, cree más contenido del Control deslizante destacado (he creado cuatro contenidos) (7) Crear una nueva vista
Ahora es el momento de crear nuestra nueva vista de Presentación de diapositivas. Desde el menú Panel, haga clic en Estructura y luego en Vistas.
(1) Haga clic en el enlace Agregar nueva vista (2) Proporcione el nombre de la vista, lo he nombrado como Control deslizante destacado (el nombre de la máquina se generará automáticamente) (3) Proporcione una descripción de vista adecuada (4) Elija Mostrar contenido del tipo Control deslizante destacado (su contenido escribe un nombre). (5) Desmarque Crear una página y marque Crear un bloque (6) Escriba el título del bloque y elija el formato de visualización como "Presentación" de elementos de "campos" por página 5 (puede ingresar el número de elementos que desea mostrar) (7 ) Haga clic en el botón "Continuar y editar" Vistas Configuración del campo Primero agreguemos el campo de enlace (el enlace debe ser el primer campo para que todo funcione correctamente), así que haga clic en el icono Agregar y desde el filtro Grupos seleccione Contenido Agregar contenido: Enlace, haga clic "Botón Agregar y configurar" en la siguiente ventana de configuración desmarque "Crear una etiqueta". "Cheque" Excluir de la pantalla. Haga clic en el botón "Aplicar"
A continuación, agreguemos el campo de imagen, así que haga clic en el ícono de agregar y desde el filtro Grupos seleccione contenido Agregar contenido: campo de imagen (Nota: asegúrese de elegir el campo de imagen que creamos solo para este tipo de contenido del control deslizante). Haga clic en "Agregar y configurar botón "en la siguiente ventana de configuración desmarque" Crear una etiqueta ".
Formateador: Imagen (si ha instalado Colorbox o lightbox, ¡puede elegirlos aquí!) Estilo de imagen: Tamaño completo (Elija el caché de imagen que ha creado en el paso anterior) Vincular imagen a: Nada Configuración de estilo: Dejar la configuración predeterminada Sin comportamiento de resultado: Dejar configuración predeterminada Reescribir resultados: Marque este campo como enlace Enlace de ruta: [view_node] (Nota: Desplácese un poco y podrá ver los patrones de reemplazo creados por el módulo Core Token, (si no configuramos el campo de enlace como primero no puedo ver la opción de campo de enlace aquí) copie solo [view_node] luego desplácese hacia arriba y péguelo en el campo de ruta de enlace.) Haga clic en el botón "Aplicar"
Finalmente, necesitamos un campo más para la miniatura, así que hagamos clic en el ícono de agregar y desde el filtro Grupos seleccione Contenido Agregar contenido: campo de imagen (Nota: asegúrese de elegir el campo de imagen que creamos solo para este tipo de contenido del control deslizante). Haga clic en el botón "Agregar y configurar" en la siguiente ventana de configuración, desmarque "Crear una etiqueta" y MARQUE EXCLUIR DE LA PANTALLA, Formateador: Imagen (¡si ha instalado Colorbox o lightbox, puede elegirlos aquí!) Estilo de imagen: Miniatura (Elija el caché de imágenes que ha creado en el paso anterior) Vincular imagen a: Nada Configuración de estilo: Dejar la configuración predeterminada Sin comportamiento de resultado: Dejar la configuración predeterminada Reescribir resultados: Marcar Enviar este campo como un enlace Ruta de enlace: [view_node] (Nota: Desplácese un poco y puedes ver patrones de reemplazo creados por el módulo Core Token, (si no lo hicimost configure el campo de enlace ya que primero no podemos ver la opción de campo de enlace aquí) copie solo [view_node] luego desplácese hacia arriba y péguelo en el campo de ruta de enlace.) Haga clic en el botón "Aplicar"
Configuración de filtros de vistas
¡En views3 los filtros se crean al principio mientras elegimos el tipo de contenido y otras configuraciones! Si necesita algún archivo adicional, ¡puede crearlo aquí!
Configuración de estilo de vistas
Haga clic en Formato Presentación de diapositivas | settigs y en la siguiente ventana de configuración configurada como a continuación; (1) Tipo de lista: lista desordenada (2) Clase de envoltura: deje la configuración predeterminada (3) Estilo> Máscara: predeterminada (4) Diapositivas> Tipo de presentación de diapositivas: ciclo (5) Opciones de ciclo Debe descargar el complemento de ciclo jQuery y copiar jquery. cycle.all.min.js a sitios / todos / bibliotecas / jquery.cycle Puede encontrar el complemento en http://malsup.com/jquery/cycle .
EN INGLÉS SIMPLE Cree una carpeta llamada "bibliotecas" en el directorio sitio / todos y luego cree otra carpeta llamada "jquery.cycle" en ese directorio y finalmente copie y pegue solo el "jquery.cycle.all.min.js" en este directorio
(6) Tránsito: Desvanecimiento (7) Acción: pausa al pasar el mouse (8) Ajustes de Internet Explorer: predeterminado (9) Widgets: Puede elegir uno o ambos Superior e Inferior (elijo el fondo aquí, y la configuración avanzada como se muestra a continuación;) (10) Widgets inferiores> Localizador> Tipo de localizador: Campos (11) Campo de localizador: Contenido: Imagen (Nota: el último que agregamos para el pulgar, no se confunda ya que ambos campos tendrán el mismo nombre). (12) Activar diapositiva y Pause on Pager Hove: marcado, los controles y el contador deslizante no están marcados. (13) Haga clic en el botón Aplicar.
Formato Mostrar configuración de campo
Inline fields: Choose the thumbnail field as inline.
Click Apply button. (Note: Well it actually doesn't change much in appearance but it does change in the code. Next step use the firebug and find the class and add some styles to display properly.)
(8) Crear una región personalizada (paso opcional)
(1) En su carpeta de temas, abra el archivo your_theme_name.info y agregue una nueva región como la que se muestra a continuación; region [Featured_slider] = Control deslizante destacado y guarde el archivo .info. (2) Abra el archivo page.tpl.php de temas y agregue estos códigos donde desee que se muestre su diapositiva como se muestra a continuación;
Incluso puede crear una plantilla de portada personalizada como page - front.tpl.php para que no necesite realizar ningún cambio en la plantilla predeterminada page.tpl.php. [9] Habilitar y configurar el bloque
Ahora este bloque estará visible en el área de bloques deshabilitados, por lo que desde el menú del Panel de control vaya a Estructura> Bloque y habilite el bloque a una región predeterminada de temas o la región personalizada que creamos (Featured_slider). (Las regiones varían según el tema que esté utilizando).
Configuración de configuración del bloque Después de habilitar el bloque, obtiene un enlace para configurar el bloque, por lo tanto, haga clic en el enlace Configurar y en la sección de configuración establecida como se muestra a continuación;
(1) Título de bloque (si no desea que se muestre el título de blobk, solo escriba) (2) Nuevamente, obtiene todos los ajustes de Región específicos del tema habilitados. En ajustes de visibilidad (3) Páginas> Mostrar bloque en página específica: elija Solo las páginas enumeradas y escriba para que este bloque se muestre solo en la página principal. CONSEJOS CSS PARA VISUALIZAR MINIATURAS EN LÍNEA
Agregue estos códigos CSS a la hoja de estilo de sus temas para mostrar las miniaturas en línea. .views-slideshow-controles-inferior .views-slideshow-pager-field-item {flotante: izquierda; margen: 20px 6px; } Realice los ajustes necesarios.
Eche un vistazo a este podcast de Mustardseed Media: reproducciones de diapositivas .
Durante el podcast, Bob repasa algunos de los conceptos básicos de la presentación de diapositivas de Vistas, así como también el tema de la salida. Se basa en Drupal 6, pero creo que la mayoría de los conceptos básicos y las lecciones serán las mismas. Con solo un poco de CSS, una presentación de diapositivas puede verse mucho mejor. Le recomiendo ver este podcast si desea presentaciones de diapositivas bonitas.
fuente
Si desea saber más sobre las presentaciones de diapositivas (por ejemplo, con miniaturas), debe ver este buen tutorial: http://www.brightwebsitedesign.com/how-to-install-views-slideshow-module-on-drupal7
fuente