Skip to main content

Umbraco: Display an Image, if one has been selected, using the Media Picker in an XSLT Macro

Umbraco: Display an Image, if one has been selected, using the Media Picker in an XSLT Macro

The follwoing XSLT file shows how to display an image from the Media Picker in Umbraco. 
The important bit is highlighted.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<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"
 exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:template match="/">
   <xsl:variable name="getimg" select="$currentPage/rightColumnImage"/>  <!-- 1. Get the Image -->   <xsl:if test="string($getimg)!=''"> <!--2. If an Image has been chossen, then do the following -->             <div id="myimage">           <!-- 3. Just a CSS div to hold the image-->                 <xsl:variable name="media" select="umbraco.library:GetMedia($currentPage/rightColumnImage, 0)" />  <!-- 4 assign the image to a variable 'media' -->                <img src="{$media/umbracoFile}" alt="{$media/altText}" /> <!--5. Write out the Image -->
      <!--<xsl:value-of select="$getimg" disable-output-escaping="yes"/>-->
    </div>
         </xsl:if>

  <xsl:variable name="getcaption" select="$currentPage/rightColumnImageText"/>
  <xsl:if test="$getcaption != ''">
   <div id="mycaption">
      <xsl:value-of select="$getcaption" disable-output-escaping="yes"/>
   </div>
         </xsl:if>
</xsl:template>
</xsl:stylesheet>

Comments

Popular posts from this blog

Create a .NET Contact Form that Gets the Last Url Visited in C# Can also be Used in Umbraco

This is a Simple Contact From done in C# .Net and also can be used in Umbraco.  Paste the code in to Visual Web Developer for a better view. The important bits are coment in the second file.  One of the Commented out lines highlights how to get the mailto address from an Umbraco field. The code Below includes the myContactForm.ascx.cs codebehind file and the myContactForm.ascx file. 1) The myContactForm.ascx file:  <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ContactFormforPublications.ascx.cs" Inherits="usercontrols_ContactFormPublications" %> <div class="contact-form" id="contactForm" runat="server">     <h3>Request a Publication</h3>     <div class='int'>         <form runat="server">         <asp:Panel DefaultButton="contactFormSubmit" runat="server">         <fieldset>             <div class='

Umbraco 7 - C# Razor - Passing a parameter variable from a Template to a Partial View.

Passing a parameter variable from a Template to a Partial View Example - Passing a Page Id to a Partial View. In the example below we are passing 3 page Ids (1090. 1091, 1092) to a partial view.  The Partial View will display the details for each of these nodes on a home page.  See final output below. 1) In your Template: @Html.Partial("HomePageLinksToLandingPages", new ViewDataDictionary{{ "pageId", 1090}}) @Html.Partial("HomePageLinksToLandingPages", new ViewDataDictionary{{ "pageId", 1091}}) @Html.Partial("HomePageLinksToLandingPages", new ViewDataDictionary{{ "pageId", 1092}}) 2) The Partial View: @inherits Umbraco.Web.Mvc.UmbracoTemplatePage @{ var thisPageId = 1090; var stringPage = @ViewData["pageId"]; thisPageId = Convert.ToInt32(stringPage); } <div class="col-md-4"> <arti