Nibble

Archive for the 'Quick tip' Category


Richtext editor datatype and related stylesheets 1

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)

Displaying a random image/banner on your umbraco site 9

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

randompicturemediajpg

On my homepage document type I added a ‘media picker’ property called ‘Pictures’. There I’ll select the media picture folder.

randompicturecontent

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 [ &lt;!ENTITY nbsp “&#x00A0;”> ]>
<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

Fetching the nodeid in a custom datatype 2

Just a quick tip following the custom datatypes posts (Creating custom umbraco datatypes , Storing parseable xml data in a datatype ).

When creating a datatype you might at some point need to have the current document’s nodeid. Like if you want to insert some extra data in a custom table.

Since the datatypes are also used by autoform/doc2form , liveediting and not only in the umbraco backend the best approach is to fetch it like this:

((umbraco.cms.businesslogic.datatype.DefaultData)_data).NodeId

Converting Linebreaks 3

When using the textbox multiple datatype in umbraco you might want to convert the linebreaks into html <br> tags. This can be done just by checking a checkbox in the insert umbraco field dialog when inserting a field on your template. Just look for the convert linebreaks checkbox.

image

 

image 

 

In xslt you can also do this by using the umbraco library method umbraco.library.ReplaceLineBreaks(System.String)

So that would like a this:

<xsl:value-of select=”umbraco.library:ReplaceLineBreaks(data [@alias = ‘youralias’])”/>

Custom document type icons/thumbnails 3

When creating or editing a  document type you are able to select an icon and a thumnail image from a dropdown.

shopdocumenttype

The icon will show up in the content section and the thumbnail will be used in the ‘Create Page’ dialog. Giving different document types a different icon/thumbnail is a good way to keep the content section a bit more editor friendly.

It’s also verry easy to add your own custom icons/thumbnails the only thing you need to do is add your images to the folders where these images are stored

Thumbnails:

\umbraco\images\thumbnails

Icons:

\umbraco\images\umbraco

So to add this icon shop  to the icons dropdown I just need to copy it into the right directory. Afterwards it will show up in the icon dropdown and I can use this on my document types.

customicon

Why Umbraco rocks - alternative templates 9

The main building blocks of umbraco are as you know document types and templates. When creating a document types the umbraco interface will give you the options to also create a templates that is then setup as the default template on that document type. If you open up the details of a document types you’ll be able to see the ‘allowed templates’ part on the info tab.

image

Document types aren’t limited to 1 template and this is great! You can easily swith to an ‘alt template’ by simply editing the url of your page.

So if you would have a homepage.aspx and you want to apply templatex on it you can do this by changing the url to

homepage/templatex.aspx

another option is this

homepage.aspx?alttemplate=templatex

In the beginning I didn’t use alternative templates that much but it’s a great way to keep your content section clean.

For example an email to a friend page, instead of making this a new documenttype and adding it to the content en then passing the id of the page you want to email…

You can simply add an email to a friend template and call it up as an alternative template, that way you won’t need to pass the nodeid because you are still on the same node !

Enabling the script editor 3

This feature was introduced at codegarden 07 as a new feature in v3 but is was disabled in the release because of some issues with cross browser compatibility ( and maybe other bugs, …). I noticed that it works fine in firefox but don’t use it with ie.

Before:

image

After:

image

Just locate the

<scriptDisableEditor>true</scriptDisableEditor>

 

In the config\umbracoSettings.config file and change it to false.

Quick tip - Rich text editor and line breaks 2

I have had several editors asking me this:

“When I hit enter I create a new paragraph but I just want a line break”

Solution: when you want to insert a line break you hit shift enter