We Keep Coding

How to Select and click the current image item in the slideshow of a repeater

Please, my senior code experts, I have a repeater that randomly display the images and text label from a folder using a jquery. I want to be able to select and click the current image such that it redirects to another page where the image details can be displayed. I will appreciate your help and contributions!
<div id="banner-fade">
<!-- start Basic Jquery Slider -->
<ul class="bjqs">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<li>
<img src='<%# DataBinder.Eval(Container.DataItem,"Value") %>' title='<%# (DataBinder.Eval(Container.DataItem,"Text").ToString()).Split('.')[0].ToString() %>' alt=""></li>
</ItemTemplate>
</asp:Repeater>
</ul>
<!-- end Basic jQuery Slider -->
</div>
Below is the code behind...
protected void Page_Load(object sender, EventArgs e)
{
FillPage();
{
string[] filePaths = Directory.GetFiles(Server.MapPath("~/pages/Management/Images/Products/"));
List<ListItem> files = new List<ListItem>();
foreach (string filePath in filePaths)
{
string fileName = Path.GetFileName(filePath);
files.Add(new ListItem(fileName, "/pages/Management/Images/Products/" + fileName));
}
Repeater1.DataSource = files;
Repeater1.DataBind();
}

Surround the <img> with a link.
<a href="www.linkToPageHere.com">
<img src='<%# DataBinder.Eval(Container.DataItem,"Value") %>' title='<%# (DataBinder.Eval(Container.DataItem,"Text").ToString()).Split('.')[0].ToString() %>' alt="">
</a>

How to bind images from TreelistEx to a repeater in Sitecore

I'm not sure if this is the right approach, but still went ahead.
The template has these fields
Description [Rich Text]
Images [TreelistEx]
User will select pics from the media library using the TreelistEx field, which later would be displayed in a carousel. User should also be able to edit those images.
My code is not displaying any images.
aspx:
<div class="toggle_1bs">
<asp:Repeater ID="rpImages" runat="server" OnItemDataBound="rpImages_ItemDataBound"
ItemType="Sitecore.Data.Items.Item">
<HeaderTemplate>
<div id="1bs" class="owl-carousel">
</HeaderTemplate>
<ItemTemplate>
<div class="item">
<sc:Image ID="imgMain" Field="Images" runat="server" CssClass="img-full"
Item="<%#Container.DataItem %>"/>
</div>
</ItemTemplate>
<FooterTemplate>
</div>
</FooterTemplate>
</asp:Repeater>
</div>
aspx.cs:
private void BindData()
{
//bind data to the repeater
MultilistField offerImages = (MultilistField)offerDetails.Fields["Images"];
rpImages.DataSource = offerImages.GetItems();
rpImages.DataBind();
}
protected void rpImages_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
var mainItem = (Item)e.Item.DataItem;
if (mainItem != null)
{
var imgMain = (Image)e.Item.FindControl("imgMain");
if(imgMain != null)
{
if (!string.IsNullOrEmpty(MediaManager.GetMediaUrl(mainItem)))
imgMain.DataSource = MediaManager.GetMediaUrl(mainItem);
//Response.Write(MediaManager.GetMediaUrl(mainItem));
}
}
}
There are 2 images added using the treelist control and I can see the html rendered for the 2 images (<div class="item"></div>).

You don't have field which is an Image type field. That's why you cannot use sc:Image like that.
You're getting list of media items from your TreeListEx.
Remove your rpImages_ItemDataBound and try something like this instead:
<ItemTemplate>
<img src='<%# Sitecore.StringUtil.EnsurePrefix('/', Sitecore.Resources.Media.MediaManager.GetMediaUrl((Sitecore.Data.Items.Item)Container.DataItem)) %>' />
</ItemTemplate>

Showing Byte Image in repeater

I want to some images in asp repeater which comes from databas image table.
HTML
<asp:Repeater ID="rpt_" runat="server">
<ItemTemplate>
<li>
<img src="<%="data:image/jpg;base64," + Convert.ToBase64String((byte[])Eval("Photo")) %>" alt="" />
</li>
</ItemTemplate>
</asp:Repeater>
C#
private void Load_()
{
ClassDo class_ = new ClassDo;
DataTable dt = class_.Ann().Tables[0];
rpt_.DataSource = dt;
rpt_.DataBind();
}
These are my codes, and get me error I cannot show images.
HTML
<img alt="" src="<%="data:image/jpg;base64," + Convert.ToBase64String(Class_._image) %>" />
C#
Class_._image = (byte[])dt.Rows[0]["Photo"];
It works like that somewhere else, but with repeater I cannot read it with Eval.
Is there any working way to show images?

