Making a Grid of Images

• Download source - 8.3 MB

Introduction

I was looking at a website and saw a half decent looking grid of Images, I set it upon myself to figure out a simple way to do this.

Background

I am a new Developer who likes to publish articles on my learning exploits!

Using the Code

This is a basic MVC web app to place pictures in a grid like format. The app just makes a list of Strings from the file names in a set directory; that list is then passed into the View. The View will loop through the List of the file names and place them inside any img tag to display the corresponding images in the folder. This app will also act as a basic guide to set up an MVC application.

I need to start of by creating an MVC Web Application in Visual Studio. This is done by starting a new project that is an empty Web Application with MVC. See Figures 1 and 2.

Figure 1

Figure 2

Controller

You can use the home controller that is already there, but in this case it is advisable to create a new controller. To create a Controller, right click on the Controller folder, and click the Add option on the menu tile. At the top of the new menu tile Controller should appear and now click the Controller option. Menu panel from figure 3 should appear. Choose the empty controller.

Figure 3

Give Controller a name that corresponds to the App. On the new Controller, highlight the Index as shown in Figure 4 and right click the highlighted text. A menu tile will appear and click Add view.

Figure 4

This will create a new folder in the View folder that bears the name of the Controller. The next part of the code in the Controller is the code to make the String List of the file names of the images. The List Pictures is populated with the filenames and will be available to use in the View as ViewBag.MyList. One will also need to go to the App_Start folder and change the RouteConfig file to set your default mapping to the new controller and its view, as shown in bold in the code.

Figure 5

Looping Controller

public ActionResult Index()
            
{
   List<string> Pictures = new List<string>();
   DirectoryInfo getPic = new DirectoryInfo
   (@"C:\Users\colem2\Documents\visual studio 2013\Projects\LoppingTable\LoppingTable\Content\Images");

   FileInfo[] fType = getPic.GetFiles("*.jpg");
   
   foreach(FileInfo ft in fType)
   {
    Pictures.Add(ft.Name.ToString());
   }

  ViewBag.MyList = Pictures;
  return View();  
 } 

RouteConfig

 public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "LoopingTable", 
                action = "Index", id = UrlParameter.Optional }
            );
        }
//

View

The Views first piece of code is a foreach loop, which loops the strings in the ViewBag.Mylist collection to the end of the image source code. In turn, the Loop iterates the folders images across the screen within the screens width. This loop produces a basic uniformed appearance for the Images which is enhanced by some basic CSS formatting of margins, spacing and sizing.

There is then a break between the two loops and the second loop is a nested loop. The one variable that makes the nested Loop work is the counter as this iterates through the nested portion to iterate each item in the List as the List items are called by their position in the List. The reasoning for a nested loop was to use a Table and illustrate a different way of styling and control of the output. This is best exemplified in the first loops style is formatted the <div> and <img> tags and a border class, while the second loops styling is controlled for the most part in the <td> tags and the border class.

// Any source code blocks look like this

@{
    ViewBag.Title = "Index";  
}

<link href="~/Content/IndexTables.css" rel="stylesheet" />
<h2>Index</h2>
 <div id="loopedcontent">
      @foreach (var item in ViewBag.MyList)
         {
             <img src="~/Content/Images/@item" style="height:150px; width: 250px;" />
         }

 </div> 
 <br />
 <br />
<h4>Marcus Loop</h4>
<table>
    @{ int counter = 0;}
    @for (var i = 0; i <  4; i++)
    {
        <tr>
          @for (var j = 0; j < 5; j++)
            {
               <td>
                    <img src="~/Content/Images/@ViewBag.MyList[counter]" 
                    style="height:125px; width: 225px;" />
               </td>
               j++;
                counter++;
            }
          
        </tr>
    }
</table>

//

CSS

The basic CSS is listed below:

// Any source code blocks look like this

body {
    background-color: #8fbfbf;
    max-width: 1700px;
    margin: 0 auto;
    text-align: center;
    
}
table
{
    margin: 0 auto;   
}

td
{
    width: 300px;
    height: 150px;
    border-color:black;
    border-style:solid;
    border-width: 1px;
    padding-left: 25px;
    background-color:#f3aaf3;
    margin: 12px;
}
img
{
     margin: 5px;
}
#loopedcontent
{
     margin: 0 auto;
     background-color:aliceblue;
}

.img-border
{
    border-color: #1628ef;
    border-style: solid;
    border-width: 1px;
}

Results

Foreach Loop

Nested For Loop

Points of Interest

My main area of learning is how the Controller Acts with the View, and what subtle difference lies between desktop app coding and web app coding in the .NET Framework.

History

• 27^th December, 2015: Initial version