|
|
Rank: Newbie
Joined: 3/12/2008
Posts: 11
Location: Westcliff-on-Sea, Essex, UK
|
Ok...so, I've been bumbling around with Umbraco for a few months now, and have generally been very pleased with what I have been able to achieve with just a little knowledge and a curious mind at my disposal (and with the help of the community, of course!). There was always going to come the day when my puny brain was unable to figure how to achieve something in particular though, and today happens to be that day! Am kinda hoping that one of you lovely people may be able to help me out...
So, here's the deal - I have a client requirement for product 'driveboxes' to be available at varying points on a new site, either pointing to a product page within the site itself, or directing users off to an external site instead. These boxes are to be available via a content picker and in their simplest form are images with a rollover state (it's important that this state is available). However, although I have worked in a similar way in making galleries and so on, I can't for the life of me figure out the XSLT to achieve this. In the base form, I have the driveboxes sitting on a doctype containing an image picker, a content tree picker for an internal URL, and textstring for an external URL.
Has anybody out there done something similar, or would at least be able to point me in the right direction, XSLT-wise? I'm ok with fetching document properties in the main, it's just what I do with them afterwards on this occasion that's perplexing me. I need a eureka moment badly.
Thanks in advance, guys
Iain
|
|
Rank: Addict
Joined: 7/19/2006
Posts: 820
Location: Benfleet, Essex, UK
|
Hi Iain, So if I understand what you are trying to do is that either this link will goto another node within the site or will be an external URL. What you can do is an <xsl:choose> and see if there is node picked then make the URL use the node or if the textstring is populated then use the external URL. But if both is pouplated you will have to decide which is more important. If you need any further help, just shout. Warren
Warren Buckley an Umbraco MVP 08-09 & level 1 certified developer
|
|
Rank: Newbie
Joined: 3/12/2008
Posts: 11
Location: Westcliff-on-Sea, Essex, UK
|
Hey man, Gracias for the swift response. I have the URL stuff working properly now (a typo in my code before was making it harder to get working than it should have been. Grrr!). Anyway, what I require now is for a pre-selected image to have a rollover state. At the moment my code is as follows, which only assigns the alt value and resizes the image using ImageGen: Quote:<img>
<xsl:attribute name="alt">
<xsl:value-of select="$currentItem/@nodeName"/>
</xsl:attribute>
<xsl:attribute name="src">
<xsl:text>/umbraco/ImageGen.ashx?image=</xsl:text>
<xsl:value-of select="umbraco.library:GetMedia(., 'false')/data [@alias='umbracoFile']" /> <xsl:text>&width=216</xsl:text>
</xsl:attribute>
</img> but the client requirement is for images to change dynamically on rollover. Any suggestions on the best way to achieve this? Thanks again, Iain
|
|
Rank: Addict
Joined: 7/19/2006
Posts: 820
Location: Benfleet, Essex, UK
|
OK Iain. Best way to do this would be with CSS in my opinion. Code:
<style>
a.UniqeIDClass
{
background-image:url(/umbraco/ImageGen.ashx?image=.........)
}
a.UniqeIDClass:hover
{
background-image:url(/umbraco/ImageGen.ashx?image=.........)
}
Warren Buckley an Umbraco MVP 08-09 & level 1 certified developer
|
|
Rank: Newbie
Joined: 3/12/2008
Posts: 11
Location: Westcliff-on-Sea, Essex, UK
|
Trouble is, dude, that I'm drawing in several images from a content picker and that there can be any number, or none at all, on a page at any given time, so I was hoping that there might be a way to deal with this dynamically within XSLT. To show you what I'm doing thus far, here's some more of the surrounding code (no laughing, please) Code:<!-- First define the alias of your node picker and run through its descendants --> <xsl:variable name="mcpNodeSet" select="$currentPage/data[@alias='col1DriveBoxPicker']"/> <xsl:for-each select="$mcpNodeSet/descendant::node"> <!-- Then get the XML for these nodes --> <xsl:variable name="currentItem" select="umbraco.library:GetXmlNodeById(.)"/> <!-- Now run through any fields that you want displayed --> <xsl:if test="($currentItem/data[@alias='col1DriveBoxImage']/ descendant::node!='')"> <xsl:variable name="images" select="$currentItem/data[@alias='col1DriveBoxImage']"/> <xsl:for-each select="$images/descendant::node"> <!-- And now link the images and resize them dynamically using ImageGen --> <a><xsl:attribute name="href"> <xsl:choose> <xsl:when test="string($currentItem/data[@alias='internalURL']) != ''"> <xsl:value-of select="umbraco.library:NiceUrl($currentItem/data[@alias='internalURL'])" /> </xsl:when> <xsl:when test="string($currentItem/data[@alias='externalURL']) != ''"> <xsl:value-of select="$currentItem/data[@alias='externalURL']" /> </xsl:when> <xsl:otherwise> <xsl:value-of select="umbraco.library:NiceUrl($currentPage/@id)"/> </xsl:otherwise> </xsl:choose> </xsl:attribute> <img> <xsl:attribute name="alt"> <xsl:value-of select="$currentItem/@nodeName"/> </xsl:attribute> <xsl:attribute name="src"> <xsl:text>/umbraco/ImageGen.ashx?image=</xsl:text> <xsl:value-of select="umbraco.library:GetMedia(., 'false')/data [@alias='umbracoFile']" /> <xsl:text>&width=216</xsl:text> </xsl:attribute> </img> </a> </xsl:for-each> </xsl:if> </xsl:for-each> but I was kind of hoping that there might be a way to deal with hover states within this code somehow. Does that make any kind of sense? I can't brain today - I have the dumb. Iain
|
|
Rank: Addict
Joined: 7/19/2006
Posts: 820
Location: Benfleet, Essex, UK
|
I would assign the a tag with a unique class like the nodeID (@id) <a href="" class="something_{$currentItem/@id}"> </a> then a stylesheet in the body <style> a.something_{$currentItem/@id} { background:url(/umbraco/ImageGen.ashx?image=........) } a.something_{$currentItem/@id}:hover { background:url(/umbraco/ImageGen.ashx?image=........) } </style> Just my thoughts out loud. Alternatively you ask the user/client to upload one image (with both images in) static and rollover state (stacked on each other) and with CSS just use background position to move it on rollover? Or finally use some jQuery to change the image URL or rollover (not good method in my opinion, if JS disabled it wont work)
Warren Buckley an Umbraco MVP 08-09 & level 1 certified developer
|
|
Rank: Newbie
Joined: 3/12/2008
Posts: 11
Location: Westcliff-on-Sea, Essex, UK
|
Yeah, definitely avoiding any JS solution for this. Am I right in understanding that I would have to know the amount of these boxes and have the images for their states in advance for the below CSS solution to work though? The ideal situation for the client on this occasion is going to be one in which they are able to upload a Pixy rollover image or whatever and have some XSLT dynamically generate the background image and rollover state directly on the site for them, therefore allowing them to create an infinite of these boxes if they want. I'm only able to have my current code display something wrapped in image tags at the moment, so no rollover there.
Cheers dude (and apologies if I misread your response)
Iain
|
|
Rank: Addict
Joined: 7/19/2006
Posts: 820
Location: Benfleet, Essex, UK
|
Iain without getting fully into your code and structure this is how I have been suggesting to do it. Code: <xsl:for-each select="$images/descendant::node"> <!-- And now link the images and resize them dynamically using ImageGen --> <a> <xsl:attribute name="href"> <xsl:choose> <xsl:when test="string($currentItem/data[@alias='internalURL']) != ''"> <xsl:value-of select="umbraco.library:NiceUrl($currentItem/data[@alias='internalURL'])" /> </xsl:when> <xsl:when test="string($currentItem/data[@alias='externalURL']) != ''"> <xsl:value-of select="$currentItem/data[@alias='externalURL']" /> </xsl:when> <xsl:otherwise> <xsl:value-of select="umbraco.library:NiceUrl($currentPage/@id)"/> </xsl:otherwise> </xsl:choose> </xsl:attribute> <xsl:attribute name="class"> imagerollover_<xsl:value-of select="$currentItem/@id"/> </xsl:attribute> </a> <style> a.imagerollover_<xsl:value-of select="$currentItem/@id"/> { display:block; height:100px; width:216px; background-image:url(/umbraco/ImageGen.ashx?image= <xsl:value-of select="umbraco.library:GetMedia(., 'false')/data [@alias='umbracoFile']" />&width=216) } a.imagerollover_<xsl:value-of select="$currentItem/@id"/>:hover { display:block; height:100px; width:216px; background-image:url(/umbraco/ImageGen.ashx?image= <xsl:value-of select="umbraco.library:GetMedia(., 'false')/data [@alias='umbracoFile']" />&width=216) } </style> </xsl:for-each>
Warren Buckley an Umbraco MVP 08-09 & level 1 certified developer
|
|
Rank: Fanatic
Joined: 10/9/2006
Posts: 460
Location: batavia, IL
|
@Iain -- how are you, bother! I think Chuck from my old job did something similar with a product navigation he built a month or so back... i believe he presented it at the showoff at CGUS -- his solution was based on custom css classes however... which is about the only thing i can think of -- and you could use an image naming convention to simplify... let me pass this along to chuck and see what he says. Cheers!
bootnumlock - aka bob baty-barr My Packages Site: http://packages.maliciousthinktank.comBusiness Blog: http://www.maliciousthinktank.com/blogPersonal site: http://www.baty-barr.comLevel 1 Certified!
|
|
Rank: Newbie
Joined: 3/12/2008
Posts: 11
Location: Westcliff-on-Sea, Essex, UK
|
@warren - Cheers, dude. My own schoolboy errors when executing this aside, this idea was precisely what I needed. Several beers heading your way soon, amigo!
@bootnumlock - I'm good thanks, Bob. Turns out that Warren's suggestion was just the ticket, but I'd be interested to learn of any other proposed solutions, so please do keep me posted on Chuck's response. Hope things are all good in your neck of the woods anyhow. Kudos on the MTT packages btw. Nice work, fella!
Cheers guys,
Iain
|
|
|
Guest |