I'm using Toolset Layouts and Views to changeover an existing fixed width site to a responsive site. This means recreating a fairly complex slideshow to become response and I could do with some help.
You can see the fixed width slideshow on the home page at hidden link and the home page of the responsive version on my dev site at hidden link
I've got the large slideshow displaying fine but I need to create the right hand block of four small images which need to 'darken' in sequence with same post being displayed in the main large slideshow.
Could you suggest the best way to approach this please?
I need to understand how many Layout grid elements/views I should use?
e.g. should I create the four small images as a single slideshow view or four separate views? And how do I maintain the relative height of the two blocks ('large image' and '4 x small images) as the viewscreen size reduces?
Many thanks
Robert
That actually looks just like a Pagination, where you instead of Links or Buttons, use Images with Slogans.
So you could actually style your View to have a Pagination and Pagination Links, and then address those to display the Image you want.
Another approach can be to use our FlexSlider module wich is actually for more complex Image sliders, but can be used as well for your goal.
You could download the "Module Manager" and then grab the "Flex Slider Module".
This will set up all the needed strcutures and you would just need to apply custom CSS and HTML to make the Views look like you want.
For the approach with pagination, as well you would need to use Custom CSS and HTML to change the appeareance of the Pagination elements in your View.
How to create a Paginated View is elaborated here:
https://toolset.com/documentation/user-guides/views-pagination/
Please let me know if you need more help with the setup.
Hi Beda
Okay I'm going to use the FlexSlider module for this slide show. I've downloaded the "Module Manager" and grabbed the "Flex Slider Module".
This gets me to a screen as per Image-1 attached.
I'm not sure what to do next? The "Module Manager" documentation doesn't have any detail for the "Flex Slider Module" and I can't find any documentation on your site. Is there a guide? Or can you get me started with a few pointers please.
Regards
Robert
Can you give me login to your site?
I can set up a small example where then you can start from.
Does that sound good?
I created a test Page for you:
hidden link
There you can see the slider in action.
When you edit the page you see I added the 2 Views (main slider and navigation)
Those 2 Views are the Views you would use for your goal.
The Main Slider is the Bigger Image, while you would modifiy the location of the navigation using Custom HTML and CSS to move it to the right of the bigger image, and in that very View, you would modify the output with CSS and HTML to bring the navigation slides vertically instead of horizontally.
In the Views you will also see that there are Content Templates used, where the Loop output is styled.
Hi Beda
Thanks for setting up the test page. It helps a lot. I need to understand the sequence of events, so please stay with me on some questions;
I can see that the page you have created calls up the two views. This is clear.
I can see that the large image view calls up the jQuery FlexSlider code. Did you have to insert this manually? or did it happen through the Modules Manager?
Were the two content templates (used in the two views) created manually or were they created as a result of creating the views?
So I am trying to understand the sequence of events used to create the demo slideshow? And what role the module manager plays in this sequence?
Regards
Robert
1. I can see that the large image view calls up the jQuery FlexSlider code. Did you have to insert this manually? or did it happen through the Modules Manager?
No, I did ony insert the Views to the Page, and created a few Slides in the related Post Type.
2. Were the two content templates (used in the two views) created manually or were they created as a result of creating the views?
No, they are imported by Module Manager, and already called within the Views.
I did not edit any Toolset Structure at all, that is why Module Manager is so great.
3. So I am trying to understand the sequence of events used to create the demo slideshow? And what role the module manager plays in this sequence?
- Import the module with the manager
- create a few slides in the Post type "Slides"
- insert both Views as I did to a page.
That's all.
Hi Beda
I tried using the same method you used to create my home page slide show. You can see the current display at hidden link
My two views are called;
'home-slider-main'
'home-slider-thumbnails'
I added the two views (and the two corresponding content templates) to the module manager.
Sorry but I have some things still to understand;
1. I need my four thumbnails to appear in one vertical row (not side by side). I tried removing the
and
from the content template but then the association between the thumbnails and the main slider is lost.
2. I need the main slider to advance automatically, but again when I change the View's Pagination and Sliders Settings from 'No pagination' to 'Pagination enabled with automatic AJAX transition' then again I lose the association between thumbnails and the main slider.
(Again just to remind that I'm trying create the same layout and operation as in the old fixed width site at hidden link)
I would appreciate you help to solve these two issues.
Regards
Robert
You have modified the imported content, so now it's not working anymore.
I would need to re-import it to start with the original Content.
Can i do that on this Site?
Or can you delete the content and upload it so I can test around with your requirements?
Hi Beda
I'm sorry to have messed up the imported content. I am still struggling to understand what to do.
Yes it's fine to reimport it.
To perhaps make things easier; I want to use the standard wordpress post type for the slider. I have created a test category called 'test-slideshow1' which has got four suitable test posts. If you could work with these posts then it might be easier for me to understand the process.
Regards
Robert
Please re-import the module.
Then you can replace the Post Type that the module generates by your standard posts.
This Post type is called "slides" and you can modificate the Views that the module generates, so to query your Post types instead of the Slides.
Of course, you will need to adapt your Post types to exactly mimic the created Slides (from the module)
But if you do want this only for those 4 images, and only for that one page, I do not see the necessity of this module.
You can simply add a Pagination to any View, and instead of Pagination Links or Numbers, insert your images with CSS.
As example you can use the Pagination method of Views that displays pagination dots, and modify those so to display your Images instead of the default Dot.
Hi Beda
To clarify, I only suggested the test category as a convenience. The actual requirement is to display the four most recent posts from a very large category with more than 100 posts.
I think maybe we need to get back to the point of my assistance request. Whichever method we use for this slideshow, there are two problems I need your help to solve;
1. I need both the main slider and the four thumbnails to advance automatically and in sync, just like the fixed width slideshow at hidden link But clicking any of the four thumbnails will cause the main display to jump to that image.
2. I need help to place the four thumbnails in a vertical column display mode and not side by side.
I will entirely take your advice as to which method will give the quickest solution.
Regards
Robert
I removed all instances of the Slider module and re-imported for you.
We do use the FlexSlider in it's native way:
hidden link
You can not enable automated pagination, becuase this would need to be done in FlexSlider directly - it assumes manual pagination natively, and Views can not change that.
I apologise for not having pointed this out earlier.
To put the Thumbnails into a vertical list you need to apply Custom HTML and CSS, wich is not something we support, as it's part of the Website Design, and Toolset provides the heavy lifting in avoiding PHP and SQL Queries.
What you can do with this Module is have the slider manual, also vertical, but not automated.
For an automated slider you would need to use Views only, and this does not allow a structure like the FlexSlider (it can have a slider, but not with the thumbnail/main image structure)
Okay thanks for the assistance Beda
