Friday, 9 September 2016

Creating A Photo Page For My Website

I have just added a new page that includes a gallery of my best photos. To do this isn't so easy in blogger as it doesn't come as a preset option so I had to learn how to edit the HTML code for the page. To start off with I didn't use HTML code, I just used the normal blogger page editor to upload all of my photos but there was no way for me to display them all side by side as small thumbnails like I wanted, so I had to look for other options. That's when I found a basic HTML code for this on another website and managed to modify it slightly to include my own photos and descriptions. The code allows me to display photos and will rearrange to fit different sized screens, it is explained a bit more on the website at the bottom under 'Responsive Image Gallery'


At the top of the page edit screen in blogger are two tabs, 'COMPOSE' and 'HTML', for the code we need to be under the 'HTML' tab.


The code to do this is:
--------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
div.img {
    border: 1px solid #ccc;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
</style>
</head>
<body>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="IMAGE.jpg">
      <img src="IMAGE.jpg" alt="TITLE" width="300" height="200">
    </a>
    <div class="desc">DESCRIPTION</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <a target="_blank" href="IMAGE.jpg">
      <img src="IMAGE.jpg" alt="TITLE" width="300" height="200">
    </a>
    <div class="desc">DESCRIPTION</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <a target="_blank" href="IMAGE.jpg">
      <img src="IMAGE.jpg" alt="TITLE" width="300" height="200">
    </a>
    <div class="desc">DESCRIPTION</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <a target="_blank" href="IMAGE.jpg">
      <img src="IMAGE.jpg" alt="TITLE" width="300" height="200">
    </a>
    <div class="desc">DESCRIPTION</div>
  </div>
</div>

</body>
</html>
--------------------------------------------------------------------------------------------------------------------------

That's the code for it, you only need to edit the bits highlighted in red unless you actually know what you're doing (which I didn't)
In the place of 'IMAGE.jpg' you will paste the link to the photo that you want. To do this you have to upload the photo to blogger by selecting the photo upload tool in the 'COMPOSE' tab and upload the photo like you normally would. 
Once the photo is on the page there will be some new HTML code automatically added which looks like this:

--------------------------------------------------------------------------------------------------------------------------
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-ZmQ8sgh-jDQ/V9EuOnlosCI/AAAAAAAAE3g/tS9m4XTtCvs7vpaJ_t2zKt9Q4AQ6ttrQACLcB/s1600/DSC01887.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://3.bp.blogspot.com/-ZmQ8sgh-jDQ/V9EuOnlosCI/AAAAAAAAE3g/tS9m4XTtCvs7vpaJ_t2zKt9Q4AQ6ttrQACLcB/s400/DSC01887.JPG" width="400" /></a></div>
<br />
--------------------------------------------------------------------------------------------------------------------------

The actual location of the photo is the web address in blue, both addresses are the same. This is what you need to copy to replace the 'IMAGE.jpg' in the code

'TITLE' is what you replace with the name of the photo and 'DESCRIPTION' is what you replace with a brief description of the photo to be displayed beneath it.

After doing this you want to remove the image you added in as you have now put it into the gallery part. To do this all you have to do is delete the new section of code that was automatically added when you inserted the image.

As you will notice, the gallery only has spaces for four photos, to add more you have to copy this section of code:
--------------------------------------------------------------------------------------------------------------------------
<div class="responsive">
  <div class="img">
    <a target="_blank" href="IMAGE.jpg">
      <img src="IMAGE.jpg" alt="TITLE" width="300" height="200">
    </a>
    <div class="desc">DESCRIPTION</div>
  </div>
</div>
--------------------------------------------------------------------------------------------------------------------------
And paste it below the last one in the HTML section of the page - above the </body> code.

No comments:

Post a Comment