Skip Navigation

[Resolved] FlexSlider – Tutorial or Example please

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 17 replies, has 6 voices.

Last updated by alexd-6 8 years, 5 months ago.

Assigned support staff: emerson.

Author
Posts
#96276

Rob

Hi,

The new FlexSlider looks great and it is exactly what I need for a new project, but I'm a bit confused as to how to configure it for my needs at the moment. Do you have a tutorial or a working example with html code and css that we can refer to?

Thanks
Rob

#96442

Dear Rob,

I dont see the FlexSlider among our available modules:
https://toolset.com/modules/

Can you point me in the right direction?

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.

Regards,
Caridad

#96508

Rob

Hi Caridad

Go to https://toolset.com/home/module-manager/

FlexSlider is the last module in the list

Rob

#97012

Dear Rob,

The problem I'm seeing is that I can't see the custom fields for Slides.

I will forward a bug report for the developers to fix this.

I'll get back to you when I have more information.

Regards,
Caridad

#97214

Rob

Thanks, please keep me informed as soon as you have any information as this is a high priority for me.

#97346

Dear Rob,

While we fix it, I will send you by email a manual export of FlexSlider. This will create the custom fields.

Regards,
Caridad

#97739

Rob

Hi Caridad,

Thanks for sending emailing me the FlexSlider files but I'm still a bit confused about how it actually works. What I want to achieve is the following so any help would be greatly appreciated

1. I'm developing a site for holiday rental properties using a modified version of your Real Estate theme. I have a custom post type 'Properties' containing a main-image and secondary images (allowing multiple instances). On the Single Property Template I want to have a thumbnail driven slider to switch the image in the main slider by clicking on a thumbnail (just like this example - hidden link). The text content will remain the same - only the image changes, so if I already have all the image fields why do I need to create separate slides? And how can I modify the code to link the main slider to the thumbnail nav using my existing image fields rather than creating a slide?

2. I also want to have a slider on my home page which would be a modification of the Breaking News example on your Bootstrap theme but incorporating a thumbnail slider navigation. Could you give me some advice on how to do this please.

Many thanks
Rob

#99154

Dear Rob,

Once you have succesfully imported your modules you have to go to the Slides menu option and add a few pictures. Once this is ready, go to the page where you want to display the flexslider and add the 2 views shortcodes to it, like this:

[wpv-view name="Flex slider - main slider"]
[wpv-view name="Flex slider nav - thumbnails"]

The online module is still not working, please download it from here instead:

hidden link

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.

Regards,
Caridad

#99278

Rob

This still doesn't make sense to me.

If I have a custom post type which already contains all the pictures I need why do I then have to duplicate my work (I will have over 200 images in total) and create slides containing exactly the same data?

I just want to know how to modify the existing code to use the image fields I already have

#99976
flex_slider_implemented.png

Dear Rob,
Caridad ask me to help you on this. Yes I think what you are trying to accomplish is possible. I assume you want to use the main image of your properties (which already exists) as the source of the Flex slider images. After importing the Flex Slider using modules manager, the following are the important changes:

1.) "Flex slider - main slider" View
a.) Change the content type to load from Slides to Properties.
b.) Unchecked "Don't include current page in query result"

2.) "Flex slider nav - thumbnails" View
a.) Change the content type to load from Slides to Properties.
b.) Unchecked "Don't include current page in query result"

3.) "Flex slider - main slider - single slide" View template
a) Change to load main-image custom field instead of the default slide-image. This is the code:

<li>
  <img src="[types field="main-image" url="true" width="770" height="510"][/types]" alt="[wpv-post-title]">
</li>

4.) "Flex slider nav - thumbnails - single thumbnail" View template
a) Change to load main-image custom field instead of the default slide-image. This is the code:

<li>
  <img src="[types field="main-image" url="true" width="120" height="80"][/types]" alt="[wpv-post-title]">
</li>

5.) Since the default Real estate (this is the one I'm using to test the above changes) uses the "Property-sidebar" template to render the properties, I will change this to load the Flex Slider View. This is the updated code with the Flex Slider View on it (text and other fields are not changed). Take note of the Flex Slider -main slider and thumbnails view added.

<div class="search-top">
	<aside class="header_sidebar">
		<section class="widget widget_wp_views_filter">
			[wpv-form-view name="Search" target_id="211"] 
		</section>
	</aside>
</div>

<div class="wptypes_middle two_colomn idoc-property-sidebar">
        <h1>[wpv-post-title]</h1>
[wpv-view name="Flex slider - main slider"]
[wpv-view name="Flex slider nav - thumbnails"]   
		<div class="two_thirds_col">
			<div class="vp-price meta-top">$[types field="price" class="" style=""][/types]</div>
			
			<div class="vp-meta">
				<div class="vp-field"><label>City</label>[types field="city" class="" style=""][/types]</div>
				<div class="vp-field"><label>State</label>[types field="state"][/types]</div>
				<div class="vp-field"><label>ZIP</label>[types field="zip" class="" style=""][/types]</div>
				<div class="vp-field"><label>MLS</label>[types field="mls" class="" style=""][/types]</div>
				<div class="vp-field"><label>Squarefeet</label>[types field="squarefeet" class="" style=""][/types]</div>
				<div class="vp-field"><label>Bedrooms</label>[types field="bedrooms"][/types]</div>
				<div class="vp-field"><label>Bathrooms</label>[types field="bathrooms"][/types]</div>
				<div class="vp-field"><label>Basement</label>[types field="basements" class="" style=""][/types]</div>
				<div class="vp-field"><label>Garage</label>[types field="garage"][/types]</div>  
			</div>
			
			<div class="vp-body">[wpv-post-body view_template="None"]</div>
			<div class="vp-map">[types field="maps" class="" style=""][/types]</div>
			<div class="vp-video">[types field="videos" class="" style=""][/types]</div>
		</div>
        
</div><!-- .wptypes_middle -->

<aside class="second_sidebar">
	[wpv-view name="Widget - Sponsored Property"]
	[wpv-view name="Widget - Largest Properties"]
</aside>

6.) After saving all changes. Image are now loaded via the Flex Slider, see screenshot. I test it and it's working well. No changes needed for your existing Types configuration. In case I miss something, I send you my working module for you to work with. To test this in your setup, I recommend having two WP setups. The first setup is to import my module that I send you in email so you will see my settings. The second setup is your current existing setup which you are doing development work. Don't import my module to your development site. Import it on a clean WP install. In details:

