WowSlider for Blog front page

  • Idea
  • Updated 2 months ago
  • Not Planned
For a while now the school website I maintain has been using a HTML5 friendly slideshow feature on the front page. It was OK to use - but required a lot of code work to make it work, and was hard to change.

However - after playing around with the FREE WOWSlider, (www.wowslider.com) I've replaced the old slideshow with a new version. It was amazing simple to use - all I needed to do was create a folder within the Typepad account we have, add the images, add the code and icons, and then copy&paste some HTML into a featured post.

A little tweaking of the code (adding the whole URL to the images mainly) and it works fine.

However, the killer feature is that each individual image in the slideshow can be linked to a unique URL - creating a way to link to specific blog posts / sections within a website. I can see this being used for "magazine style" headers on Typepad sites :o)

Simon Widdowson, Champion

  • 187 Posts
  • 14 Likes
  • glad I discovered this

Posted 1 year ago

  • 2

Alex Sirota, Champion

  • 93 Posts
  • 19 Likes
This is exactly the kind of features that would be nice to have built into typepad. But it is good to know this is possible. I've been using CSS menus to make menus and a commercial slide show builder that supports picture libraries in Flickr or Picasa to make it easier to update order and content.

Instead of searching and coding these in from scratch it would be really nice for typepad to support new forms of navigation and media management and UI controls.

Alex Sirota, Champion

  • 93 Posts
  • 19 Likes
By the way Simon if you use advanced templates check out the blog on our new website on how to leverage blog posts in a very unusual way.

http://www.newpathconsulting.com/2012...

And here is the slideshow I used.

http://www.slideshowbox.com/

Jen, Typepad Support Engineer

  • 695 Posts
  • 45 Likes
Thanks for the slideshow suggestions!

We don't have any plans to add a slideshow feature to Typepad, but we'll keep it in mind for future development. The third-party slideshow suggestions provided are great options to use in the meantime.

Simon Widdowson, Champion

  • 187 Posts
  • 14 Likes
You don't need to add a slideshow feature Jen, I thought I'd share how easy it was to add one using this particular 3rd party offering.
It works on both advanced templates, as well as using a theme (tested on both) :o)

Alex Sirota, Champion

  • 93 Posts
  • 19 Likes
Naturally this is easily done if you know what you're doing with a bit of code. I'd say 80% of typepad users have no idea that these techs exist or how to integrate them. My sentiment was for those folks to take advantage of the really cool stuff that takes a few minutes to learn and integrate. Some just want point and click.

Martin Crombie

  • 5 Posts
  • 0 Likes
Hi Simon,
I have been using Wowslider as my homepage on Typepad for over 1 year now.
The way I did it was to call into in to Typepads using an iframe to control the width of the slideshow.

I tried doing as you mentioned but it would never start and gives me bulletspoints.
Can you post yourcode with how you did it please?
With my Wordpress Blog I use Raygun which is by far the better way.
Thanks Martin

Simon Widdowson, Champion

  • 187 Posts
  • 14 Likes
Hi Martin,
This is how I did it (both on an advanced template blog, and a themed blog).

(1) Create the slideshow within WowSlider. Save the project and publish. Once published you should then have a folder for that project with the following folders in it.



(2) In your typepad dashboard, go to File Manager and create a new folder (I called it 'wowslider' - very original!) and then upload all the files from within the 'engine1' folder, open the 'data1' folder and upload all the images from the 'images' folder too. Note: if you're going to use the thumbnail option in your slideshow, you will need to create a new folder called 'tooltips' within the 'wowslider' folder to place the thumbnail images in. The thumbnail images have the same name as the full size images, but are in the 'tooltips' folder within the 'data1' folder.

(3) Now that you have all the elements uploaded, you need to create the actual post. You need to be in the 'HTML' tab view - not rich text. In the folder that was created when you published the slideshow, there is an 'index.html' file. You need to look at the source code in this (in Chrome, open the index.html page, right click and choose 'view source'). The source code will look something like this.



