Umbraco – No physical template file was found

Using an underscore in a document type will cause an exception of

No physical template file was found for template

Delete the template and remove the underscore

Advertisements

Umbraco image library and SVG images

In previous versions of the CMS core, all links to images have been stored as a single text string which would mean that developers wouldn’t have to check for a type of media image that was consumed on an Umbraco page.

With the introduction of the image cropper type, the way in which images are stored in umbraco have changed.

There are two ways in which images are stored in the cmsPropertyData table
With no focus points

{ "src": "http://www.mysite.com/images.jpg", crops: [] }

With focus points

{ "focalPoint": { "left": 0.5, "top": 0.5 }, "src": "http://www.mysite.com/images.jpg" }

If you look in the cmsPropertyType table, this should effect types Upload image (6) and Thumbnail Image (135)

In your umbraco project, you would use the following code to extract the new image.

UmbracoHelper umbracoHelper = new Umbraco.Web.UmbracoHelper(Umbraco.Web.UmbracoContext.Current);
var mediaItem = umbracoHelper.Media(content.GetPropertyValue(fieldName));
Var imageSrc = mediaItem.umbracoFile.src

This works fine as long as you are not consuming any media item that falls under the .jpg, .png, .gif. Umbraco detects the SVG format as a file type and sets the cmsPropertyData Upload file(24) to a physical URL of the file that needs to be used.

This now depending on how you serve your images to your templates. I use an extension method for the IPublishedContent and a fieldName, which I can call in my views.

Here I need to check the type of object that is being brought back via the IPublishedContent. The new image cropper images will return an object of Umbraco.Web.Models.ImageCropDataSet and an SVG will return a string.
Calling the src field name on an mediaItem.umbracoFile when returning an SVG will throw an exception.

I have chosen to check the type of what is being returned. Check out this great post to get a good example of looking up a type in a switch that doesnt use heavy reflection.
http://stackoverflow.com/questions/7252186/switch-case-on-type-c-sharp/7301514#7301514

We have added the following code to the extension method.

var ts = new TypeSwitch()
    .Case((Umbraco.Web.Models.ImageCropDataSet x) => result = mediaItem.umbracoFile.src)
   .Case((string x) => result = mediaItem.umbracoFile);

ts.Switch(mediaItem.umbracoFile);

We can now pick either an SVG or an image from the media library, it wont throw an exception as you will be returning either the src of the image cropper object, or the URL of the uploaded file type.

Related Links!

If you need to combine internal links and external links in the same Umbraco picker, you will need to use the related links picker.

This will generate a JSON array. This is how you extract the links on the other end.

 

var obj = JsonConvert.DeserializeObject<JArray>(test);

foreach (var a in obj)
{
var type = a.Value<string>(“type”);

var newWindow = a.Value<bool>(“newWindow”);
var title = a.Value<string>(“title”);

if (type.IsNullOrWhiteSpace() == false)
{
if (type == “internal”)
{
var linkId = a.Value<int>(“internal”);
var link = Umbraco.NiceUrl(linkId);
<li><a href=”@link” @(newWindow ? “target=_blank” : “”)>@title</a></li>
}

if(type == “external”)
{
var linkTitle = a.Value<string>(“caption”);
var link = a.Value<string>(“link”);
<li><a href=”@link” @(newWindow ? “target=_blank” : “”)>@title</a></li>
}
}
}

or

public static MvcHtmlString RelatedLinksGenerator(this JToken source, string urlCSS)
{
var helper = new UmbracoHelper(UmbracoContext.Current);
var type = source.Value(“type”);
var newWindow = source.Value(“newWindow”);
var title = source.Value(“title”);

var anchor = new TagBuilder(“a”);
string link = string.Empty;

if(type.Equals(“internal”))
{
var linkId = source.Value(“internal”);
link = helper.NiceUrlWithDomain(linkId);
}

if(type.Equals(“external”))
{
var linkTitle = source.Value(“caption”);
link = source.Value(“link”);
}

anchor.MergeAttribute(“href”, link);
anchor.MergeAttribute(“class”, urlCSS);
anchor.SetInnerText(title);

return MvcHtmlString.Create(anchor.ToString(TagRenderMode.Normal));
}

