work with images in a repeater control

Posted on 2007-10-05
Last Modified: 2010-04-15
Hi there,

           I am using a repeater control to display all the images in a page. Right now, the images are displayed on a page when the page loads up. But the problem is there is no spacing in between the images. The width of the content is 800px, so it tries to fit in as many as possible. I want to have four images per row with some spacing between them. Could I use tables to do it or could I just have the repeater to reside in a div tag? What are the properties I need to have so that I get what I am looking for.
Question by:siddhuoops
    LVL 7

    Expert Comment

    You'll have to add some kind of spacing control to your repeater template. The properties you need will depend on what you're trying to do. Do you want the images in a rectangular grid? Use a table. Do you want a border around each image? Set the img border property.

    Putting the repeater in a DIV will not accomplish anything.
    LVL 7

    Accepted Solution

    OK, here's a sample repeater template that puts any number of images in a grid:

        <asp:Repeater id=repeater1 runat="server">

          <td><img ID="img1" runat="server" src='<%#  DataBinder.Eval(Container.DataItem, "src").ToString() %>' /></td>
          <asp:Literal id="itemLiteral" runat="server" Text='<%# RepeaterItemSeparator() %>' />


    Where the code-behind includes:

                private int itemCount = 0;

                public string RepeaterItemSeparator()

                      if ( ((itemCount%4) == 1) && (itemCount != 1) )
                            return "</tr>\r\n\t<tr>";
                            return "";

    Author Comment

    Thank You so much..awesome

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    Join & Write a Comment

    This article introduced a TextBox that supports transparent background.   Introduction TextBox is the most widely used control component in GUI design. Most GUI controls do not support transparent background and more or less do not have the…
    We all know that functional code is the leg that any good program stands on when it comes right down to it, however, if your program lacks a good user interface your product may not have the appeal needed to keep your customers happy. This issue can…
    In this sixth video of the Xpdf series, we discuss and demonstrate the PDFtoPNG utility, which converts a multi-page PDF file to separate color, grayscale, or monochrome PNG files, creating one PNG file for each page in the PDF. It does this via a c…
    Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now