We are trying to figure out how to fix our homepage slider within Umbraco. Our homepage slider is located at http://online.saintleo.edu. Within Umbraco, there is a "Link" option to be able to hyperlink the slides, however, whenever we enter something, nothing happens.
Our thoughts are that maybe there is a setting that isn't turned on or missing from Javascript.
Screen shot of link area in Umbraco below, and homepage slider .js file text is pasted below that.
As always, thank you in advance for your time and assistance.
Thank you for your response. I do have developer access in Umbraco, but am new to this system and am having trouble navigating to the code that you are requesting.
If you have access to the files in your local environment then fire up sublime text or whatever code editor you fancy and then search the whole solution for "scenic-bg", which is the id of the container of the slides from what I can tell by having a look at your source code.
The id must be set in a macro (Razor or XSLT) or in a template masterpage or .cshtml file and from there you should be able to figure out what the macro alias is and then go to either the file (If the search returns it) or the developer section to look up the macro and see what file that macro is pointing too.
When you know what file and what type of macro that is doing the magic then please let us know as we can then probably guide your further.
I've been searching and searching and still can't seem to find the Macro. The "scenic-bg" is listed in the masterpage code below. Does this help? I do appreciate your time and assistance with this!
Sorry, missed your latest reply - Sometimes I can't keep track of all the response e-mails I get so occasionally I miss a post.
However I just had a glance at your code above and it was exactly what I was looking for. I'm not really sure what is going on since it seems that there has been added a codebehind to your masterpage, which is not the best way to work with Umbraco and data from Umbraco.
But it seems to me that you need to figure out where the Visual Studio project for your site is since you need to have a look in the HomePage.master.cs file, which is the codebehind of your master template. As I mentioned this is not the way one would usually render data from Umbraco.
So you need to figure what is going on in that file and it's not necessarily easy since it's probably a part of a visual studio project that needs to be build before you can see the changes made.
But in the line above you can see that the only thing that is ever fetched is the image - the url is never written.
No apology necessary, I know how busy you are and appreciate your help and time.
I will start looking into those files and see if I can't see anything.
In the meantime, here is the text from the HomePage.master.cs file that you suggested digging into.
Thanks as always!
using System; using System.Collections; using System.Configuration; using System.Data; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls;
using System.Xml; using System.Collections.Generic; using Elliance.Umbraco.Extensions; using System.Web.Script.Serialization;
public partial class masterpages_HomePage : System.Web.UI.MasterPage {
public SaintLeoRotator.RotatorImage firstSlide; public string otherSlides;
List<SaintLeoRotator.RotatorImage> randomPics = new List<SaintLeoRotator.RotatorImage>();
Random rnd = new Random(); int index = rnd.Next(wrappedPics.Count);
// get the first slide. firstSlide = new SaintLeoRotator.RotatorImage(wrappedPics[index]); wrappedPics.Remove(wrappedPics[index]); // randomize list of the rest of the slides. while (wrappedPics.Count > 0) { index = rnd.Next(wrappedPics.Count); SaintLeoRotator.RotatorImage nextImage = new SaintLeoRotator.RotatorImage(wrappedPics[index]); randomPics.Add(nextImage); wrappedPics.Remove(wrappedPics[index]); }
JavaScriptSerializer serializer = new JavaScriptSerializer(); otherSlides = serializer.Serialize(randomPics); } }
And this is where my skills stop since I'm a frontend developer and C#/ASP.NET is not what I do best. But there is some rotator logic and as you can see there is a
Homepage Slider - Hyperlink issue
Good Morning,
We are trying to figure out how to fix our homepage slider within Umbraco. Our homepage slider is located at http://online.saintleo.edu. Within Umbraco, there is a "Link" option to be able to hyperlink the slides, however, whenever we enter something, nothing happens.
Our thoughts are that maybe there is a setting that isn't turned on or missing from Javascript.
Screen shot of link area in Umbraco below, and homepage slider .js file text is pasted below that.
As always, thank you in advance for your time and assistance.
$(document).ready(function(){
$.each(rotatorSlides, function(index, value){
$('<li>')
.append($('<img>').attr({
'src': value.PhotoUrl,
'width': '1280',
'height': '490',
'alt': value.PhotoCaption
})
).appendTo('#scenic-bg ul');
});
$('#bg-rotator').cycle({
'easeIn': 'easeInCubic',
'easeOut': 'easeOutCubic',
'speed' : 750,
'sync': true,
'timeout': 10000
});
});
Hi Jason
The slider is probably being generated either by XSLT or Razor. Do you have developer access to the code? Or?
If you're able to find the code for it in these macroes, then it will be easier to help you out.
The javascript is just controlling the slider cycle and has nothing to do with the missing link rendering.
Hope this helps.
/Jan
Hi Jan,
Thank you for your response. I do have developer access in Umbraco, but am new to this system and am having trouble navigating to the code that you are requesting.
Hi Jason
If you have access to the files in your local environment then fire up sublime text or whatever code editor you fancy and then search the whole solution for "scenic-bg", which is the id of the container of the slides from what I can tell by having a look at your source code.
The id must be set in a macro (Razor or XSLT) or in a template masterpage or .cshtml file and from there you should be able to figure out what the macro alias is and then go to either the file (If the search returns it) or the developer section to look up the macro and see what file that macro is pointing too.
When you know what file and what type of macro that is doing the magic then please let us know as we can then probably guide your further.
Hope this helps.
/Jan
Hi Jan,
I've been searching and searching and still can't seem to find the Macro. The "scenic-bg" is listed in the masterpage code below. Does this help? I do appreciate your time and assistance with this!
<%@ Master Language="C#" MasterPageFile="~/masterpages/Main.master" AutoEventWireup="true" CodeFile="HomePage.master.cs" Inherits="masterpages_HomePage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="PageStyles" runat="server">
<style>
#scenic-bg
{
background-image: none;
background-color: #c4c4c4;
height: 490px;
min-width: 940px;
}
#page {padding-top: 432px;}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PageScripts" runat="server">
<script type="text/javascript">
var rotatorSlides = <%= otherSlides %>;
</script>
<script type="text/javascript" src="<%= VirtualPathUtility.ToAbsolute("~/scripts/libs/jquery.easing.1.3.js") %>"></script>
<script type="text/javascript" src="<%= VirtualPathUtility.ToAbsolute("~/scripts/libs/jquery.cycle/jquery.cycle.min.js") %>"></script>
<script type="text/javascript" src="<%= VirtualPathUtility.ToAbsolute("~/scripts/homepage-rotator.js") %>"></script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="BackgroundScene" runat="server">
<div id="scenic-bg">
<ul id="bg-rotator">
<li>
<img src="<%= firstSlide.PhotoUrl %>" alt="<%= firstSlide.PhotoCaption %>" width="1280" height="490" />
</li>
</ul>
</div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="MainContent" runat="server">
<div id="page-body" class="inner alternate home">
<div id="primary-content">
<h1 class="tk-ff-meta-web-pro"><%= (!UmbracoItem.IsNullOrEmpty("alternatePageHeading") ? UmbracoItem.Get("alternatePageHeading") : "Welcome to Saint Leo University")%></h1>
<% if (!UmbracoItem.IsNullOrEmpty("introCopy")) { %>
<p class="intro"><umbraco:Item ID="Item1" Field="introCopy" runat="server" /></p>
<umbraco:Item ID="Item2" Field="subIntroCopy" runat="server" />
<% } %>
<% if (!UmbracoItem.IsNullOrEmpty("introCopy")) { %>
<hr class="star" />
<% } %>
<umbraco:Item ID="Item3" Field="bodyCopy" runat="server" />
<div class="line">
<% for (int i = 0; i < SiteUtils.WrappedHomePageRouterItemNodes.Count; i++)
{
UmbracoNodeWrapper w = SiteUtils.WrappedHomePageRouterItemNodes[i];
%>
<% if (i == 2)
{ %>
</div>
<div class="line">
<% } %>
<div class="col half<%=i%2!=0 ? " last-col" : "" %>">
<h2><%=w.GetItem<string>("headline") %></h2>
<div class="teaser">
<img src="<%=w.GetItem<string>("photo") %>" alt="" />
<div class="teaser-copy">
<p><%=w.GetItem<string>("rolloverCopy") %></p>
</div>
</div>
<a class="more" href="<%=umbraco.library.NiceUrl(w.GetItem<int>("link")) %>"><%=w.GetItem<string>("linkText") %></a>
</div>
<% } %>
</div>
</div>
<div class="aside">
<a id="apply-now" href="/applynow"><img style="width: 210px; height: 36px; padding-bottom: 15px; padding-top: 15px;" src="/Ebook/Sidebar-ApplyNow-210x36.png" alt="" align="left" /></a><br /> <br /> <br /> <br /> <a id="explore-programs" href="/academics.aspx"><img style="width: 210px; height: 36px; padding-bottom: 15px;" src="/Ebook/Sidebar-ExplorePrograms-210x36.png" alt="" align="left" /></a><br />
<!--HubSpot Call-to-Action Code -->
<span class="hs-cta-wrapper" id="hs-cta-wrapper-d08e83de-357d-4e5b-bbfb-c768bf2ce180">
<span class="hs-cta-node hs-cta-d08e83de-357d-4e5b-bbfb-c768bf2ce180" id="hs-cta-d08e83de-357d-4e5b-bbfb-c768bf2ce180">
<!--[if lte IE 8]><div id="hs-cta-ie-element"></div><![endif]-->
<a href="http://cta-redirect.hubspot.com/cta/redirect/206683/d08e83de-357d-4e5b-bbfb-c768bf2ce180"><img class="hs-cta-img" id="hs-cta-img-d08e83de-357d-4e5b-bbfb-c768bf2ce180" style="border-width:0px;" src="https://no-cache.hubspot.com/cta/default/206683/d08e83de-357d-4e5b-bbfb-c768bf2ce180.png" /></a>
</span>
<img src="/images/125yrLogo_GreenAndGold.png" style="width: 185px; height: 311px; padding-left: 15px;" />
<script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script>
<script type="text/javascript">
hbspt.cta.load(206683, 'd08e83de-357d-4e5b-bbfb-c768bf2ce180');
</script>
</span>
<!-- end HubSpot Call-to-Action Code -->
<saintleo:LeftCallouts id="LeftCallouts1" runat="server" />
</div>
</div>
</asp:Content>
Anyone?
Hi Jason
Sorry, missed your latest reply - Sometimes I can't keep track of all the response e-mails I get so occasionally I miss a post.
However I just had a glance at your code above and it was exactly what I was looking for. I'm not really sure what is going on since it seems that there has been added a codebehind to your masterpage, which is not the best way to work with Umbraco and data from Umbraco.
However I suspect something is going on here
But it seems to me that you need to figure out where the Visual Studio project for your site is since you need to have a look in the HomePage.master.cs file, which is the codebehind of your master template. As I mentioned this is not the way one would usually render data from Umbraco.
So you need to figure what is going on in that file and it's not necessarily easy since it's probably a part of a visual studio project that needs to be build before you can see the changes made.
But in the line above you can see that the only thing that is ever fetched is the image - the url is never written.
I hope this can help you any further.
/Jan
Hi Jan,
No apology necessary, I know how busy you are and appreciate your help and time.
I will start looking into those files and see if I can't see anything.
In the meantime, here is the text from the HomePage.master.cs file that you suggested digging into.
Thanks as always!
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml;
using System.Collections.Generic;
using Elliance.Umbraco.Extensions;
using System.Web.Script.Serialization;
public partial class masterpages_HomePage : System.Web.UI.MasterPage
{
public SaintLeoRotator.RotatorImage firstSlide;
public string otherSlides;
protected void Page_Load(object sender, EventArgs e)
{
XmlNodeList picNodes = UmbracoItem.CurrentPage.SelectNodes("RotatingBackgroundPhotosFolder/BackgroundPhoto");
List<UmbracoNodeWrapper> wrappedPics = UmbracoNodeWrapper.WrapList(picNodes);
List<SaintLeoRotator.RotatorImage> randomPics = new List<SaintLeoRotator.RotatorImage>();
Random rnd = new Random();
int index = rnd.Next(wrappedPics.Count);
// get the first slide.
firstSlide = new SaintLeoRotator.RotatorImage(wrappedPics[index]);
wrappedPics.Remove(wrappedPics[index]);
// randomize list of the rest of the slides.
while (wrappedPics.Count > 0)
{
index = rnd.Next(wrappedPics.Count);
SaintLeoRotator.RotatorImage nextImage = new SaintLeoRotator.RotatorImage(wrappedPics[index]);
randomPics.Add(nextImage);
wrappedPics.Remove(wrappedPics[index]);
}
JavaScriptSerializer serializer = new JavaScriptSerializer();
otherSlides = serializer.Serialize(randomPics);
}
}
/*
<elliance:UmbracoRepeater ID="RotatingBackgroundPhotosFolderRepeater" runat="server" DocumentTypeAlias="RotatingBackgroundPhotosFolder">
<ItemTemplate>
<ul id="homepage-rotator">
<elliance:UmbracoRepeater ID="BackgroundPhotoRepeater" runat="server" DocumentTypeAlias="BackgroundPhoto">
<ItemTemplate>
<li><img src="<%#Container.GetItem("photo") %>" alt="" /></li>
</ItemTemplate>
</elliance:UmbracoRepeater>
</ul>
</ItemTemplate>
</elliance:UmbracoRepeater>
*/
Hi Jason
This is indeed the file.
And this is where my skills stop since I'm a frontend developer and C#/ASP.NET is not what I do best. But there is some rotator logic and as you can see there is a
Here you need to make som logic to wrap the tag in an tag IF the link has a value from Umbraco.
I Suppose you should be able to fetch the value like #Container.GetItem("link") where link should be your alias.
Hope this helps a bit.
And as mentioned be sure to build the project if that is needed.
/Jan
Thanks, Jan!
I have requested assistance from a member of our design team to see if he can use what you provided to fix it since it's out of my wheelhouse also.
I will let you know the outcome.
Thanks again!!!
Hi Jason
You're welcome hope you guys manage to figure it out - wow...don't know what happened but this post is really messed up now, huh? :)
/Jan
is working on a reply...