a.) Create another WordPress setup with clean database for this. You can use http://wordpress.org/plugins/wordpress-reset/ plugin to clear your WP database.

b.) Activate Types, Views and Module manager plugin.

c.) Import my module: flexsliderimplemented-2013-06-06.zip

d.) Examine the settings and slowly implement them to your development site to see it.

Please let me know how it goes. Thanks.

Cheers,
Emerson

#104660

Rob

Hi emerson,

Thanks for your reply and for sending me your revised flexslider module. Sorry it's taken me so long to respond as I had to drop what I was doing to work on another urgent project.

I have two different requirements for the flexslider on my site and they will have to work in different ways. My first requirement is to use it for normal blog posts to feature as a slider on my home page. I've created clones of your view-templates and views and edited them to work with the featured image for each blog post. This works fine, although the css needs a bit of editing to make it right on my page layout.

Secondly I still need it to work with the images for the single property page and your solution above does not allow me to do this. Your solution is to take the main image of different properties and put these into the slider. However, what I want to achieve is to take multiple images from a single property and put those into the slider. Your standard Properties type contains two image fields - main-image (a single instance) and thumbnails (allows multiple instances). What I want to achieve on my single property page is for each property to show the main-image as the default, with the thumbnail images (which could vary in number so some properties may have 3 images - some may have 6 etc) displayed in the thumbnails carousel, and which will then display as the main image when you click on them.

I followed your steps 1-4 changing the types field to "thumbnails" in step 4 but it didn't work. Any help would be greatly appreciated.

Many thanks
Rob

#104809

Dear Rob,
Thanks for your feedback. I send you the updated module in email. I manage to edit the View settings and template to return only the images belonging to the post. Import my module (that I send to you in email) and make sure you have backups of your site and files. Then overwrite all Views, Types fields, templates by checking them all during the module import stage.
As designed, the Flex Slider will return images belonging to individual unique post. Then display the images of these posts in a carousel. This is not your case. You want to return images belonging to the same post(for example the properties where there are several thumbnails involved). This requires changing the Flexi Slider JS code (so when the thumbnails are clicked, it will display the corresponding image as the main image) which we are not part of and written by someone else:

* jQuery FlexSlider v2.1
* Copyright 2012 WooThemes
* Contributing Author: Tyler Smith

Based on our support policy(below this page), we can only troubleshoot problems and advice on best practices and we are not allowed to do detailed custom coding work. If you want custom programming work, you can submit this as project in our official Toolset custom development services: hidden link or our certified partners: https://toolset.com/consultant/
Please let me know how it goes.

Cheers,
Emerson

#105045

Rob

Hi Emerson,

I have uploaded your revised module but now my page just displays 'No posts found'

Are you saying that I cannot do what I want to do without getting someone to re-write some custom JS code for me? I'm amazed the Flexslider cannot do what I want it to do - after all it's functionality that can be achieved using a very basic gallery plugin such as NextGen.

#105173
modules_checked.png

Dear Rob,
It's strange, probably something is wrong with how you upload the module. I suggest to revert back to your original changes using your backup. Then setup another localhost for my new module using my original procedure then import the new module *make sure they are all checked like in the attached screenshot).
Yes in my test here , you need someone to review the JS code because it's not compatible after I tested it in my module. It's a bit complicated. The easiest way to implement the Flex Slider module (how it is supposed to be used) is to use the default Slider post type then upload images for each post then you're done. Flex slider main images and thumbnail View will then loop to these posts images and display them as main images/thumbnails in sliders. This is entirely different in your case, you want images within a single post to be looped in a Flex Slider View. While I made some changes on the View, I see some JS errors that is beyond my control.
Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.

Cheers,
Emerson

#105258

Rob

Hi emerson,

I think I have it working now. I did the upload again and the images appeared (so not sure what went wrong with the previous upload) but the slider didn't do anything when I clicked on the thumbnails. However, I changed the code in your view templates to add the "thumbnails" which I've renamed "property-images" to the main slider and the main-image to the thumbnail slider - so the code now reads as follows

Flex slider - main slider - single slide

  • [types field="main-image" url="false" width="770" height="510"][/types]
  • [types field="property-images" url="false" width="770" height="510" separator="
  • "][/types]
  • Flex slider nav - thumbnails - single thumbnail

  • [types field="main-image" url="false" width="120" height="80"][/types]
  • [types field="property-images" url="false" width="120" height="80" separator="
  • "][/types]
  • The images are a bit off-center in the slider window but I'm sure that's just a CSS issue which should be easy to resolve and won't need any changes to the JS code.

    Thanks very much for your help in resolving this.

    Rob