Search code examples
javascripthtmlcsscontent-management-system

What's the smart way to handle hundreds of images on a web page?

I have a simple webpage with hundreds of images. Like this...

<img src="img/photo00001.jpg">
<img src="img/photo00002.jpg">
<img src="img/photo00003.jpg">
... and so on

I don't want to spend hours copy pasting and editing the numbers to later realize I forgot the anchor tag on them. I know Wordpress would do it but this is supposed to be a simple project and all layout and design is already done, theming it would be a complete overkill.

What's the smart approach to this?

  • custom auto built CMS? I've heard about it but don't know much
  • Sublime plugin that generates the HTML? don't think it writes the img path
  • Some other idea?

Mind you I'm a front end guy.

Solution

  • It's really ugly, but i think it will do what you want :

    <!DOCTYPE html>
<html>
<head>
	<title>Test</title>
</head>
<body>

<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<script type="text/javascript">

function addZero(number){
	var zeros;
	switch(number.toString().length) {
    case 1:
        zeros= "0000";
        break;
    case 2:
        zeros= "000";
        break;
    case 3:
        zeros= "00";
        break;
    case 4:
        zeros= "0";
        break;
	}

	return zeros;
}

for(var i=0;i<1030; i++){
	$("body").append("<img src='img/photo"+ addZero(i) + i +".jpg'/>");
}
</script>
</body>
</html>

    Copy/Paste this into a .html file and run it, then copy the source code of the generated page...

    Good luck !