[Resolved] View slider of repeater field imagen and video of taxonomy

[Author]

Posts

[hispavista-s.l.E]

Hi, I have created a view in the parent terminology archive, a list of the child terminologies with their descriptions and products.
I have created two types of taxonomy fields:
A repeating field of photos
A repeating field for videos.
I would like to display a slider with the videos or photos related to the child terminology along with the rest of the listing data.
How can I do this? What query should I put in the slider view to show me what I want?

At the moment I have the following:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>
<div class="ancho">
<div class="category-group">
<div class="left">
<h2>[wpv-taxonomy-title]</h2>
<p>[wpv-taxonomy-description]</p>
[wpv-view name="List product in parent category"]
</div>
<div class="rigth">
[wpv-view name="Slider video-photo"]
</div>
</div>
</div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

Best regards and thank you

[Minesh]

Hello. Thank you for contacting the Toolset support.

It seems you will have to use nested view and you are already using it but I will have to review your current structure first.

Can you please share problem URL where you want to display the content on frontend as well as admin access details and tell me with what view you want to display what content or what is your expected output.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

As I understand with the following taxonomy view:
=> hidden link

You want to display the custom term image repeating field "Galleria di foto" - correct?
=> hidden link

If yes:

I see you have created taxonomy view and you can display the term field using the shortcode for example:

[types termmeta='galleria-category' title='%%TITLE%%' alt='%%ALT%%' size='full' separator=', '][/types]

I see you have image repeating "galleria-category" and you can display the term field as I shown you above.

Please check the following doc:
- https://toolset.com/documentation/displaying-wordpress-term-fields/

If you still have doubts please let me know what is your expected output with what section of your page and with what view.

[hispavista-s.l.E]

Hi Minesh, I know I can display the field directly with the shortcode you provided. It will show me the images separated by commas.
[types termmeta='galleria-category' title='%%TITLE%%' alt='%%ALT%%' size='full' separator=', '][/types]

What I want is to create a slider with those pictures, that's why I tried to do it with the View slider type option. I get all the images in the first item of the slider, how can I create a slider with the images of the custom field of each taxonomy?

[Minesh]

You want to combine all term images?

I'm bit confuse about how you want to display the term field "Galleria di foto"?

Do you want to have one slider for all the terms and all the images coming from the custom term field "Galleria di foto" or you want to have one slider per your one child term?

You can build the slider view when you have post type configured as child post but to have slider using repeating image field, you will have to use any of custom Javascript library that offers such feature. For example, please check the following related tickets:
- https://toolset.com/forums/topic/how-to-display-the-pics-i-uploaded-as-a-slider/#post-518295

- Can you please first display all the required images correctly form your term field "Galleria di foto" and then we can go to configure the slider.

You can check the Module manager library and check if any of the slider listed there you would like to use:
- https://toolset.com/home/module-manager/

You need to install the Toolset Module Manager plugin from the legacy section of toolset.com
- https://toolset.com/account/downloads/#legacy-plugins

More info:
- https://toolset.com/documentation/legacy-features/export-import/using-toolset-module-manager/#importing-modules
- https://toolset.com/documentation/legacy-features/export-import/using-toolset-module-manager/#toolset-module-library

[hispavista-s.l.E]

Hello,

I would like to be able to do it only with Toolset views, without adding new js. That's why I created a new view to show a slider (for example the photo slider).

How should I create the slider view, what query should I put to make the slider work with the custom photo field?
Here is a schema to better understand what I mean:

Archive of taxonomy with parent terminology. This archive will show a list of the custom fields of the child terminologies of the parent terminology.

Example:

Parent terminology archive:

Child terminology 1:
-Title
-Description
-Products with this child thermonology
-Image slider of this child thermonology
-Video slider of this child thermonology

Child terminology 2:
-Title
-Description
-Products with this child thermonology
-Image slider of this child thermonology
-Video slider of this child thermonology

Child terminology 3:
-Title
-Description
-Products with this child thermonology
-Image slider of this child thermonology
-Video slider of this child thermonology

[Waqar]

Thank you for sharing these details.

Just wanted to let you know that Minesh is on holiday today.

He'll be back tomorrow and will be able to follow up on this ticket, accordingly.

Thank you for your patience.

[Minesh]

You can build slider using view using the post type not using the custom repeating field.

For instance, you have a book post type having a single image filed then you can build the image slider for that image field available with book post type.

To build a slider using the repeating field you will have to use the flexslider or any other slider library.

