Hi, you can use the JS editor panel just below the Loop Output editor panel in the View editor screen to insert your own custom JavaScript for this View.
Assuming your custom field slug is "ranking", then your wpv-for-each code should look like this:
[wpv-for-each field="wpcf-ranking"]
<li>
[types field="ranking"...
In your current code, the field is "slides" but that's not correct. It should be "ranking" as shown above. The remaining code looks good to me.
Also when i´ve tried to insert the view i cant select the custom field.
I'm not sure I understand. Are you trying to insert the View in your template, or are you trying to insert a custom field? If you are trying to insert a custom field in your template, then that's really a separate issue and we can split that into another ticket.
What is wpcf-ranking? Is it a custom field, or is it a View? I'm very confused. Maybe I should log in to your wp-admin area to see what's going on.
Okay I edited this template with Beaver Builder:
hidden link
I removed the module you were working on, I'm not sure what was wrong with that module. I started with a new HTML module instead. I placed this HTML in the editor area:
<h2>Project images as a slider</h2>
<div class="flexslider">
<ul class="slides">
[wpv-for-each field="wpcf-ranking"]
<li>
[types field='ranking' alt='%%ALT%%' title='%%TITLE%%' size='large' align='none' resize='proportional' separator=', '][/types]
</li>
[/wpv-for-each]
</ul>
</div>
<script>
( function( $ ) {
$( document ).ready( function(){
$('.flexslider').flexslider({
animation: "slide"
});
});
})( jQuery );
</script>
It seems to be working for me now, except a styling issue with the navigation arrows. It looks like the flexslider icon fonts are missing from your child theme, but I see Nigel's instructions didn't mention that. You should be able to find a fonts directory in the flexslider plugin files you downloaded. Upload that entire folder to your site in the flexslider directory of your child theme: wp-content/themes/bb-theme-child/flexslider/
1) i´m going to upload images with a standard fix size (find example) how can i make my slider not to grow full width?
You can wrap the flexslider div in another div that has a fixed width:
<div style="width:500px;">
<div class="flexslider">
...
</div>
</div>
2) is there a posibility to link the image to the source website to find more info?
I don't think there's an easy way to do that with just one custom field. You would have to create a repeatable field group (RFG), so you can have a website URL and an image for each ranking. However, this completely changes how you will display the images. To loop over RFGs, you must use a View instead of wpv-for-each. So you'll have to recreate the same markup structure in a View's loop.
https://toolset.com/documentation/getting-started-with-toolset/creating-and-displaying-repeatable-field-groups/