Umbracoarmus! Casting your current page object

Imagine this, You have a IPublished content object that you’re using in your view. It is set up like this

var currentPage = Umbraco.CurrentPage();

You can access your property values like so

@currentPage.MyProperty

But when you call any other methods on myProperty such as .HasValue you get an exception as the value throws an exception. Annoying right.
You just need to cast the property as follows

((Umbraco.Web.Models.DynamicPublishedContent)CurrentPage).GetProperty(“MyProperty”).HasValue

Then you can gain access to the property.

ALL the Shares!!

Customizing the content that you need your users to share on social media couldn’t be easier. I have integrated this with the Umbraco CMS to allow for web administrators to tailor the content that is shared.

Add the following code to your project page and amend accordingly. Once the code is deployed to a publicly accessible URL (This will not work on your localhost!), you will need to run the URL through the following validators to ensure that your content is being found correctly.

https://developers.facebook.com/tools/debug/og/object/

https://dev.twitter.com/cards/types/summary-large-image
https://cards-dev.twitter.com/validator

Place the following in the head of your page

<meta property=”og:url” content=”@Umbraco.NiceUrlWithDomain(CurrentPage.Id)” />
<meta property=”og:type” content=”article” />
<meta property=”og:title” content=”@CurrentPage.facebook_title” />
<meta property=”og:description” content=”@CurrentPage.facebook_summary” />
<meta property=”og:image” content=”@CurrentPage.MediaFile(“facebook_thumbnail_image”).Replace(“https”, “http”)” />
<meta property=”og:image:secure_url” content=”@CurrentPage.MediaFile(“facebook_thumbnail_image”)” />

<meta name=”twitter:card” content=”photo” />
<meta name=”twitter:site” content=”@Umbraco.NiceUrlWithDomain(CurrentPage.Id)” />
<meta name=”twitter:title” content=”@CurrentPage.Twitter_Title” />
<meta name=”twitter:description” content=”@CurrentPage.twitter_summary” />
<meta name=”twitter:image” content=”@CurrentPage.MediaFile(“twitter_thumbnail_image”)” />
<meta name=”twitter:url” content=”@Umbraco.NiceUrlWithDomain(CurrentPage.Id)” />

Place the links in the body content.

<a href=”@String.Format(“https://www.facebook.com/sharer/sharer.php?u={0}”, Umbraco.NiceUrlWithDomain(CurrentPage.Id))” >Facebook</a>

<a href=”@String.Format(“http://pinterest.com/pin/create/link/?url={0}&media={1}&description={2}”, Umbraco.NiceUrlWithDomain(CurrentPage.Id), CurrentPage.MediaFile(“pintrest_thumbnail_image”), CurrentPage.pintrest_summary)”></a>

<a href=”@String.Format(“http://twitter.com/intent/tweet?status={0}”, Umbraco.NiceUrlWithDomain(CurrentPage.Id))”>Twitter></a>

Umbraco. MultiNodeTreePicker

As standard, Umbraco sets the default datatype to most text based datatypes to Nvarchar(500).

Commonly this is used for selecting tree nodes from the database, which stores the data as a comma delimited string which roughly works out to about 100 selected nodes, providing the nodes are four digits long.

In older versions of the CMS, you could change the type that the data is stored in. However, version 7 has this feature removed.

If you find the Id of the node that you need to extend and run the following update statement on the umbraco database (be sure to back up before you do this!)

UPDATE cmsDataType
SET dbType = ‘Ntext’
WHERE nodeId = 123456

This will change the data type of the picker and will allow for text based string to be longer than 500 characters