The 101 Pictures Gallery

Question

I am working on a website for a group of artists and want to know of a way to make my code cleaner and my website run faster. I am working on the gallery page, and there are over 100 pictures I want to show. I have been entering them in as shown below, but I know there must be a better way to try and do this, but I just need some help.

/*****************************
		  PIC GALLERY 
*****************************/

.gallerySize {
  /*height: 25%;*/
  /*	overflow-x:30%;*/
}
.galleryContainer {
  margin-top: 5%;
  width: 90%;
  overflow-x: scroll;
  overflow-y: hidden;
  /*height: 15%;*/
  /*margin: 2%;*/
  /*height: 10%;*/
}
. .galleryContainer img {
  height: 171px;
  width: 180px;
}
.profile {
  margin-top: 5%;
}
.galleryContainer img {
  height: 300px;
  width: 400px;
}
.fullDrawing img {
  height: 117.273px;
  width: 1042.273px;
}
.topImg {
  margin: 5% 2% 0% 5%;
}
.list-inline {
  white-space: nowrap;
}
.galleryContainer > .row [class*="col-lg"],
.galleryContainer > .row [class*="col-md"],
.galleryContainer > .row [class*="col-md"] {
  float: none;
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}
#main-content > .row {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

<div class="row topImg container-fluid">
  <div class="row fullDrawing img-resonsive col-md-6">
    <div class="">
      <a href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQlaU7tH2vtUNYd3dmumnyJ47_FhXK7CU3FVAEG9dQet_iUlFMP" class="">
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQlaU7tH2vtUNYd3dmumnyJ47_FhXK7CU3FVAEG9dQet_iUlFMP" alt="...">
      </a>
    </div>
  </div>
</div>


<div class="galleryContainer container-fluid list-inline">
  <div class="row">

    <div class="img-responsive col-md-3 ">
      <div class="">
        <a href="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQqzKPv6A_I5n6GnWWdzcU9lr1Qu6-OpTMG1tnoB9pGWN1FDaNZ" class="">
          <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQqzKPv6A_I5n6GnWWdzcU9lr1Qu6-OpTMG1tnoB9pGWN1FDaNZ" alt="...">
        </a>
      </div>
    </div>

    <div class="img-responsive col-md-3">
      <div class="">
        <a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT1RN-0XL0dNDeg4N_VdAUTWc3NAE1mAJa19emztBjFuLfElKH4" class="">
          <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT1RN-0XL0dNDeg4N_VdAUTWc3NAE1mAJa19emztBjFuLfElKH4" alt="...">
        </a>
      </div>
    </div>

    <div class="img-responsive col-md-3">
      <div class="">
        <a href="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQCjtxG-kCES38vjk8YCQVTqeBy3BRa9TcEVxn6wnf14wbFhw-F" class="">
          <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQCjtxG-kCES38vjk8YCQVTqeBy3BRa9TcEVxn6wnf14wbFhw-F" alt="...">
        </a>
      </div>
    </div>

  </div>
</div>

Answer 1

Image gallery.

To be completely honest, if you're wanting to make an image gallery, you would save yourself a lot of time and trouble by using Wordpress.org

Example: http://psychoproductions.net/psychographics/

---

That said...

Assuming your images are stored server-side, and you really want to code this yourself, unless you want to type every image URL one by one, you may want to look into a server side language that can scan through your image folder(s), parse the paths and wrap it into HTML tags. It really varies what you can do depending on your server environment...

---

A few other things

<a href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQlaU7tH2vtUNYd3dmumnyJ47_FhXK7CU3FVAEG9dQet_iUlFMP" class="">

There's no point declaring class is there is not one to assign to it.

Another example:

<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQqzKPv6A_I5n6GnWWdzcU9lr1Qu6-OpTMG1tnoB9pGWN1FDaNZ" alt="...">

alt="..." may as well be left out, if an ellipsis will be its content. Why not class="something meaningful"?