Reusable "Panel" with option to select / edit data for the panels from the Content Section
Hi
I am just starting with Umbraco 4.7. The job I have in hand is to come up with a CMS application. There are a few requirements which I have and I don't know enough about Umbraco to get started with implementing these. Any help would be really appreciated.
I have a requirement where i need to creaet panels, for e.g., a panel may be an image slider (using jQuery), a news section on the right hand side of the page etc
It there a way in which I can enable a content user to be able to select and add any panel (one or more of different type) to the page
Then for each panel add different data. For example if I want 2 image sliders on a page. Letting a content user to add 2 image slider panel. And let them select different images for each panel.
How can I than read these panel data in my templates?
Please can someone advise me on how I can implement these.
Also, I have bought Umbraco.tv subscription and could not find any video example to acheive this. If there exists one, please can you point me to the video.
i recently had a similar task for a client who needed a website with modular content in different areas of each page. What i do is: programmatically add two different folders underneath a document (page) when it is created.
The first contains content for the main section of this page, the second for the right column of the page.
The editor can create as many subnodes in each of these folders. She can choose from different kinds of document types (e.g. text element, gallery, tag cloud,...).
These subnodes are in fact just used as content modules in the page above and not as pages themselfes (they don't have a template and are hidden from navigation).
To render theses modules i included the following XSLT (called RightColumnRenderer) in the template of the dedicated page above ("SMNR 1" in this case):
I don't know if this is the best way to achieve your needs, but it works ;-) There are some other things to think of, for example when you are using Examine. I will write a blog post the next days which will contain all the information necessary.
I am very new to Umbraco and XSLT, so I am not sure if I understood your solution completely. But if the editor wanted to add the "Press Kit" in various pages, will they have to create a duplicate of the "Press kit" under every page they want to add it?
When you get time to write a blog post, please can you post the link to your blog post here.
sorry this was indeed just a very rough overview of the solution.
In my case it was not necessary to have reusable content modules. It is possible too, but not part of my solution. I will post the link to my blog post when it's ready.
i don't have the time to go into detail, but you can use a subtree in the content section as a container for all your content modules that you want to reuse on different pages. Like this:
To pick the modules on the page i would recommend that you use "uComponents Multi-Node Tree Picker".
This still doesn not give the content manager an option to add different content for the same shared content module.
For e.g., If I wanted to use a jQuery slider on multiple pages and would want an option to create a panel (may be data type) which can accept 3 images and a few text strings. Than I need to be able to let content manager decide if or not they want to add this panel on any page, also give them option to choose different images and text for each page.
Please can some one provide me an idea / technique to acheive this in Umbraco?
Reusable "Panel" with option to select / edit data for the panels from the Content Section
Hi
I am just starting with Umbraco 4.7. The job I have in hand is to come up with a CMS application. There are a few requirements which I have and I don't know enough about Umbraco to get started with implementing these. Any help would be really appreciated.
I have a requirement where i need to creaet panels, for e.g., a panel may be an image slider (using jQuery), a news section on the right hand side of the page etc
Please can someone advise me on how I can implement these.
Also, I have bought Umbraco.tv subscription and could not find any video example to acheive this. If there exists one, please can you point me to the video.
Much appreciated.
Guru
Hi,
i recently had a similar task for a client who needed a website with modular content in different areas of each page.
What i do is: programmatically add two different folders underneath a document (page) when it is created.
The editor can create as many subnodes in each of these folders. She can choose from different kinds of document types (e.g. text element, gallery, tag cloud,...).
These subnodes are in fact just used as content modules in the page above and not as pages themselfes (they don't have a template and are hidden from navigation).
To render theses modules i included the following XSLT (called RightColumnRenderer) in the template of the dedicated page above ("SMNR 1" in this case):
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [
<!ENTITY nbsp " ">
]>
<xsl:stylesheet
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" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:ucomponents.cms="urn:ucomponents.cms" xmlns:ucomponents.dates="urn:ucomponents.dates" xmlns:ucomponents.io="urn:ucomponents.io" xmlns:ucomponents.media="urn:ucomponents.media" xmlns:ucomponents.members="urn:ucomponents.members" xmlns:ucomponents.nodes="urn:ucomponents.nodes" xmlns:ucomponents.search="urn:ucomponents.search" xmlns:ucomponents.strings="urn:ucomponents.strings" xmlns:ucomponents.urls="urn:ucomponents.urls" xmlns:ucomponents.xml="urn:ucomponents.xml" xmlns:filesystem="urn:filesystem" xmlns:issuu="urn:issuu" xmlns:scribd="urn:scribd" xmlns:slideshare="urn:slideshare" xmlns:vimeo="urn:vimeo" xmlns:youtube="urn:youtube" xmlns:tagsLib="urn:tagsLib"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ucomponents.cms ucomponents.dates ucomponents.io ucomponents.media ucomponents.members ucomponents.nodes ucomponents.search ucomponents.strings ucomponents.urls ucomponents.xml filesystem issuu scribd slideshare vimeo youtube tagsLib ">
<xsl:import href="ContactBox.xslt"/>
<xsl:import href="LinkList.xslt"/>
<xsl:import href="TagsPage.xslt"/>
<xsl:import href="MediaElement.xslt"/>
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:variable name="nodeTypeFolderContentRightColumn" select="1167"/>
<xsl:template match="/">
<xsl:for-each select="$currentPage/*[@nodeType = $nodeTypeFolderContentRightColumn]/*[@isDoc]">
<xsl:variable name="nodeTypeCurrent" select="@nodeType"/>
<xsl:choose>
<xsl:when test="$nodeTypeCurrent = 1186">
<xsl:call-template name="renderContactboxElement" />
</xsl:when>
<xsl:when test="$nodeTypeCurrent = 1205">
<xsl:call-template name="renderLinklistElement" />
</xsl:when>
<xsl:when test="$nodeTypeCurrent = 1210">
<xsl:call-template name="renderTagsElement" />
</xsl:when>
<xsl:when test="$nodeTypeCurrent = 1368">
<xsl:call-template name="renderMediaElement" />
</xsl:when>
</xsl:choose>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
it calls the appropiate XSLT template for each element by its nodeType.
Here you can see for example the XSLT for the Linklist element:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet
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" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:ucomponents.cms="urn:ucomponents.cms" xmlns:ucomponents.dates="urn:ucomponents.dates" xmlns:ucomponents.io="urn:ucomponents.io" xmlns:ucomponents.media="urn:ucomponents.media" xmlns:ucomponents.members="urn:ucomponents.members" xmlns:ucomponents.nodes="urn:ucomponents.nodes" xmlns:ucomponents.search="urn:ucomponents.search" xmlns:ucomponents.strings="urn:ucomponents.strings" xmlns:ucomponents.urls="urn:ucomponents.urls" xmlns:ucomponents.xml="urn:ucomponents.xml" xmlns:filesystem="urn:filesystem" xmlns:issuu="urn:issuu" xmlns:scribd="urn:scribd" xmlns:slideshare="urn:slideshare" xmlns:vimeo="urn:vimeo" xmlns:youtube="urn:youtube" xmlns:tagsLib="urn:tagsLib"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ucomponents.cms ucomponents.dates ucomponents.io ucomponents.media ucomponents.members ucomponents.nodes ucomponents.search ucomponents.strings ucomponents.urls ucomponents.xml filesystem issuu scribd slideshare vimeo youtube tagsLib ">
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:template name="renderLinklistElement">
<div class="bGreenBox">
<div class="bGreenBoxBottom">
<h2>
<xsl:value-of select="headline"/>
</h2>
<xsl:if test="linkList/multi-url-picker/url-picker">
<xsl:for-each select="linkList/multi-url-picker/url-picker">
<xsl:if test="position() != 1">
<hr class="white" />
</xsl:if>
<a href="{url}" class="darkGreenMore">
<xsl:if test="new-window = 'True'">
<xsl:attribute name="target">_blank</xsl:attribute>
</xsl:if>
<xsl:choose>
<xsl:when test="link-title != ''">
<xsl:value-of select="link-title"/>
</xsl:when>
<xsl:otherwise>
(Link title not specified)
</xsl:otherwise>
</xsl:choose>
</a>
</xsl:for-each>
</xsl:if>
</div>
</div>
</xsl:template>
</xsl:stylesheet>
I don't know if this is the best way to achieve your needs, but it works ;-)
There are some other things to think of, for example when you are using Examine. I will write a blog post the next days which will contain all the information necessary.
HTH
Matthias
Hi Matthias
Thank you so much for the reply.
I am very new to Umbraco and XSLT, so I am not sure if I understood your solution completely. But if the editor wanted to add the "Press Kit" in various pages, will they have to create a duplicate of the "Press kit" under every page they want to add it?
When you get time to write a blog post, please can you post the link to your blog post here.
Thanks
Guru
Hi Guru,
sorry this was indeed just a very rough overview of the solution.
In my case it was not necessary to have reusable content modules. It is possible too, but not part of my solution.
I will post the link to my blog post when it's ready.
Best
Matthias
Hi
Any more approach (s) to meet my requirements please?
Thanks
Guru
Hi Guru,
i don't have the time to go into detail, but you can use a subtree in the content section as a container for all your content modules that you want to reuse on different pages. Like this:
To pick the modules on the page i would recommend that you use "uComponents Multi-Node Tree Picker".
You will find the uComponents package here: http://our.umbraco.org/projects/backoffice-extensions/ucomponents
Matthias
Hi
This still doesn not give the content manager an option to add different content for the same shared content module.
For e.g., If I wanted to use a jQuery slider on multiple pages and would want an option to create a panel (may be data type) which can accept 3 images and a few text strings. Than I need to be able to let content manager decide if or not they want to add this panel on any page, also give them option to choose different images and text for each page.
Please can some one provide me an idea / technique to acheive this in Umbraco?
Much appreciated
Thanks
Guru
is working on a reply...