There are two parts to the code - one is in the 'head' section, and the other in the 'body' (I've marked them on the image above). Copy and paste both sections into your post. At the moment all the links to the images to the files and images are not pointing to the correct location, so you need to look through the code and add the FULL URL of your files to each link.



So img src="data1/images.1.jpg" would become img src="http://yourdomain.com/wowslider/image..." for example.

(4) Once all the links have been altered - publish the post. DO NOT return to Rich Text view as it will change the code. Check your site and you should see the working slideshow, like can be seen here; http://www.porchester.notts.sch.uk

Hope that helps Martin (and others)

Simon Widdowson, Champion

  • 187 Posts
  • 14 Likes
Oh - forgot to add. Once you've published the slideshow you can alter the text that shows on each slide, by altering the 'title' and 'alt' text for an image (this is the top line of text on the slideshow) and by altering the text description that follows the image.

Simon Widdowson, Champion

  • 187 Posts
  • 14 Likes
Update: Typepad have recently (May '13) released a BETA feature that allows users to enter code into a new "head" module. The first part of the code above can now be put into that "head" module, and does not need to be pasted into the actual post or page you are including the WOWslider on.

curlygirl, Champion

  • 66 Posts
  • 0 Likes
Hi Simon.
Brilliant walkthrough! Just used it on my new homepage. However, the transition seems to stretch the images a little. Why is this happening? Can you help?

When I view in preview, the transition is just a plain swipe to the left but there is no image stretching. Strange.

Website is http://beckykerrphotography.typepad.com

Thanks.

Simon Widdowson, Champion

  • 187 Posts
  • 14 Likes
Thanks for the comment, and I'm glad the walkthrough worked!
I've just taken a quick look at your site. When you created the slideshow - did you use images that were all the same size, or is the slideshow resizing the images to fit into your show? (look in the property tab of WowSlider, in the images area. There are three tick boxes - preserve ratio / stretch small images / shrink large images. Are these ticked? If the images you used were all the same size to begin with, these can be unticked, and may help)

curlygirl, Champion

  • 66 Posts
  • 0 Likes
All the images are the same size although I did have 'preserve images ratio' ticked. When I simply open the html file produced, the 'preview' is fine. It only seems to 'stretch' the image after I've loaded it into Typepad.

So, I tried a different transition and it works. I haven't tried them all but the problem seems to occur with the 'fade' option. I'll send a note to Wowslider and see what they say. At least I can get it to work now.

curlygirl, Champion

  • 66 Posts
  • 0 Likes
Ok. I've got an answer to the transition problem. I got a response from Wowslider but all they did was tell me what the problem was, not how to fix it. The problem is a conflict between the Typepad stylesheet and the wowslider one. I also posted in a CSS forum and got a fix.

This is the answer I got from the forum....

--------------------------
I think its the margins you have on the image making the transition 10px out when created with the canvas element which is absolutely at the top of the page and 10px further from the image.

try this:

Code:

.ws_images img {margin:0;}
.ws_images {border-radius:10px;}
--------------------------

It works beautifully. So if anyone else has this issue - this is the fix.

candy

  • 103 Posts
  • 2 Likes
Simon-
LOVE this! I am using WOWSlider too but have been trying to figure out a way to get my slideshow at the top and the blog posts to appear underneath like your site. Would you mind sharing how you did that, please? Thank you!

Simon Widdowson, Champion

  • 187 Posts
  • 14 Likes
Everything I did I've explained above Candy. To keep the slideshow at the top of your page make that post the "featured" post on your site (just select the featured post option to the right of the post compose window).

candy

  • 103 Posts
  • 2 Likes
Thanks Simon. I tried that after I posted my comment, but just wondering how you got the featured post to not show post date and post footers? I know you can disable them for individual pages but didn't see an option to disable for individual blog posts. Any ideas? Thanks again...your page is very aesthetically pleasing!

Simon Widdowson, Champion

  • 187 Posts
  • 14 Likes
Ah, you need to add some CSS either in the 'stylesheet' template (if you're using Advanced Templates) or in the CSS section of a theme.

To hide the header of a featured post try the following;

.entry-featured .entry-header, .entry-featured .entry-footer { display: none; }

candy

  • 103 Posts
  • 2 Likes
thank you! going to try that tonight. again, great job on the site!

candy

  • 103 Posts
  • 2 Likes
Ok so i tried this code to hide the featured entry but it not only hides header and footer for my featured post but also all the other posts that follow it. Here's what I have in my Custom CSS:


/* Hiding Title and Footer on Featured post*/
.entry-featured .entry-footer, .entry-featured .entry-header 
{ display: none !important; } 

Do you know how I can get it to just hide for the featured entry instead of ALL blog entries on the main page? Thanks.

Simon Widdowson, Champion

  • 187 Posts
  • 14 Likes
Is it possible to send the URL of your site to take a look?

candy

  • 103 Posts
  • 2 Likes
Yes, it is http://www.kcmetromoms.com and it is also pushing my right sidebar down to the bottom of the page for some reason. I can't understand why since I am not changing anything else! Thanks!

Simon Widdowson, Champion

  • 187 Posts
  • 14 Likes
Not sure why that code isn't working properly. The sidebar appears fine on other posts, so it seems to be that the wowslider addition is too wide - it might need to be narrowed to stop the sidebar before pushed to the bottom of the page.

Craig McGinty

  • 27 Posts
  • 0 Likes
I've not checked if it is still working, but TypePad France wrote a piece in 2011 about doing a image slideshow within TypePad itself, instead of relying on a paid for/free service, more here:

http://everything.typepad.com/france/...

Jen, Typepad Support Engineer

  • 695 Posts
  • 45 Likes
Thanks for the suggestion, Craig. Unfortunately, the image slideshow developed by the France team is no longer supported.

Craig McGinty

  • 27 Posts
  • 0 Likes
That's a shame

Debra Nettles

  • 2 Posts
  • 0 Likes
I have been trying to get the WOWslider slideshow to work. I want it to be placed above the sidebar and main content (under the navigation bar ONLY on the Home page. In Wordpress this is not a problem. However, my client likes Typepad. I am feeling very frustrated. Has anyone tried this layout and succeeded?

http://www.dgservicecompany.com/dg_se...

Simon Widdowson, Champion

  • 187 Posts
  • 14 Likes
Is the homepage actually a 'page' rather than a post? I've not tried, but the code should work in a page too. There's an option to hide sidebar elements (The everything typepad site mentioned this a while back) too so that only the slideshow and main content show on the frontpage too.

Debra Nettles

  • 2 Posts
  • 0 Likes
My issue with the WOWslider at the moment is I want it to FADE not slide to the left. I have checked recreated and uploaded new code and files but it is still SLIDING! Help. http://www.dgservicecompany.com/

curlygirl, Champion

  • 66 Posts
  • 0 Likes
Are you sure you've re-uploaded all 3 of the .js file and also the .css file?

It looks quite nice sliding left from the right actually. :-)