If you are agree to use flexslider or any other slider option available with the Module manager I can help you further to integrate it. Please let me know your choice.

[hispavista-s.l.E]

Hello Minesh,
I need to do the construction with repeatable fields for both photo and video so I will have to do it with slider.
The website is created with Avada, could it be done with Avada's slider block or with its sliders?
If it can't be done with Avada and Toolset, how can I do it with flexslider?
I need to solve this as soon as possible.
Thanks for your help.

[Minesh]

Can you please check now: hidden link

I've added the "File Manager" plugin and using that I've added the "flexslider" resource files to your child theme as you can see with the following link:
=> hidden link

Then I've edit the funcitons.php file of your child theme and added the following code:

function enqueue_flexslider(){
 
    if ( !is_admin() ) {
 
        
      wp_enqueue_style( 'flexslider', get_theme_file_uri( '/flexslider/flexslider.css' ), array(), '1.0' );
     wp_enqueue_script( 'flexslider', get_theme_file_uri( '/flexslider/jquery.flexslider-min.js' ), array( 'jquery' ), '1.0' );
 
    }
 
}
add_action( 'wp_enqueue_scripts', 'enqueue_flexslider' );

I've edit your patent view and added the shortcode argument to your view that displays slider photo and video:
=> hidden link

 [wpv-view name="Slider video and photo" terms="[wpv-taxonomy-id]"]

To your "Slider video and photo" view I've added the following query filter and changed the source of this view as taxonomy "Categorie di prodotti" from the "Content Selection" section.:
=> hidden link

Taxonomy term filter
Taxonomy term ID is set by the shortcode attribute "terms"

And I've format the "Loop Editor" section as given under:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
<div class="flexslider">
    <ul class="slides">
        <wpv-loop> 
          
        <li>[types termmeta='galleria-category' title='%%TITLE%%' alt='%%ALT%%' size='medium' resize='proportional' separator='</li><li>'][/types]</li>
        

			
        </wpv-loop>
          </ul>
</div>

		<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

And to the "JS editor" of this view I've added the following code to call the flexslider:

jQuery(document).ready(function($){
  
  ( function( $ ) {
    $( document ).ready( function(){
 
      $('.flexslider').flexslider({
        animation: "slide"
      });
 
    });
})( jQuery );
  
  
});

Can you please confirm it's working as expected now.

[hispavista-s.l.E]

Hello Minesh,
Thanks for your help. It seems to be working.
I would like that the slider could have youtube video too, how could I do that?

[Minesh]

You want to display youtube video with the same slider view? or you want to create another view and display youtube video below the image slider?

[hispavista-s.l.E]

Hello Minesh,
It would be better in the slider to be able to show photos and videos. In the first slider there are two video urls.

[Minesh]

First of all, I would like to inform you that you will have to upload the embed youtube video link to your video URL field.

That is why To the following term:
- hidden link

I've updated the video URLs as:
- hidden link
- hidden link

Then - I've added the "Code snippet" plugin and added the following code snippet:
=> hidden link

Where to the above code snippet I've added the following custom shortcode:

function func_add_video_to_slider( $atts ) {
	
		$i=0;
		// Attributes
		$atts = shortcode_atts(
								array(
								'slug' => '',
								),
								$atts
								);
	

 	
	$term_meta = types_render_termmeta('video-category',array('output'=>'raw','separator'=>","));
	$term_meta = explode(",",$term_meta);
	$str = '';
	foreach($term_meta as $k=>$v):
	 $i = $i+1;
	 $unique_slug = 'player_'.$atts['slug']."_".$i;
	 $str = $str.'<li>';	
	 $str = $str.'<iframe id="'.$unique_slug.'" src="'.$v.'?rel=0&player_id='.$unique_slug.'" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
     $str = $str.'</li>';
	
	endforeach;
	
	 
     
return $str;
 
}
 add_shortcode( 'add_video_to_slider', 'func_add_video_to_slider' );

After that to the following view:
=> hidden link

I've called the above shortcode as:

[add_video_to_slider slug="[wpv-taxonomy-slug]"]

Can you please confirm it works as expected now:
- hidden link

[hispavista-s.l.E]

Hi Minesh, I just have a few details left.
When they have not added any video it loads the iframe (you can see it in the third slider). Also if there is no video or photo it shows the slider page (you can see it in the last slider).
I have tried to add conditionals in the Toolset view but I think by having such fields and functions, what it does is not load anything.
How could this be solved?

Best regards