Hi folks,
I'm trying to figure out how to use the "insert slideshow" function, and so far in all my searching I can't find any information. I see where I can click "insert slideshow" when editing a page, but I can't figure out how to add any images to it. There is just the "placeholder.png" listed.
Can anyone advise on how to use this function? What I'd really like is for players to land on the homepage and see an automatically playing slideshow of images that set the mood for the campaign.
Thanks for any advice!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
Sounds like you are using the CkEditor, many of the buttons don’t actually work yet. Personally, i prefer the textile editor. However, since you are an Ascendent member you can build a slideshow using css and html.
it isn’t very hard to do. I’ll post code for it after my game. Basically, you just need to plug in your picture’s urls and the timing for the pictures to be shown. The main page of my xcom campaign where the aliens appear over the sun is an example of a zoom fade it-fade out slide show animation.
Btw your campaign looks good.They are among us!
XCom: Defiance - Campaign of the Month November 2016
Thanks for the reply cgregory, your XCOM campaign page looks awesome. I'd love to do something 1/10 as cool as that.
Basically there are two parts to creating a slideshow. The HTML and the CSS.
For the HTML it is fairly basic. Create a div to contain everything (I named mine slideshow even though I never did CSS on that div class, I wanted the option). The create an image class for each image in your slideshow, in my case aliens1, aliens2, etc. You may need a couple of line breaks after in order to make sure your front page has space to display your slideshow. You can play around with the image top, width and height to figure out what works best for your images.
The second part is the CSS and it contains a two parts. The first part is the keyframe to fade the images in and out over a time frame that gets defined later.
The second part of the CSS is the timing for the individual images
opacity is the starting opacity you choose 0 to start the images hidden.
animation is calling the animation keyframe that you defined earlier on (in my case blurFadeInOut) next is the duration of the animation (in this case 3 seconds), 1 is the number of times to display the animation, ease-in is basically a slow start to the animation. forwards is the fill mode.
animation delay is how long before starting that specific animation. You can combine it with the animation duration to determine the timeline when each animation starts and finishes.
You can read more on animations at w3schools
https://www.w3schools.com/css/css3_animations.asp
They are among us!
XCom: Defiance - Campaign of the Month November 2016
Thanks very much cgregory for taking the time to post all that. I look forward to giving it a try!