Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Ciwan 39 posts 69 karma points
    Mar 20, 2012 @ 17:18
    Ciwan
    0

    JavaScript Sliders

    Hello Friends

    I am very new to Umbraco, and have just finished watching the video on Document Types, pretty powerful stuff.

    However I am a little confused on how I can use Document Types to achieve a Content Managed JavaScript/jQuery Slider.

    I know that I can setup a property on my homepage Document Type called [ jQuery Slider ] and bang all my code in there, but that isn't really Content Management, that is still coding, but doing it via the Umbraco Amdin Panel.

    To the vetrans among you, the solution might be obvious, but please bear in mind I am very new to Umbraco, and would greatly appreciate some links, steps, clear explanations ... etc

    Thank You.

    Ciwan

  • Grant Thomas 291 posts 324 karma points
    Mar 20, 2012 @ 23:29
    Grant Thomas
    1

    First things first: Umbraco has undergone some fundamental changes through its release and stating your version is necessary (at least to provide any practical solution, or not waste the time of others if they provide one for the 'wrong' version.) Also, please define what you mean by 'slider'? Do you mean an image gallery slider-type-thingy?

    Other than that there is at lease some general advice to give on this topic...

    Okay, so allowing code to be content managed is a terrible idea, don't ever do this. For even if you don't have much trouble getting it out the way you want it, if a user has access to it they will eventually break it, to be sure (and it won't be their fault!) - disaster waiting to happen. Also, code has a proper place, and that's under the 'Developer' and 'Settings' tabs. Much of the code will just be laid out as you would normally construct a website, the only difference being using Umbraco's own programming model somewhere in between (to generate final output.)

    So let's break this down into it's parts, and hopefully it will come out in some coherently digestable way (though I'll leave determining details as an exercise for the reader, consider it part of your learning curve.):

    • You would create a Document Type, forget any properties on it for now, we just need some kind of document defined
    • You would create a Template* and allow the Document Type to have that template applied to it
    • You would create a Script and a Stylesheet (this is getting awfully familiar, isn't it?)
    • Going back to your Template you would reference the Style and Script simply withelements

    Now, if you go to Content and create a page of the Document Type and make sure the Template it applied to it, do a publish and then follow link to which it is published you will see, well, not much yet, but looking at the source you would notice at least that the links to your Style and Script are present and if you got the paths correct they loaded.

    From this point on there a few ways to proceed, and some will have preferences, but I'll just pick one for the sake of example. We need images for our gallery, so...

    • You would create a folder in the Media sectionnamed, say, 'SliderImages'
    • You would upload images to this folder (and at some point, the user/client could too - without affecting your actual work and behaviour thereof)
    • You would write some code to iterate the items in that folder and formulate output

    This is where versions depart and practicality of this post thins out. We now need an 'intermediate' layer of logic so we can turn the folder of images into a collection of elements on the web page. In Umbraco 5 you would code in Razor enabled environment, but with Umbraco versions pre-5 (not sure which 4.x version introduced MVC proper) you would use XSLT. Anyway, implementations aside, the principle is the same.

    • You would go back to your template and reference the code file (very similar to the Style and Script!) using Umbraco's custom way of doing so (the UI has a selector, so until you learn how to type them out you can just use that)
    • Now loading the published page again you would see the images are output based on how you told it to do so
    • You're out of foreign land, you can now fiddle with your Style and write your Javascript in the Script file we created to manipulate the elements just as any other jQuery gallery would. 
  • Ciwan 39 posts 69 karma points
    Mar 20, 2012 @ 23:50
    Ciwan
    0

    2 minutes after posting my Initial Post, I had noticed that I had forgotten to state my Umbraco version number, and when I tried editing my post, I got an error. Here's the thread that I created of the error on the Feedback Sub-Forum. Still, apologies for my forgetfullness in stating the version initially.

    As I am a big fan of MVC, and cannot stand Web Forms, I went with Umbraco version 5.

    Thank You for the explanation and general principles involved Grant Thomas. I shall attempt to follow your outline of steps and see how things progress.

    The Sliders can either be Image Sliders, or Content Sliders (text and images).

    Is the Template Creation process the same for Web Forms ? The reason I ask is because I noticed some videos on Umbraco.tv that talked about Templates, but they were not for version 5. If I watch them, do you think they will help ?

    Thank You once again.

    Ciwan 

     

  • Grant Thomas 291 posts 324 karma points
    Mar 22, 2012 @ 09:30
    Grant Thomas
    0

    Hm, Template creation is very similar, the only difference really being that, embedded within the markup, we use Razor with 'section's and stuff, as opposed to WebForms with 'ContentPlaceHolders' etc. But yes, ultimately, they're very much the same.

    As for the videos, that's your call really, and depending on how you learn as an individual could prove valuable; I can't necessarily recommend any of them though. and I don't think any of them will be 'up-to-date' to exemplify use of the new Umbraco features anyway.

  • Ciwan 39 posts 69 karma points
    Mar 22, 2012 @ 09:36
    Ciwan
    0

    Thank You Grant Thomas.

    Have you made any previous attempts at creating a Template for Umbraco 5 ? For the past 2 days I have been stuck at getting my simple Template to load. I have asked at the [ UI Questions ] Sub-Forum, but unfortunatley I've had no replies.

    Will I be correct in assuming Umbraco 5 isn't that big in the community yet ? :(

  • Grant Thomas 291 posts 324 karma points
    Mar 22, 2012 @ 09:44
    Grant Thomas
    0

    Yes, Umbraco 5 is still very new: I only noticed the other day that it was only release end of January this year, so still very immature in that sense. I'm proceeding with it because this is ultimately the way Umbraco is going - but if you're doing anything 'serious', then I would hesitate.

    For your other question, I'm on my way to work in a moment, but might be able to look into helping you a bit later on that.

  • Ciwan 39 posts 69 karma points
    Mar 22, 2012 @ 09:45
    Ciwan
    0

    That would be great Grant, I'd greatly appreciate it. Thanks once again.

Please Sign in or register to post replies

Write your reply to:

Draft