1 00:00:11,220 --> 00:00:16,660 Bienvenidos a este nuevo tutorial, hoy vamos a aprender a crear una galería de imágenes. 2 00:00:17,460 --> 00:00:24,620 Bueno, pues lo primero que vamos a hacer va a ser bajar a seleccionar el plugin que gestiona nuestras galerías de imágenes. 3 00:00:25,260 --> 00:00:34,740 Se llama Fotogalerie, tenemos que hacer clic en él, y aquí al hacer clic nos muestra las galerías que actualmente ya tenemos creadas en la página web. 4 00:00:35,119 --> 00:00:40,060 De una forma muy sencilla, tan solo tendríamos que dar al botón añadir nueva, aquí. 5 00:00:42,619 --> 00:00:48,509 ponemos el título de la galería 6 00:00:48,509 --> 00:00:51,229 y en principio no vamos a hacer nada más 7 00:00:51,229 --> 00:00:55,369 no vamos a previsualizar ninguna imagen ni nada sino que vamos a 8 00:00:55,369 --> 00:00:57,570 seleccionar las imágenes 9 00:00:57,570 --> 00:00:58,469 bueno pues 10 00:00:58,469 --> 00:01:03,530 vamos a dar aquí al botón añadir imágenes 11 00:01:03,530 --> 00:01:05,810 y se nos abre esta ventana 12 00:01:05,810 --> 00:01:08,209 que es un explorador de 13 00:01:08,209 --> 00:01:11,489 del plugin este de fotografía 14 00:01:11,489 --> 00:01:15,150 son unas carpetas que se crean directamente 15 00:01:15,150 --> 00:01:16,790 en este plugin 16 00:01:16,790 --> 00:01:21,769 y esto se utiliza para no mezclar con el editor de medios que es donde tenemos 17 00:01:21,769 --> 00:01:26,049 todas las fotografías de la página web, los iconos, 18 00:01:26,049 --> 00:01:29,030 las imágenes de las entradas o noticias 19 00:01:29,030 --> 00:01:32,730 entonces aquí las tenemos un poquito apartadas y no se nos mezclan 20 00:01:32,730 --> 00:01:38,829 entonces lo que podemos hacer muy rápidamente sería crear primero una 21 00:01:38,829 --> 00:01:44,109 carpeta donde vamos a subir las fotografías que queremos poner en la galería bueno pues 22 00:01:44,109 --> 00:01:57,530 para crear una carpeta vamos aquí a este icono damos un título y aceptamos aquí tenemos la 23 00:01:57,530 --> 00:02:02,409 carpeta que se nos ha creado ahora lo que tenemos que hacer sería meternos dentro de esta carpeta 24 00:02:02,409 --> 00:02:11,110 con doble clic ya estamos dentro de la carpeta que ahora mismo está vacía bueno pues aquí le 25 00:02:11,110 --> 00:02:20,150 damos al botón subir archivos. Podemos arrastrar las imágenes que queremos subir. Bueno, voy 26 00:02:20,150 --> 00:02:42,620 a subir algunas imágenes desde mi explorador, seleccionamos todas estas imágenes que hay 27 00:02:42,620 --> 00:02:56,330 en esta carpeta y arrastramos aquí. Aquí se están subiendo todas las imágenes y aquí 28 00:02:56,330 --> 00:03:01,969 aparecen las que ya se han ido subiendo. Las procesa durante unos segundos para reducir 29 00:03:01,969 --> 00:03:11,449 un poquito su tamaño sin perder calidad y aquí tenemos las imágenes en nuestra carpeta, podemos navegar por ejemplo si subimos un nivel 30 00:03:11,449 --> 00:03:21,210 volvemos a entrar en la carpeta pruebas y efectivamente aquí tenemos las imágenes, bueno pues estas imágenes que acabamos de subir 31 00:03:21,210 --> 00:03:31,629 vamos a incrustarlas o añadirlas a nuestra galería de pruebas, pues entonces le vamos a seleccionar todo y al botón añadir las imágenes 32 00:03:31,629 --> 00:03:46,710 a la galería desde la que estamos trabajando, y aquí vemos como tenemos todas las imágenes que ya pertenecen a nuestra galería prueba, en este momento ya sí que podríamos poner 33 00:03:46,710 --> 00:04:02,710 una imagen carátula de la galería, entonces la seleccionamos lógicamente de una de las que acabamos de subir, esto está en la carpeta de pruebas, por ejemplo, esta, 34 00:04:03,449 --> 00:04:25,810 Ahora lo que vamos a hacer, si bajamos aquí estas opciones de avanzado, podríamos poner una descripción a nuestra galería y en principio también podríamos ir poniendo descripciones y cambiar el título a cada una de las imágenes. 35 00:04:25,810 --> 00:04:33,449 Esto es un trabajo ya ir imagen por imagen y ir poniendo las descripciones. 36 00:04:33,629 --> 00:04:42,129 En principio como no vamos a meternos en tanto detalle, ya hemos añadido las imágenes, solo tenemos que guardar los cambios en nuestra galería. 37 00:04:42,129 --> 00:05:08,810 Para guardar los cambios nos vamos aquí y hay un botón que debe estar mal traducido que pone tasar, le damos a tasar y ya hemos guardado nuestra nueva galería, se ha guardado, para comprobarlo podemos ir a la base de nuestro plugin, aquí, y ya vemos nuestra galería prueba. 38 00:05:08,810 --> 00:05:29,709 Bueno, otra cosa que podemos crear son grupos de galerías. Vamos a suponer que queremos crear galerías de actividades deportivas y dentro de esas actividades deportivas habría una galería de excursión a la nieve, otra galería de piragüismo del 2017, etc. 39 00:05:29,709 --> 00:06:04,689 Entonces para eso lo que hacemos es venir aquí a la opción de grupos de la galería, ahora mismo tenemos dos y voy a crear un nuevo grupo, por ejemplo este título, bien ya hemos puesto un título al grupo y ahora lo que habría que hacer sería añadir galerías de las que tenemos ya creadas que queremos que pertenezcan a este grupo, 40 00:06:04,689 --> 00:06:21,670 Yo le voy a añadir dos, por ejemplo esta y la que acabamos de crear de prueba, no, vamos a añadir esta de piragüismo y esta que acabamos de añadir de prueba, agregamos al grupo de la galería. 41 00:06:22,189 --> 00:06:35,709 Ya sabemos que entonces tenemos que el grupo de prueba contiene dos galerías, piragüismo y prueba, tan solo tenemos que dar a este botón de tasar para que se guarden los cambios. 42 00:06:35,709 --> 00:06:41,889 Muy bien, pues ya tenemos creado el contenido, la galería o el grupo de galerías. 43 00:06:42,110 --> 00:06:45,550 Ahora nos toca ver cómo publicar estos contenidos. 44 00:06:45,970 --> 00:06:51,250 Bueno, pues lógicamente las galerías tienen que ir incrustadas dentro de un contenido, 45 00:06:51,850 --> 00:06:55,850 una entrada, como pues en una noticia, o directamente en una página. 46 00:06:56,290 --> 00:07:04,600 Vamos a hacer el ejercicio con una página de pruebas que tengo aquí. 47 00:07:04,600 --> 00:07:18,699 me meto y aquí ahora voy a proceder a incrustar mi galería, bueno pues voy a eliminar esto y vamos a hacer que esta fila tenga una sola columna 48 00:07:18,699 --> 00:07:31,800 bien, pues comenzamos añadiendo un bloque de texto, ¿por qué un bloque de texto? porque la forma de publicar las galerías es mediante shortcode 49 00:07:32,519 --> 00:07:45,040 Añadimos el bloque de texto, borramos este texto ejemplo y ahora vamos a darle a o bien este icono o bien este botón, que hacen el mismo efecto. 50 00:07:46,319 --> 00:07:53,040 Aquí nos generaría el shortcode y aquí directamente nos pregunta por qué galería queremos incrustar la fotografía. 51 00:07:53,040 --> 00:08:01,300 Vamos a verlo, nos sale esta ventana, elegimos primero qué aspecto queremos que tenga la galería. 52 00:08:01,800 --> 00:08:23,160 Como no hemos comprado este plugin solo nos ofrece estas tres opciones, o bien miniaturas que es lo más común que solemos hacer, o bien galería que solo aparezca una fotografía y al ir pasando a izquierda y derecha aparezcan las siguientes, un navegador o un estilo de blog que van una a continuación de la otra. 53 00:08:23,160 --> 00:08:28,819 voy a elegir miniaturas, tengo que aquí definir qué galería quiero incluir 54 00:08:28,819 --> 00:08:30,899 pues aquí tengo la galería prueba 55 00:08:30,899 --> 00:08:36,019 así aquí el tema light que solo hay dos, el oscuro y el claro 56 00:08:36,019 --> 00:08:41,059 que sería que quiero que aparezca de fondo si una pantalla negra o una pantalla blanca 57 00:08:41,059 --> 00:08:45,000 cuando veo la galería, bueno voy a ponerla en blanco de momento 58 00:08:45,000 --> 00:08:48,120 y en principio no habría que hacer nada más 59 00:08:48,120 --> 00:08:50,179 inserto la publicación 60 00:08:50,179 --> 00:08:53,700 y a mi me ha quedado en esta publicación este icono 61 00:08:53,700 --> 00:08:56,360 si yo guardo los cambios 62 00:08:56,360 --> 00:08:58,539 y actualizo la página 63 00:08:58,539 --> 00:09:05,399 vamos a ver como se muestra esta galería 64 00:09:05,399 --> 00:09:15,250 aquí efectivamente están todas las imágenes de la galería 65 00:09:15,250 --> 00:09:20,750 si yo hago clic en una imagen 66 00:09:20,750 --> 00:09:25,250 como he elegido el entorno blanco, luminoso 67 00:09:25,250 --> 00:09:32,029 pues de fondo aparece el blanco, aquí tengo para ir pasando izquierda y derecha todas las fotografías de la galería 68 00:09:32,029 --> 00:09:37,129 aquí tengo para cerrar esto y volver a la pantalla donde se veían todas las miniaturas 69 00:09:37,129 --> 00:09:45,250 si abro una imagen y aquí le doy a maximizar se ve a pantalla completa 70 00:09:45,250 --> 00:09:54,649 si dentro de esta pantalla le doy al botón, o dentro o fuera, si yo ahora lo minimizo y le doy al botón play 71 00:09:54,649 --> 00:10:00,330 pues cada 3 segundos va a ir cambiando la fotografía 72 00:10:00,330 --> 00:10:05,110 y no tengo que estar yo tocando botones de avanzar izquierda y derecha 73 00:10:05,110 --> 00:10:10,250 voy a pausarlo, si le doy a la I de información me mostrará 74 00:10:10,250 --> 00:10:13,409 aquí abajo el título o la descripción 75 00:10:13,409 --> 00:10:18,129 lo que haya yo puesto en las propiedades de esta imagen 76 00:10:18,129 --> 00:10:23,889 bueno pues entonces vamos a cerrar el contenido 77 00:10:23,889 --> 00:10:33,230 y vamos a ver cómo podríamos también mostrar una galería, que es simplemente, en lugar de mostrar todas las imágenes directamente, 78 00:10:33,230 --> 00:10:53,049 es mostrar la portada de la galería. Vamos a ir a editar esto, borramos el contenido de nuestra shortcode y aquí nos aparecen las mismas opciones de antes. 79 00:10:53,889 --> 00:11:00,909 En lugar de elegir el tipo de vista miniatura, podría mostrar el tipo galería. 80 00:11:01,750 --> 00:11:11,830 Entonces guardamos los cambios, actualizamos y en la visualización en el entorno real, 81 00:11:11,830 --> 00:11:18,350 Ahora ya no se ve en las miniaturas 82 00:11:18,350 --> 00:11:24,909 Sino que se ve una imagen con unos pequeños botones 83 00:11:24,909 --> 00:11:28,009 Para ir pasando de imágenes en imágenes 84 00:11:28,009 --> 00:11:31,429 Esa sería otra forma de ver la galería 85 00:11:31,429 --> 00:11:37,370 Bueno, pues si en lugar de ver directamente la fotografía 86 00:11:37,370 --> 00:11:41,250 Quisiéramos acceder al grupo de galerías 87 00:11:41,250 --> 00:11:43,549 Lo podríamos hacer del siguiente modo 88 00:11:43,549 --> 00:11:53,769 En esta ocasión voy a borrar el shortcode y a crear uno nuevo para que veáis cómo se realiza con este icono en lugar de con este botón 89 00:11:53,769 --> 00:11:58,870 Si le doy aquí, se abre una ventana similar 90 00:11:58,870 --> 00:12:03,090 Y ahora lo que queríamos era añadir un grupo de galerías 91 00:12:03,090 --> 00:12:06,149 Bueno, pues entonces aquí tenemos la otra pestaña, grupo de galerías 92 00:12:06,149 --> 00:12:16,490 El modo de la vista podría ser compacto para que solo me muestre la portada de todas las galerías que tiene en su interior el grupo. 93 00:12:17,409 --> 00:12:28,830 Masonry que es una especie de cuadrícula pero con distintos tamaños de las fotografías o de las fotografías de las portadas de cada una de las galerías. 94 00:12:29,610 --> 00:12:33,009 Y extendido que es ocupar todo el ancho de pantalla. 95 00:12:33,009 --> 00:12:38,470 Bueno, yo le voy a mostrar de modo compacto y que me muestre el grupo de prueba. 96 00:12:39,830 --> 00:12:46,250 El tema ahora lo voy a mostrar a lo oscuro para que veáis cómo funciona y voy a insertarlo en la publicación. 97 00:12:47,049 --> 00:12:53,830 Se me ha creado este shortcode, que aquí me figura como un icono, que por dentro lo que tiene es este shortcode. 98 00:12:55,509 --> 00:13:01,169 Bueno, guardamos los cambios en el bloque de texto, actualizamos la página 99 00:13:01,169 --> 00:13:16,090 y vamos a ver como la ha creado, actualizo esto y efectivamente aquí vemos el aspecto que le ha dado a nuestro grupo de galerías, 100 00:13:16,710 --> 00:13:26,529 si yo le doy aquí a esta galería se abren todas las imágenes que tiene dentro la galería de piragüismo, 101 00:13:26,529 --> 00:13:37,769 Si hago clic en una imagen, pasamos como veíamos en la explicación anterior, lo único que con un fondo negro, porque ahora tenemos el entorno de fondo negro. 102 00:13:38,389 --> 00:13:50,570 Si yo cierro aquí, tengo aquí todas las imágenes y con el botón atrás volvería a todas las del grupo de galerías. 103 00:13:50,570 --> 00:14:05,389 Así es como funciona. Es bastante sencillo de utilizar y a la hora de organizar las imágenes es bastante cómodo el tenerlas por carpetas en nuestro plugin. 104 00:14:05,909 --> 00:14:10,769 Bueno pues hasta aquí la explicación de este tutorial. Seguimos.