The last couple of months (since joining the umbraco corp) I’ve been involved in the development of Umbraco Contour.
It turned out to be an amazing product! Detailed info and some screencast can be found on the official Contour product page.
You can also try Contour before buy, by installing a trial straight from the package repository.
You can relate stylesheets to the richttext editor datatype in umbraco, sometimes this will cause an unwanted effect. Like a background color that you don’t want, …
But this can easily be changed.
You can target the richttext editor with the class
.mceContentBody
So by appending this to the related stylesheet, you have more control over the styling in the richttext editor datatype.
(make sure to clear your browser cache, to view the result)
The last couple of weeks I’ve gotten lots of request for the poll package sourcecode.
So I’ve added the sourcecode to the poll project page on our.umbraco.org (attached files).
Enjoy!
Some time ago I created a solution for generating pdf documents from your umbraco content (and from the outputted html). I always wanted to make a package out of this but since the project relies on the commercial pdf generating library ABCpdf this isn’t possible. The main reason for using ABCpdf is that it’s html to pdf options are pretty decent.
So instead of releasing a package I’ll share the sourcecode and I’ll give an overview of how to use it.
Download: PDFGen sourcecode
Once you have ABCpdf installed (it’s possible to download a trail and you can also apply for a free license) the installation is just a mather of dropping some files in your umbraco instance.
First you’ll need to define a pdf template, this can be done in the PDFGen.config file which should
be in the /config folder.
Lets look at an example config file:
<?xml version=”1.0″ encoding=”utf-8″ ?>
<PDFGen PermitPrint=”False” PermitExtractContent=”False”>
<!– Header–>
<Text FontName=”Arial” FontSize=”12″ FontColor=”0,0,0″ X1=”20″ Y1=”40″ X2=”500″ Y2=”700″
IsRecurring=”true”>my header text</Text>
<Image File=”/media/950/joblistpdfhead.jpg” X=”20″ Y=”670″ Width=”570″ Height=”100″ IsRecurring=”true”/>
<!– Content –>
<Property RequestParam=”test” PropertyAlias=”title;@createDate” FontName=”Arial” FontSize=”18″
FontColor=”0,0,0″ X1=”25″ Y1=”620″ X2=”500″ Y2=”650″ IsRecurring=”false”>{0} - {1}</Property>
<Property RequestParam=”" PropertyAlias=”info” FontName=”Arial” FontSize=”11″ FontColor=”0,0,0″ X1=”25″
Y1=”180″ X2=”530″ Y2=”630″ IsRecurring=”false”></Property>
<Property RequestParam=”" PropertyAlias=”linkURL” FontName=”Arial” FontSize=”11″ FontColor=”0,0,0″
X1=”40″ Y1=”715″ X2=”520″ Y2=”740″ IsRecurring=”false”></Property>
<!– Footer –>
<Text FontName=”Arial” FontSize=”6″ FontColor=”0,0,0″ X1=”25″ Y1=”20″ X2=”500″ Y2=”30″
IsRecurring=”true”>Copyright mysite 2009 — All Rights Reserved.</Text>
</PDFGen>
After the xml declaration (yes the config file is an xml file) you have the PDFGen root node.
On this node you can set wether the generated pdf files are printable and if it is possible to extract
content (copy,paste).
<PDFGen PermitPrint=”False” PermitExtractContent=”False”>
The child nodes of the root PDFGen node will be used to define the pdf. There are a couple of
possibilities:
<Text FontName=”Arial” FontSize=”12″ FontColor=”0,0,0″ X1=”20″ Y1=”40″ X2=”500″ Y2=”700″
IsRecurring=”true”>my header text</Text>
A text node is used to add some static text on the pdf document it has several attributes
<Image File=”/media/950/joblistpdfhead.jpg” X=”20″ Y=”670″ Width=”570″ Height=”100″ IsRecurring=”true”/>
An image node is used to add an image to the pdf document.
An overview of it’s attributes:
<Property RequestParam=”test” PropertyAlias=”title;@createDate” FontName=”Arial” FontSize=”18″
FontColor=”0,0,0″ X1=”25″ Y1=”620″ X2=”500″ Y2=”650″ IsRecurring=”false”>{0} – {1}</Property>
A property node is used to add umbraco content node property data to the pdf document.
An overview of it’s attributes:
The innertext can be used to add some static text around the property or if you have multiple
propertyaliases you must define how they will be placed (simular to string.format).
<RenderedOutput RequestParam=”" Template=”" X1=”25″ Y1=”620″ X2=”500″ Y2=”650″ IsRecurring=”false” />
This will fetch the rendered output of a page, if no requestparam is used it will use the id one and if no template alias is defined it will use that default template of that page.
An overview of it’s attributes:
Once installed and if you have a working config file. You can use pdfgen by calling /umbraco/pdfgen.aspx?id=1234 (the id is the id of the umbraco document).
If you have defined other RequestParams in your config file (like headerid) you just need to do:
/umbraco/pdfgen.aspx?id=1234&headerid=2345
It’s also possible to have multiple config files (just copy the pdfgen.config) if you want to use anohter config file you can do it like this:
/umbraco/pdfgen.aspx?id=1234&pdfconfig=pdfconfigcopy.config
pdfconfigcopy.config is the filename of the configfile (must be in the /config dir)
Simon Justesen, has a great post describing how to add new sections and trees inside umbraco (part 1, part 2).
To make it easier to get started, I thought I would provide some starter sourcecode for a demo custom section.
You can download the sourcecode here
Steps to get this running on your umbraco installation:
- Copy the assembly (CustomUmbracoSection.dll) to the \bin directory
- Copy the file custom.gif to \umbraco\images\tray\ directory
- Make a ‘custom’ directory in \umbraco and copy the editCustom.aspx page to \umbraco\custom directory
- Insert a new row in the umbracoApp table
INSERT INTO [umbracoApp]
([sortOrder]
,[appAlias]
,[appIcon]
,[appName])
VALUES
(9
,‘custom’
,‘custom.gif’
,‘custom’)
- Insert a new row in to umbracoAppTree table
INSERT INTO [umbracoAppTree]
([treeSilent]
,[treeInitialize]
,[treeSortOrder]
,[appAlias]
,[treeAlias]
,[treeTitle]
,[treeIconClosed]
,[treeIconOpen]
,[treeHandlerAssembly]
,[treeHandlerType])
VALUES
(0
,1
,0
,‘custom’
,‘custom’
,‘custom’
,‘.sprTreeFolder’
,‘.sprTreeFolder_o’
,‘CustomUmbracoSection’
,‘Trees.LoadCustomTree’)
- Update the \umbraco\config\create\UI.xml file, add:
<nodeType alias=”initcustom”>
<header>Custom</header>
<usercontrol>/create/simple.ascx</usercontrol>
<tasks>
<create assembly=”CustomUmbracoSection” type=”Tasks.CustomTasks” />
<delete assembly=”CustomUmbracoSection” type=”Tasks.CustomTasks” />
</tasks>
</nodeType>
After these steps are completed you will have to enable the new section for your user.
Then it should show up as the last icon in the sections (called custom, with a HAL’s camera eye icon).
In the custom section you’ll find this:
So just a sample node that will open a demo edit page.
I’ve created my share of umbraco packages and thought I’d try to share some tips/insights.
Creating packages is easy, the built-in package creator makes it super simple and with package actions you can perform additional common tasks (like updating the xsltextensions) without having to write a single line of code.
It really takes a minimal effort to package something up that you made, even if it’s very project specific it should be possible to isolate the functionality and package it up.
Even a simple package can be a great help, so don’t hesitate and share
To avoid conflicts and overwriting other existing items when installing a package, make sure you have unique and meaningful names
Starting these with your name or company name followed by a project name should be enough to make them unique
FE: Nibble.Umb.Poll
A unique and meaningful name that links them back to the package, so it easy to see that they are part of a package
FE: not style.css but starrating.css
not list.xslt but bloglistposts.xslt
placing these in a new unique folder inside the /usercontrols folder makes it easy to see that they are part of a package
FE: /usercontrols/Nibble.Umb.Poll/poll.ascx
place these in the /config folder (again, with a unique and meaningful name)
Package are really easy to install but in some cases the package installation might fail. So it’s always great to provide some manual installation instructions, just in case.
You might have created a package with a simple site in mind, but don’t forget they can/will also be used on multilingual sites, site running a different database engine. Or in case it’s a datatype, will be used with Canvas, autoform, doc2form. It’s a great plus if this is taken into account.
If the package only works with a certain umbraco version and up or if it only works on sql server, don’t forget to mention this to avoid that people install it on non supported installations.
I’ve also added this post to the wiki on our.umbraco.org, if you have anything to add/change (or correct my bad spelling) please do so .
I finally got round to polish and package the umbraco poll I made some time ago. So here it is …
The package installs the following:
The document types (Polls, Poll, Poll Answer) will be used to setup the polls.
So you’ll have a Polls document that will contain several Poll documents and these will have several Poll Answer documents beneath it.
After you have setup a poll with some answers in your content area you can get the poll on your page.
First add a reference to the installed stylesheet (/css/Nibble.Umb.Poll.css) and then place the Poll macro on your template.
Please note that:
The poll macro has several parameters:
So depending on the parameters (Submit On Select and Hide Submit) your poll can look like:
or (with submit button)
The Results can look like this:
Sorted:
Width Total Votes:
You can download the package here: http://our.umbraco.org/projects/poll
Add a ‘find the nearest shop/dealer/….’ to your site in a mather of minutes with this umbraco package.
Example of implementation (early screencast and demo at http://lab.nibble.be/):
Using the package:
After installation the first thing you need to do is to setup the Nibble.Umb.Locator.config file. This can be done be editing the file or you can also do this in the settings of the Locator datatype that should have been added by the installer.
The config file is basicly just used to store the different google maps api keys.
Once this is setup the next step is to add a results page (or alternative template), this is the page where the search result will be displayed.
On that template you’ll need to add the Locator macro
There are several parameters:
Both Address Extra and Multiple Results Caption support use of dictionary items (so you can use #itemname).
With the marcro in place the final step if to setup a form that will post to the page containing the macro.
<form method=”get” action=”/dealers/LocatorResult.aspx”>
<fieldset>
<label for=”s”>Address/postcode: </label>
<input type=”text” name=”s” />
<label for=”s”>Radius: </label>
<select name=”radius”>
<option value=”0″>Please select</option>
<option value=”100″>100 miles</option>
<option value=”1000″>1000 miles</option>
<option value=”10000″>10000 miles</option>
</select>
<button type=”submit”><span>Go</span></input>
</fieldset>
</form>
You can download the package on Our Umbraco (Umbraco’s new community site), sourcecode is available on codeplex.
First some info on the setup:
After installing runway to get a basic site up and running I created a folder in the media section and added several images
On my homepage document type I added a ‘media picker’ property called ‘Pictures’. There I’ll select the media picture folder.
All that’s left now is to write some xslt that will select a random image from the media folder.
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp “ ”> ]>
<xsl:stylesheet
version=”1.0″
xmlns:msxsl=”urn:schemas-microsoft-com:xslt”
xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”
xmlns:msxml=”urn:schemas-microsoft-com:xslt”
xmlns:umbraco.library=”urn:umbraco.library”
xmlns:myFuncs=”urn:my-scripts”
exclude-result-prefixes=”msxml myFuncs umbraco.library”>
<xsl:output method=”xml” omit-xml-declaration=”yes” indent=”yes”/>
<xsl:param name=”currentPage”/>
<xsl:variable name=”imageRoot”
select=”$currentPage/ancestor-or-self:: node[@level = 1]/data [@alias = ‘Pictures’]”/>
<msxsl:script implements-prefix=”myFuncs” language=”JavaScript”>
<![CDATA[
var myArray = new Array();
function random(){
var index = Math.floor(Math.random() * myArray.length);
return myArray [index];
}
function addtoArray(item){
myArray.push(item);
}
]]>
</msxsl:script>
<xsl:template match=”/”>
<!– start writing XSLT –>
<xsl:call-template name=”buildArray”>
<xsl:with-param name=”arrayNodes”
select=”umbraco.library:GetMedia($imageRoot, ‘true’)/node/data[@alias=’umbracoFile’]”/>
</xsl:call-template>
<xsl:value-of select=”myFuncs:random()”/>
</xsl:template>
<xsl:template name=”buildArray”>
<xsl:param name=”arrayNodes”/>
<xsl:for-each select=”$arrayNodes”>
<xsl:value-of select=”myFuncs:addtoArray(string(./text()))”/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
This snippet will output the relative url of a random picture from inside the selected media folder ( like /media/44/dsc00033.jpg ).
RandomPicture xslt: download
A common thing when dealing with members on your site is that they need to be approved after registration before they can access the protected area on your site.
This post describes a simple way of doing that.
On the umbraco member type I have a True/false property with the alias active. If this is set to true on the member he is an ‘active’ member and is allowed to log in.
The only thing that is needed is to override the ValidateUser method of the UmbracoMembershipProvider. So make a custom class, inherit from umbraco.providers.members.UmbracoMembershipProvider and override the method (make sure to reference umbraco.providers).
Instead of just checking if there is a member with the supplied loginname and password we’ll add some extra code that will check if the member has his active property set to true. If that is the case we return true, in all other cases we return false.
namespace Nibble
{
public class CustomMemberShipProvider : umbraco.providers.members.UmbracoMembershipProvider
{
public override bool ValidateUser(string username, string password)
{
umbraco.cms.businesslogic.member.Member m =
umbraco.cms.businesslogic.member.Member.GetMemberFromLoginNameAndPassword(
username, EncodePassword(password));
if (m == null)
{
return false;
}
else
{
try
{
if (m.getProperty(“active”).Value.ToString() == “1″)
{
return true;
}
else
{
return false;
}
}
catch
{
return false;
}
}
return (m != null);
}
}
}
Final step is to modify the web.config so that our custom membership provider is used instead of the default umbraco one. So Just change the type attribute on the umbraco membership provider to the type of the custom membership provider.
<add name=”UmbracoMembershipProvider” type=”Nibble.CustomMemberShipProvider”
enablePasswordRetrieval=”false” enablePasswordReset=”false” requiresQuestionAndAnswer=”false”
defaultMemberTypeAlias=”CobraMember” passwordFormat=”Hashed” />
That’s it, now the asp:login control will only login the member if he has his active property set to true.