Copied to clipboard

Flag this post as spam?

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


  • Niels Kristiansen 166 posts 382 karma points
    Jan 26, 2009 @ 15:47
    Niels Kristiansen
    0

    Help for Slideshow solution and how to make 1 or more sidebars (SOLVED)

    Hi umbracians,

    I have a question I hope some of you can help me with.

    Slideshow
    I need to implement a slideshow, but I don't know from start if there is running 1, 3 or more slides in it. How can I make a solution that picks up the slides. I need the following info per slide:

    - Header
    - Text
    - Link
    - Background picture


    Multiple sidebars
    This is almost the same situation. I have a sidebar in the right side of the webpage, but this sidebar can be used more than once (new sidebare with another text). Can you make a "add" functionality to the Document Type?

    Hope someone can help me with the question [-o<

    Kind regards,
    Niels Kristiansen

  • Scott Hugh Alexandar Petersen 349 posts 164 karma points
    Jan 26, 2009 @ 16:08
    Scott Hugh Alexandar Petersen
    0

    Slideshow:
    Here you could make a folder in the media section where you make another folder which states the subject of the images which you are going to put in that folder. Lets says.

    Media
    - Slideshow
    --- Event 1
    ------- Image 1
    ------- Image 2
    ------- Image 3
    ------- Image 4
    ------- Image 5
    --- Event 2
    ------- Image 1
    ------- Image 2
    ------- Image 3
    ------- Image 4
    ------- Image 5

    Now you could create a macro which takes currentMedia as datatype and in the xslt file then run through the folder you select: e.g.: Event 1 and then run through all the children of that folder then you would have a great dynamic way to put images into your slideshow and you would even be able to have this slideshow on more than one page.

    Multiple sidebars
    Here you could in your document type create a "right column" tab and in that tab drop a WYSIWYG editor and then create an xslt file with a macro attached to it and two parameters: headerText (text) and contentText (multiline text) and then allow use in editor make the xslt file write out the headerText and the contentText and then add the macro to your right content editor when you create a page. Then you have a good dinamic way to control it.

    Regards,

  • bob baty-barr 1180 posts 1294 karma points MVP
    Jan 26, 2009 @ 16:29
    bob baty-barr
    0

    i typically add a new tab to the image mediaType called xtraData and add items like caption, header, etc.

    then i use a media picker on the node to select a media folder for the images to be rotated.

  • Niels Kristiansen 166 posts 382 karma points
    Jan 26, 2009 @ 16:56
    Niels Kristiansen
    0

    Thanks for your fast reply.

    Slideshow
    It's not just the image that need to change, so I guess I can't use the media tab, or am I way off? Can I make a new mediaType that's called ex. "slideshow" and insert data directly into that instead. Is this what you meant Bob?

    You can see the example here for the slideshow:
    http://v4cms2.jjas.dk/

    Multiple sidebars
    I don't think I understand completely what you mean here Scott. Could it be done like this:

    - Frontpage
    - Sidebars
    - Sidebar 1
    - Sidebar 2
    - Sidebar 3

    ..and then I can pick them in a dropdown in the content area?

    You can see the example here for the sidebar:
    http://v4cms2.jjas.dk/om-jj-mechatronic-as.aspx

    Sorry if the questions is a little newbie, but it had been sometime since a played with Umbraco.

    Kind regards,
    Niels

  • Scott Hugh Alexandar Petersen 349 posts 164 karma points
    Jan 26, 2009 @ 20:55
    Scott Hugh Alexandar Petersen
    0

    Hey Niels,

    No worries. Read to the end before you do anything because there are 2 solutions to this.

    You can actually create your own media type and then just fill in the details you need for it and fill them out when you create your images. Then you should be well on your way.

    The multiple sidebars are a little different.

    1.
    Take your document type for a page, add a tab call right column, add a property to that tab which is called rightColumn (type: wysiwyg editor also called rich text editor) now create an xslt file Sidebar (check the create macro box) and set up your template here with the fields you want. Before and (I have found it is best practice to somewhat identify the macro variable name with the xslt file. If you do not do this and have Header in another macro you can experience that it will not pass any values). When you are done and have saved your xslt file go to the macros and select the Sidebar macro. Then got to the parameters tab and add two parameters: visible: true, alias: sbHeader name: Header type: text, second parameter: visible: true, alias: sbContent name: Content type: multi line text and then go back to the first tab and select use in editor and save macro.

    Now go to the settings section and edit the template for your page to include your (if it is umbraco v4+) and save.

    Now go to the content section and create a new page or edit a current page and go to Right Column tab and select insert macro (in case the macro button is not there go to the developer section and select data types and richtext editor and wait for all the extensions to load and select the little orange icon which is like this >< and save the data type and go back to the content section and create or edit a page) then in your toolbar select insert macro and select Sidebar and type in your header and content and then click ok then save and publish page and go to the page and you should have one sidebar if you now go back to Right Column tab and clicks insert macro and select sidebar again and click next or ok and then fill in the details header and content and click ok and save and publish then you can refresh your page and you should have two nice looking sidebars.

    If you need a coding example of how it looks in xslt then just say so. Remember if you want these sidebars to be added only to the frontpage and to be visible on all pages (sort of a recursive function) then say so and I can give you an example of this as well.

    2.
    Add a document type called Sidebar with a tab called Content (or whatever you want) add two properties to that tab called Header and Content. Header should be text and Content should be Rich Text Editor.
    Go to your page document type and go to Structure tab and allow your newly created document type to be added under a page element.
    Next go to your developer section and add an xslt file where you use List Sub Pages From Current Page as a template. Now loop through all the node under currentPage with the documentType of Sidebar and write it out in your xslt file, remember to check the Create Macro when you create the xslt file and remember to save the file when you are done editting. Then go to your Settings section and go to templates and select your page template and insert your macro where you want your sidebars to appear.

    Again if you need something more specific just say so.

    Regards,

  • bob baty-barr 1180 posts 1294 karma points MVP
    Jan 26, 2009 @ 20:57
    bob baty-barr
    0

    you are exactly right in your assumption of mediaType creation... or you can just add tabs with properties to the existing image mediaType -- this is what i usually do.

    depending upon the solution you select [a flash based slideshow] or a jquery carousel, the creation of unique identifiers for the macros, divs, etc. would be the only concern.

    here are two examples... one is mine, the other is from the great folks at netcentric

    http://packages.maliciousthinktank.com/rotatordemo/new-rotator-proof-of-concept.aspx

    or

    http://packages.netcentric.be/jcarousel

    and i actually believe the carousel has just been added to the official package repository.

    hope this helps.

  • Niels Kristiansen 166 posts 382 karma points
    Jan 27, 2009 @ 13:18
    Niels Kristiansen
    0

    Thank you so much both of you.

    Bob, I try to take a look on how you did it with the XSLT, macro and so on for the slideshow.

    Scott, could you please help with an example on the sidebar part with the XSLT and Macro? It sounds like the first solution is the right one.

    And again, you two really helped me in the right direction with those issues I had :)


    /Niels

  • Scott Hugh Alexandar Petersen 349 posts 164 karma points
    Jan 27, 2009 @ 21:48
    Scott Hugh Alexandar Petersen
    0

    Niels,

    Which version of Umbraco are you using? Just to find out which version I am going to screen shot.

  • Niels Kristiansen 166 posts 382 karma points
    Jan 28, 2009 @ 08:10
    Niels Kristiansen
    0

    I'm running on a version 4 RC3 with a MySQL as the DB.

  • Scott Hugh Alexandar Petersen 349 posts 164 karma points
    Jan 28, 2009 @ 12:33
    Scott Hugh Alexandar Petersen
    0

    Okay Niels here we go then. Follow the step by step.

    01. Log on to Umbraco
    02. Go to the Settings section
    03. Expand the document types folder
    04. Select your document type you want to add these sidebars to
    05. Go to the Tabs tab
    06. Add a new tab called "Right Column" or whatever you want to
    07. Go to the Generic Properties tab.
    08. Click where it says "Click here to add a new property"
    09. In name type: Sidebar
    10. In alias type: Sidebar
    11. In type select Richtext editor
    12. In tab select "Right Column" or the name you specified for the new tab in step 6.
    13. Click the save button (the blue disk in the top left corner)
    14. Now go to the Developer section
    15. Right click XSLT files and select Create
    16. Check the "Create Macro" boxs if it has not been checked.
    17. In filename type "SidebarBox" or whatever name you want to
    18. Click Create
    19. Expand XSLT files if it has not been expanded
    20. Select SidebarBox or whatever name you gave it in step 17 under XSLT files
    21. Insert the following code into the XSLT file
    [code]
    ]>

    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxml="urn:schemas-microsoft-com:xslt"
    xmlns:umbraco.library="urn:umbraco.library"
    exclude-result-prefixes="msxml umbraco.library">















    [/code]
    22. Hit the save button (the blue disk in the top left corner)
    23. Expand the Macros folder
    24. Select your "Sidebar Box" or whatever name you gave it in step 17
    25. Check Use in editor
    26. Select the Parameters tab
    27. Mark the Show checkbox
    28. In alias type sbHeading
    29. In name type Heading or whatever you want the name of the field to be
    30. In type select text
    31. Click the add button
    32. On row two
    33. Mark the Show checkbox
    34. In alias type sbContent
    35. In name type Content or whatever you want the name of the field to be
    36. In type select textMultiLine
    37. Click the add button
    38. Select the Macro Properties tab
    39. Verify that Render in content is checked (if not check it and hit save)
    40. Go to Settings section
    41. Expand the Templates folder
    42. Select the template you want to edit (where you want your sidebar to appear)
    43. Insert the following code (important if you in step 10 decided to use another alias than Sidebar edit the field property in the following code to whatever alias you gave it):
    [code][/code]
    44. Hit the save button when you are done editting your template
    45. Go to the Developer sections
    46. Expand the datatypes
    47. Select the Richtext editor data type
    48. When all images has been loaded select the Macro check box (usually on the far right column of check boxes)
    49. Hit the save button
    50. Go to the Content section
    51. Open a page that uses the document type you edittted in step 4.
    52. Select the Right Column tab or whatever you called it in step 6.
    53. In the toolbar select the Insert/edit Macro button
    54. Selecttthe Sidebar macro or whatever you called it in step 17.
    55. Hit the ok button
    56. Fill in Heading or whatever you called it in step 29
    57. Fill in Content or whatever you called it in step 35
    58. Hit the Ok button
    59. Now hit the Save and publish button (not the blue disk but the blue disk with a globus behind it)
    60. Now go to your page and see the magic.

    Niels, one drawback here is that you cannot put in lets say a richtext editor in your macro - if you want it to be a Richtext editor field then you should go with option 2 in my former post. (which in some cases is recommended as you then have full control over what you want to add)

    Hope you are able to figure this out.

    Thank you

  • Niels Kristiansen 166 posts 382 karma points
    Jan 28, 2009 @ 14:01
    Niels Kristiansen
    0

    Hi Scott,

    Wauv, that was more than easy. Thanks for the very pin out info about setting up a sidebar.

    It works as it should, though your right about the missing part with the richtext editor. I need the richtext editor to make links and I need the possibility to insert a top picture in the sidebar.

    So I try to make the solution 2 instead.

  • Scott Hugh Alexandar Petersen 349 posts 164 karma points
    Jan 28, 2009 @ 14:34
    Scott Hugh Alexandar Petersen
    0

    Niels,

    The top picture can still be optained I think by adding another parameter to the macro and the xslt file which should be like an mediaCurrent parameter.

    One thing is that you have to upload the picture to the meda section before you can select it from the mediaCurrent.

    If you want a pinout on the second solution say so.

  • Niels Kristiansen 166 posts 382 karma points
    Jan 28, 2009 @ 23:17
    Niels Kristiansen
    0

    Hi Scott,

    I ended up with your second solution, and a solution where the customer can choose his own sidebars with the Macro.

    Here is what I did (with a lot of help from Scott =d> ) for those who want's to do the same:

    Document Types
    1. Create a Document Type and call it ex. "Sidebar Area", you don't have to make a template for it. Save the Document Type
    2. The "Sidebar Area" is only to control the structure when we are going to make the placement of the Sidebar items
    3. Create a Document Type and call it ex. "Sidebar Item", again you don't have to make a template but you are welcome to.
    4. Under the tab "Tabs" make a new one and call it "Content" and click "New tab"
    5. Click the tab "Generic properties"
    6. I need in my example the following new property
    - "Sidebar Image" (Type Media Picker) (Alias SidebarImage)
    - "Sidebar Header" (Type Textstring) (Alias SidebarHeader)
    - "Sidebar Content" (Type Richtext editor) (Alias SidebarContent)
    7. That's it, save the Document type on the blue disk

    XSLT and Macro's
    1. Now it's time for some XSLT magic. I used the following code:
    [code]
    ]>

    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxml="urn:schemas-microsoft-com:xslt"
    xmlns:umbraco.library="urn:umbraco.library"
    exclude-result-prefixes="msxml umbraco.library">
























    [/code]
    2. The code her takes the information from Document Type called "Sidebar Item" and convert it to a html so we can show it in Umbraco
    3. Save the XSLT. I don't know why but you will get an error. It still works though, so ignore the error (am I doing something wrong here?)
    4. Now it's time for the macro
    5. Set the "Use in editor" and "Render content in editor" to true (checkmark) and go to the tab "Parameters"
    6. Here you make yourself a Content Picker:
    - Show - set a checkmark
    - Alias - sbContentPicker
    - Name - Choose Sidebars
    - Type - contentPicker
    7. When your done, save the macro

    The rest
    1. The rest is pretty easy. You need to go to template where you want to place one or more sidebars. Insert the following code: .
    2. After that open your Document Type that relates to the template. Let's call it "Article" in this example. Go to the tab "Tabs" and make a new tab called "Right sidebar"
    3. Click on the tab "Generic properties" and set the following info:
    - Name - Sidebar
    - Alias - Sidebar
    - Type - Richtext editor
    - Tab - Right sidebar
    4. Save it and your done.

    It's now possible to make a sidebar and you can choose yourself how many you want and choose which one of them you want to show on the article page.

    If there is any typos in this document, or something that's not understandable, please let me know and I will try to change it.

    My problems with this solution?
    I only had one, and it was the error on the XSLT. Hope someone can catch the error and remove it. Please feel free to post the change on the XSLT.

    A lot of thanks goes to Scott and his very detailed walkthrough and to Bob for helping me get the idea to move the next step ending up with this solution.

  • Scott Hugh Alexandar Petersen 349 posts 164 karma points
    Jan 29, 2009 @ 08:44
    Scott Hugh Alexandar Petersen
    0

    Hey Niels,

    The error is not an actual error but because you do not check one field before you use it.

    I assume that your error is that Int32 is sort of not in the correct format. So I have posted the correct example here :)
    [code]
    ]>

    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxml="urn:schemas-microsoft-com:xslt"
    xmlns:umbraco.library="urn:umbraco.library"
    exclude-result-prefixes="msxml umbraco.library">




















    [/code]

    Another thing you might want to remove is the imagePicker variable (I removed it in this example).

    Let me know if it works okay :)

    Otherwise, brilliant article and I am glad that I could be of help.

    Regards,

  • Niels Kristiansen 166 posts 382 karma points
    Jan 29, 2009 @ 12:10
    Niels Kristiansen
    0

    Perfect Scott,

    No error and I can see you placed a "if" functionality. I guess it's used if there's no image chosen.

    By the way, another question. Are you going to update your thoughts on the newsletter part you are searching for as well? If you are going for Campaign Monitor or another and better solution?

    Again, thanks for all the help on this issue, I learned a lot.

  • Scott Hugh Alexandar Petersen 349 posts 164 karma points
    Jan 29, 2009 @ 12:26
    Scott Hugh Alexandar Petersen
    0

    Niels,

    I have chosen to start out with an umbraco 3.0.5 (upgraded to 3.0.6) and made my newsletter service there. That way I can create a direct linking area to my homepage and at the same time have all my newsletters available to users if they want to go into the archive. And then I can also link to the pages online if people are not able to see the newsletter in their email program. That way I get to do 3 things at the same time with no extra effort.

    You are very welcome on the help. If you need anything else we are all right here to support you.

    Regards

  • jeb 50 posts 20 karma points
    Feb 10, 2009 @ 17:52
    jeb
    0

    This is very interesting but can't you do all this with just a Richtext control on the Sidebar tab? I'm not quite sure what the benefit of the described technique is but that may be because I do not understand enough of it. (I have got the first version to work, though.)

    What I need is a simple way to set up a standard sidebar that applies to all pages of a given document type or template. The above method appears to need a completely fresh entry for each page. Have I got this right?

  • Scott Hugh Alexandar Petersen 349 posts 164 karma points
    Feb 10, 2009 @ 18:22
    Scott Hugh Alexandar Petersen
    0

    Put a sidebar on your document type and include it in your template and then it should be it. You can select the type of Richtext Editor (RTE) but remember that you will need two tabs to do this. So one tab for your regular content and one tab for your sidebar content as both are probably RTE.

    Regards

  • jeb 50 posts 20 karma points
    Feb 10, 2009 @ 19:52
    jeb
    0

    Hi Scott, Thanks for the quick turnaround!

    I actually have what you suggest right now and it's quite easy to cut and paste the content from a previous instance of the page, but it has to be done every time a new page is created.

    I would prefer to have a single place to enter sidebar content and then have it appear on every page's sidebar automatically. So just one cut and paste into one RTE would be all the work an editor would need to do. Any subsequent change to the sidebar content would be reflected in all pages immediately (or, at least, immediately after they were republished). I'm trying out the idea of a separate, invisible, document for the content, but extracting the content from it is an XSLT problem that I'm going to have to struggle with. If you know of a better way to do this, please let me know.

    Cheers,

    Jeb.


  • Scott Hugh Alexandar Petersen 349 posts 164 karma points
    Feb 10, 2009 @ 20:43
    Scott Hugh Alexandar Petersen
    0

    In your template just select that it should be recursive then it will appear on every page.

  • jeb 50 posts 20 karma points
    Feb 12, 2009 @ 17:03
    jeb
    0

    I have it set as recursive in the call:

    [code]



    [/code]

    but I figure that "recursive" may mean "search through children of the current node". In other words, if the target field is on a sibling page or is a child of another parent then it cannot be accessed in this way. Ever.

    That's my current thinking.

    Just so you know, the content is already rendering nicely on another page through which I intend to maintain it using Runway. That page uses the same syntax but without the recursive.

    Thanks,

    Jeb.

  • Scott Hugh Alexandar Petersen 349 posts 164 karma points
    Feb 12, 2009 @ 18:56
    Scott Hugh Alexandar Petersen
    0

    Shouldn't recursive be equal to yes?

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies