[Gelöst] Slider de videos e imagenes

[Author]

Artikel

[nandomerino]

Buenas;
Tengo un sitio que tiene un CPT para mostrar trabajos que tiene varios conjuntos de campos personalizados, ahora mismo utilizo flexslider para mostrar slider de imágenes, pero ahora quiero ver la posibilidad de como crear un slide que pueda mostrar tanto videos como imágenes.

¿Como puedo hacerlo?

[Nigel]

Hola Nando

¿Qué has intentado ya?

Si ya has implementado un slider con flexslider para imágenes, ¿no puedes hacer lo mismo y en lugar de mostrar una imagen, muestra un campo de video?

¿Qué problemas encuentras?

[nandomerino]

El problema que tengo es que necesito un slider que muestre indiferentemente videos e imágenes, por ejemplo:

-Slide1 - imagen
-Slide2 - video
- Slide3 - imagen
....

Ahora mismo solo soy capaz de crear un slider que muestra o solo imágenes o solo videos... El código que utilizo para mostrar el slider es el siguiente:

<div class="flexslider">
            <ul class="slides">
                [wpv-for-each field="wpcf-imagen-2"]
                <li>
                    [types field='imagen-2' alt='%%ALT%%' size='large' align='none' resize='proportional' separator=', '][/types]
                </li>
                [/wpv-for-each]
            </ul>
	</div>

[nandomerino]

Se me ha ocurrido una posible solución un tanto arcaica pero que puede ser funcional, he pensado crear un "Grupo de campos" que se llame Slider, dentro de este grupo de campos crear un número "X" de campos de imagen y video intercalados, que quedaría de la siguiente forma:

- Imagen 1
- Video 1
- Imagen 2
- Video 2
- Imagen X...
- Video X...

Así hasta 10, con esto lo que crearía sería el siguiente slider:

<div class="flexslider">
            <ul class="slides">
              [wpv-conditional if="( '[types field='imagen-1' output='raw'][/types]' ne '' )"]
                <li>
                    [types field='imagen-1' alt='%%ALT%%' size='large' align='none' resize='proportional' separator=', '][/types]
                </li>
               [/wpv-conditional]
               [wpv-conditional if="( '[types field='video-1' output='raw'][/types]' ne '' )"]
                <li>
                    <video loop muted class="thevideo"><source src="[types field='video-1' output='raw' separator=', '][/types]" ></video>
                </li>
               [/wpv-conditional]
[wpv-conditional if="( '[types field='imagen-2' output='raw'][/types]' ne '' )"]
                <li>
                    [types field='imagen-2' alt='%%ALT%%' size='large' align='none' resize='proportional' separator=', '][/types]
                </li>
               [/wpv-conditional]
               [wpv-conditional if="( '[types field='video-2' output='raw'][/types]' ne '' )"]
                <li>
                    <video loop muted class="thevideo"><source src="[types field='video-2' output='raw' separator=', '][/types]" ></video>
                </li>
               [/wpv-conditional]
            </ul>
    </div>

Y crear de esa forma tantas slides como campos haya creado... Es bastante rudimentario, pero no encuentro mejor forma de hacerlo...

[Nigel]

Mejor usar los sliders de Views, que se usa para mostrar entradas, no campos de una sola entrada: https://toolset.com/documentation/user-guides/creating-sliders-with-types-and-views/

Crea un tipo de entrada "slide" p.j., que tiene campos de imagenes ó videos (cada entrada tiene solo un campo). Conecta estas entradas de slider en una relación con el tipo de entrada que ya usabas.

Crea un View, tipo slider, para mostrar "slides" relacionadas, y muestra el campo imagen ó el campo video (con shortcodes de wpv-conditional como pensabas).

Así saldrán una mezcla de imágenes y videos según a cuantas agregues de cada tipo.

¿Me entiendes? (Estamos muy ocupados este semana y por eso mis respuestas son un poco cortas.)

[nandomerino]

Entiendo más o menos lo que dices, pero no logro ver la forma en que pueda añadir los slides en la plantilla y demás... Me quedo un poco corto de conocimientos para hacerlo como dices...

[Nigel]

Hola Nando

He preparado una muestra aquí: versteckter Link

Este sitio tiene un CPT obras y otra de "slides" que contienen los imágenes ó videos.

Ve que hay tres entradas de obra. Si estudias la plantilla de obras y el View que contiene, creo que entenderás, pero dime si quedan dudas.

[nandomerino]

He visto el ejemplo y veo como hacerlo, me lo he descargado a local para tenerlo como referencia en el futuro. Tengo una duda ¿un mismo CPT en este caso una misma obra puede tener varios slideres?

[Nigel]

En principio puedes conectar tantos slides a una sola obra como quieres.

Todos saldrían en el View de slides, pero sería posible añadir—p.j.—una taxonomía a los slides ("principal", "segundo") etc. y crear un View de los slides principales, otra View de los slides secundarias etc.

[nandomerino]

Al final lo hemos logrado hacer! Gracias.