3
\$\begingroup\$

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>

\$\endgroup\$
1
  • 5
    \$\begingroup\$ @2 close voters, please explain the close votes for "hypothetical" or "example" code? HTML/CSS is on topic and this does not appear to be (or have been, in its edit history) example code. \$\endgroup\$ – Dan Jul 13 '15 at 9:00
10
\$\begingroup\$

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"?

\$\endgroup\$
1
  • \$\begingroup\$ Thank you for the advice. I will take those things out. And I will look into PHP a little more to do that. \$\endgroup\$ – Valerie Sharp Jul 1 '15 at 4:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.