Can you try this?
Create a function
public string GetImage(object img)
{
return "data:image/jpg;base64," + Convert.ToBase64String((byte[])img);
}
Then change your declaration like this
<asp:Image ImageUrl='<%# GetImage(Eval("Photo")) %>' />

Deleting images from server

I'm writing a code that selects images in a Listview and delete them from the server. Unfortunately I haven't been able to delete any image and no error during debug. Here is the code:
<asp:ListView ID="ListView2" runat="server" DataKeyNames="ID_BG" DataSourceID="SqlDataSource_BGdelete">
<ItemTemplate>
<label><input id="checkbox1" name="BG_list" type="checkbox" runat="server" value='<%# Eval("BG_fileName") %>'/>
<img alt="" style="width:150px" src="/Members/images/BG/icons/<%# Eval("BG_fileName") %>"></label>
</ItemTemplate>
<LayoutTemplate>
<div id="itemPlaceholderContainer" runat="server" style="">
<span runat="server" id="itemPlaceholder" />
</div>
<div style="">
<asp:Button class="btn btn-default" ID="DeleteBackground" runat="server" Text="Delete" OnClick="DeleteBackground_click" />
</div>
</LayoutTemplate>
.....
CODE BEHIND
protected void DeleteBackground_click(object sender, EventArgs e)
{
foreach (ListViewItem itemRow in this.ListView2.Items)
{
var checkBtn = (HtmlInputCheckBox)itemRow.FindControl("checkbox1");
if (checkBtn.Checked)
{
string fileName = ("~/Members/images/BG/" + checkBtn.Value);
if (fileName != null || fileName != string.Empty)
{
if ((System.IO.File.Exists(fileName)))
{
System.IO.File.Delete(fileName);
}
}
}
}
}

These 2 lines
if ((System.IO.File.Exists(fileName)))
System.IO.File.Delete(fileName);
must be
if (System.IO.File.Exists(Server.MapPath(fileName)))
System.IO.File.Delete(Server.MapPath(fileName));
P.S.
It makes no sense to check if (fileName != null || fileName != string.Empty) because fileName is never null or empty.

certainly that the id="checkbox1" is rename by the renderer for not to have the same Id in item listView. Check the generated html.

Databind and trying to get index in Listview

Need a hand trying to get my rotating banner working properly on my website. I'm using the jquery cycle plugin which manages the rotation. Within my CMS I've got something called a smartform, which contains upto 6 pictures. The code below (something which I wrote by following a tutorial for the banner) works really well. However I would like to somehow get the index of the image and place it within the alt tags. What I am trying to achieve is the alt tag to say "Banner_(ImageIndexNumber)".
Hopefully someone can help, thanks all
C# Codebehind
private void BannerFill(int contentId)
{
try
{
uxBannerContentBlock.DefaultContentID = contentId;
uxBannerContentBlock.Fill();
string xml = uxBannerContentBlock.EkItem.Html;
SmartForm.RotatingBanner.BannerImage bannerGroup = (SmartForm.RotatingBanner.BannerImage)
Ektron.Cms.EkXml.Deserialize(typeof(SmartForm.RotatingBanner.BannerImage), xml);
List<BannerSlide> slides = GetBannerSlides(bannerGroup.Slides);
//Databind//
uxBannerRepeater.DataSource = slides;
uxBannerRepeater.DataBind();
}
catch { }
}
protected List<BannerSlide>
GetBannerSlides(SmartForm.RotatingBanner.BannerImageSlides[] bannerGroupSlides)
{
List<BannerSlide> bSlides = new List<BannerSlide>();
foreach (SmartForm.RotatingBanner.BannerImageSlides bgSlide in bannerGroupSlides)
{
bSlides.Add(new BannerSlide(bgSlide.Image.img.src));
}
return bSlides;
}
public class BannerSlide
{
//properties//
public string SlideImage { get; set; }
//constructor//
public BannerSlide(string slideImage)
{
SlideImage = slideImage;
}
}
Front end
<div class="slideshow">
<CMS:ContentBlock ID="uxBannerContentBlock" runat="server" Visible="false" />
<asp:Repeater runat="server" ID="uxBannerRepeater">
<ItemTemplate>
<img src="<%# DataBinder.Eval( Container.DataItem,"SlideImage") %>" alt="Banner_<%# Container.ItemIndex %>" />
</ItemTemplate>
</asp:Repeater>

alt='<%# "Banner_" + Container.ItemIndex %>'