I am having a play around creating custom components by cloning the existing ones.
I would like to create a simple slideshow component that can be loaded with multiple images.
I could add each image individually as an item but if there were say 30 images in the slideshow this could become quite tedious.
So just wondered any of the experts on here can recommend how they would implement this. I guess adding a folder of images somehow would be a possible avenue to explore?
Hi Paul,
It's been fun watching your public involvement over the last two months or so. Great to see that you got over the installation hump and that you see value in Adapt to the point of creating components.
Help us out with a little more info. Many of us would advise developers to create and test new plug-ins using the framework. Then, once it is stable, put together a properties.schema that will allow the plug-in to be used in the authoring tool. Where are you in your development process? Do you have code already that iterates through the image files of a specific folder? Or are you strategizing code to work with the current features of the authoring tool?
Is it your hope that a course author will be able to (a.) upload to the authoring tool a [zipped] folder of image assets, and then (b.) select the entire folder from within the general assets during course authoring rather then having to select 30 individual images?
- Chuck
Hi Paul,
Is your idea to let them fly in or appear in place (the latter being a kind of animation). I am struggling with this for a while and god some tips from the framework developers, but am not up to speed to code right away. Like Chuck, I am very curious what your approach would be.
John
Thanks John and Chuck
I have been dedicating a lot of time over the last couple of months trying to get up to speed with Adapt both from the perspective of using the authoring tool and framework from a Instructional Designers point of view and trying to get to grips with the code side of things behind the scenes. Lots of new stuff to learn but I hope to be able to contribute back to the community when I get up to speed. I have come from a background of 17 years creating primarily online games the vast majority with Flash AS3 but have been doing JS stuff now for a few years.
Anyway with regards this particular request, I have just set myself a task to try and create a component that will play a slideshow of a folder of images. So it will initially just "slide" through the images one at a time with a fixed delay - the standard issue slideshow type thing seen on websites.
Happy to get this working in the framework only first ignoring the authoring tool for now. I was just curious how best to add a large number of images. Selecting an internal folder would be the best solution really.
I have created slideshows many times in JS so just working out the process of incorporating the code into Adapt.
Thanks to everyone on here that has helped me so far with my various questions - there is a great bunch of friendly and very helpful people on here.
Paul
Hi, Paul!
I would have done this in Adobe Edge and inserted it with the responsive iframe component.
If you scale everything 100% in Edge it´s as responsive as expected in Adapt!
Danne/
Thanks Dan
I am really only using this as an exercise to learn to develop components so I don't actually have a need for this component for any course. Thought it would be a good example component to explore using multiple images and adding my own code for the slideshow animation and timing etc.
Probably trying to run before I can walk:)
Cheers
Paul
Seems like the simplest way to do this is to have some properties for the
1. Image Folder Path
2. Image filename prefix
3. Total number of images
In the framework then I can just set these properties in the components.json file
And in the authoring tool, I can set up the properties.schema to let the user set these properties.
So for example if I had the following:
"_imagePath": "course/en/images/slideshow1",
"_imagePrefix": "image",
"_totalImages": 20
Is this image location OK to use?
In the authoring tool, how would I upload this folder of images so that they are included in the correct imagePath location and will be included in the published files? I suspect this is not something available out of the tin but hopefully I am wrong.
Thanks
Paul
Hi Paul,
This probably isn't the most straightforward component to implement if you're looking for compatibility with the authoring tool.
The authoring tool doesn't support uploading folders right now (for various reasons). Also, uploaded assets are re-named to a generated ID value, so you can't rely on a consistent sequential naming format for your images, which is what I think you were going for here?
Brian
Hey thanks Brian.
That is a shame. I had thought a simple slideshow would have been a nice easy component to implement but I can now understand the issue of uploading the images via the authoring tool does complicate matters.
Ah well I guess I have learnt something anyway:)
Cheers
Paul
As a workaround to get this into the authoring tool (just for my own personal testing purposes) I have done the following:
Uploaded the slideshow images to my server and put in the imagePath to this location while testing within the authoring tool.
Then when I am happy it is working just prior to publishing I changed my imagePath property to:
course/en/assets/slideshow/
And once the files have downloaded, add my images into the folder course/en/assets/slideshow/
And I just used the following schema properties to allow me to add the details via the authoring tool:
"_totalImages": { "type":"number", "required":true, "default":1, "title": "Attempts", "inputType":"Number", "validators": ["required", "number"], "help": "How many images are there in the slideshow?" }, "_imagePath": { "type":"string", "required":false, "default": "", "inputType": "Text", "validators": [], "help": "Path to images for slideshow" }, "_imagePrefix": { "type":"string", "required":false, "default": "", "inputType": "Text", "validators": [], "help": "Image filename prefix" }, "_imageExtension": { "type":"string", "required":false, "default": "", "inputType": "Text", "validators": [], "help": "Image filename extension (.png or .jpg or .gif)" },
I know this isn't an ideal way of dealing with the images but it at least has allowed me to get my test component into the authoring tool and the framework.