creating an image with an internal url

Eddie Foreman 215 posts 288 karma points

Apr 19, 2010 @ 18:50

Hi All

Have just started using Umbraco, and am very impressed. But unforunalty I need some help/advice.

I would like to create an unordered list of all the images in a media folder which has been selected by the editior. The markup should be as below:

<ul>
<li><a href="/home.aspx"><img src="/media/1295/falcon_logo.jpg" alt="Falcon Logo" /></a></li>
<li><a href="/googlemap.aspx"><img src="/media/1371/google.jpg" alt="Google Map" /></a></li>
...
</ul>

I have mananged to acheive this, although I'm not sure if its the best approach and if it's a bit of a hack. Here what I have done.

1) Created a new media type image, which has a two additional Textstring properties called 'altText' and 'internalUrl'.

2) Within the Homepage document type I Created a Media Picker with the alias of 'testImage'.

3) Created an xslt to loop throught the selected folder and create each list item.

...
<xsl:template match="/">
  <xsl:variable name="mediaFolderID" select="number($currentPage/data [@alias = 'testImage'])" />
  <xsl:if test="$mediaFolderID &gt; 0">
    <xsl:variable name="mediaID" select="umbraco.library:GetMedia($mediaFolderID, 'false')" />
    <xsl:if test="count($mediaID/node) &gt; 0">
      <xsl:for-each select="umbraco.library:GetMedia($mediaFolderID, 'false')/node">
        <xsl:if test="./data [@alias = 'umbracoFile'] != 0">
          <li>
            <a href="{./data[@alias = 'internalUrl']}">
              <img src="{./data [@alias = 'umbracoFile']}">
                <xsl:attribute name="alt">
                  <xsl:value-of select="./data [@alias = 'alttext']" />
                </xsl:attribute>
              </img>
            </a>
          </li>
        </xsl:if>
      </xsl:for-each>
    </xsl:if>
  </xsl:if>
</xsl:template>
...

4) Added the Macro to the master template.

As stated above all appears to work correctly. My main issue is that I would prefer if the users could select the internal url from within Umbraco. I looked at the 'Related Links' but decided not to use this as 1) I could not extract the url from the Link attribute and 2) I thougth that the datatype was a bit overkill for what i want to acheive.

In addition is it possible to change the href/src attribute URLS to match the stucture of the media folder. E.g /media/1295/falcon_logo.jpg to /media/logos/falcon_logo.jpg.

Any help or advice would be greatly appericated.

Eddie

P.s Did I need to create the new image media type?

Copy Link

Eddie Foreman 215 posts 288 karma points

Apr 20, 2010 @ 01:23

Hi All

I think I almost there. I still using the new media image type, but have change the internalurl property to the content picker and have updated the xlst to:

...
<xsl:template match="/">
  <xsl:variable name="mediaFolderID" select="number($currentPage/data [@alias = 'testImage'])" />
  <xsl:if test="$mediaFolderID &gt; 0">
    <xsl:variable name="mediaID" select="umbraco.library:GetMedia($mediaFolderID, 'false')" />
    <xsl:if test="count($mediaID/node) &gt; 0">
      <xsl:for-each select="umbraco.library:GetMedia($mediaFolderID, 'false')/node">
        <xsl:if test="./data [@alias = 'umbracoFile'] != 0">
          <li>
            <a href="{umbraco.library:NiceUrl(./data[@alias = 'internalUrl'])}">
              <img src="{./data [@alias = 'umbracoFile']}">
                <xsl:attribute name="alt">
                  <xsl:value-of select="./data [@alias = 'alttext']" />
                </xsl:attribute>
              </img>
            </a>
          </li>
        </xsl:if>
      </xsl:for-each>
    </xsl:if>
  </xsl:if>
</xsl:template>
...

Which allows the editor to choose the internalUrl from a the main site tree.

Thanks in advance.

Eddie

Copy Link

Eddie Foreman 215 posts 288 karma points

Apr 20, 2010 @ 01:52

Hi All

Think I've got a good solution. Still using the new media image type with the internalUrl (content picker), but have updated the xlst so that the <a> tag is only produced when the internalUrl has been selected.

<xsl:template match="/">
  <xsl:variable name="mediaFolderID" select="number($currentPage/data [@alias = 'testImage'])" />
  <xsl:if test="$mediaFolderID &gt; 0">
    <xsl:variable name="mediaID" select="umbraco.library:GetMedia($mediaFolderID, 'false')" />
    <xsl:if test="count($mediaID/node) &gt; 0">
      <xsl:for-each select="umbraco.library:GetMedia($mediaFolderID, 'false')/node">
        <xsl:if test="./data [@alias = 'umbracoFile'] != 0">
          <li>
            <xsl:choose>
              <xsl:when test="./data[@alias = 'internalUrl'] != ''">
                <a>
                <xsl:attribute name="href">
                  <xsl:value-of select="umbraco.library:NiceUrl(./data[@alias = 'internalUrl'])"/>
                </xsl:attribute>
                  <img src="{./data [@alias = 'umbracoFile']}">
                    <xsl:attribute name="alt">
                      <xsl:value-of select="./data [@alias = 'alttext']" />
                    </xsl:attribute>
                  </img>
                </a>
              </xsl:when>
              <xsl:otherwise>
                <img src="{./data [@alias = 'umbracoFile']}">
                  <xsl:attribute name="alt">
                    <xsl:value-of select="./data [@alias = 'alttext']" />
                  </xsl:attribute>
                </img>
              </xsl:otherwise>
            </xsl:choose>
          </li>
        </xsl:if>
      </xsl:for-each>
    </xsl:if>
  </xsl:if>
</xsl:template>

Please let me know if this is a good approach or if there a more efficient way to do this. Especially without the new image type>

Thanks

Eddie

Copy Link

is working on a reply...

Flag this post as spam?

Creating an Image with an internal URL