Google defines collage as the following:
a piece of art made by sticking various different materials such as photographs and pieces of paper or fabric on to a backing.
As you already know there are applications for making a collage like photogrid and pizap among many but I find it fun just to make things on my own and improve my experience as a self-taught web developer. It will contain just basic templates but you can add more features if you want.
I will use vanilla javascript on this project the main project I made it using typescript. You can find the complete project source code on this repository. The Javascript files are in the dist folder while the typescript files are in the src folder.
Let's begin with the setup..
Create an index.html file and paste the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collage maker</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Will display if Javascript is turned off -->
<noscript>
<div id="no-js">
<p>You need to enable Javascript to use this site</p>
</div>
</noscript>
<div class="container">
<h1>Choose template</h1>
<div id="templates">
<div class="template template-1">
<div id="t-in-1"></div>
</div>
<a class="choose">Choose this <img src="./pointer.svg" alt="up arrow" class="pointer"></a>
<div class="template template-2">
<div id="t-in-2"></div>
</div>
<a class="choose">Choose this <img src="./pointer.svg" alt="up arrow" class="pointer"></a>
<div class="template template-3">
<div id="t-in-3"></div>
</div>
<a class="choose">Choose this <img src="./pointer.svg" alt="up arrow" class="pointer"></a>
</div>
</div>
<footer>
<p>Made with ❤ by <a id="git-link" href="https://github.com/coulKe">Luteya Coulston</a></p>
</footer>
</body>
</html>
</html>
The above code contains the current only 3 templates available for making a collage. The svg images can be download in the git repository but it's only for decoration really not a must.
Then create an upload.html file with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload - Collage maker</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Will display if Javascript is turned off -->
<noscript>
<div id="no-js">
<p>You need to enable Javascript to use this site</p>
</div>
</noscript>
<div class="container">
<div id="upload-view">
<form>
<label for="files">Upload photos:</label> <br>
<input type="file" id="files" multiple> //Note the multiple attribute
</form>
<a href="" id="previewButton">Preview</a>
<a href="" id="downloadButton">Download Collage</a>
<canvas id="preview" width="275px" height="275px"></canvas>
<canvas id="cvns" width="550px" height="550px"></canvas>
</div>
<div id="hidden-images"></div>
<a id="hidden-link" href="#" hidden></a>
</div>
</body>
</html>
It's just a basic html file with an input file, some links and two canvases. The first canvas with the id of preview will be used is smaller in size and will be used to preview the collage after files are uploaded while the second canvas with the id of cvns will be used to generate the image that will be downloaded as we'll see later on.
We'll then create a style.css file to style our html file, it's not the best of design but we'll with it 😁
* {
box-sizing: border-box;
}
#no-js {
text-align: center;
padding: 1rem;
font-weight: bold;
font-size: large;
color: #ffffff;
background-color: rgb(85, 0, 0);
}
body {
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
#git-link {
color: #ffffff;
text-decoration: none;
}
#git-link:hover {
text-decoration: underline;
}
footer {
text-align: center;
font-weight: bold;
padding: 0.5rem;
color: #ffffff;
background-color: #000000;
}
h1 {
text-align: center;
}
.container {
counter-reset: template;
}
#templates {
text-align: center;
}
.choose,
#previewButton,
#downloadButton {
text-decoration: none;
display: inline-block;
padding: 0.5rem;
background-color: #000000;
color: #ffffff;
font-weight: bold;
border-radius: 4px;
}
.choose {
margin: 4px;
}
.pointer {
width: 15px;
height: 15px;
}
.template {
position: relative;
margin: auto;
background-color: #f3f3ff;
border: 1px solid grey;
width: 250px;
height: 250px;
margin-bottom: 6px;
}
.template::before {
content: counter(template) ")";
counter-increment: template;
position: absolute;
font-weight: bold;
top: 0;
left: -25px;
}
#t-in-1 {
border: 1px solid grey;
background-color: inherit;
width: 120px;
height: 120px;
position: absolute;
bottom: 30px;
right: 30px;
}
#t-in-2 {
border-left: 1px solid grey;
background-color: inherit;
width: 125px;
height: 100%;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
}
#t-in-3 {
border-bottom: 1px solid grey;
background-color: inherit;
width: 100%;
height: 125px;
position: absolute;
top: 0px;
}
/*Upload page*/
#upload-view {
padding: 1rem;
max-width: 800px;
margin: auto;
text-align: center;
}
#hidden-images,
canvas {
display: none;
}
canvas {
margin: auto;
}
#img-1 {
width: 50%;
height: 100%;
object-fit: cover;
}
#img-2 {
width: 50%;
height: 100%;
object-fit: cover;
}
label {
display: block;
font-weight: bold;
font-size: larger;
}
#previewButton,
#downloadButton {
margin: 8px;
}
So far so good, the next part will deal with javascript because if I put it here it will be too long. See you on the other side(part 2).
Top comments (0)