Question

just wondering if there is a way to reduce the amount of code needed when displaying a lot of images in HTML?

I am wanting to display around 2-300 images in a gallery, and at the moment the HTML will look like this:

<div id="scroller>
    <img src="/Content/images/decking/decking-1.jpg" width="100" alt="" />
    <img src="/Content/images/decking/decking-2.jpg" width="100" alt="" />
    <img src="/Content/images/decking/decking-3.jpg" width="100" alt="" />
    <img src="/Content/images/decking/decking-4.jpg" width="100" alt="" />
    <img src="/Content/images/decking/decking-5.jpg" width="100" alt="" />
</div>

…but down to image “decking-250.jpg”.

Is there a more efficiant way to display the images so that I don’t have 250+ lines of “img src” HTML?

The only part of the filename that changes is the “-1”, “-2”, “-3” etc etc. The rest, including the Alt tag can remain empty.

I am building this site in ASP.Net MVC3 Razor using the ASP.net online tutorials as a guide if that helps any solution come to mind, of if it simply has to be done that way then that is also fine – I just wondered if there was another approach I should consider to learn?

Many thanks in advance.

Answer 1

This is the way HTML works. You can’t reduce that, as you need one img tag for each picture. You may create that code dynamically via PHP, JS, …. But in the end you’ll get a long list of img tags, maybe individually wrapped by other tags (for example in a list).