FEED Validator

for Atom and RSS and KML

Sorry

This feed does not validate.

line 8, column 17: email must be an email address: hidden (3 occurrences) [help]

    <email>hidden</email>
                 ^

In addition, interoperability with the widest range of feed readers could be improved by implementing the following recommendation.

line 3, column 36: Identifier "https://palemomos.bearblog.dev" is not in canonical form (the canonical form would be "https://palemomos.bearblog.dev/") [help]

  <id>https://palemomos.bearblog.dev</id>
                                    ^

Source: https://palemomos.bearblog.dev/feed/

<?xml version='1.0' encoding='UTF-8'?>
<feed xmlns="http://www.w3.org/2005/Atom">
<id>https://palemomos.bearblog.dev</id>
<title>Pale's Tutorials for the web</title>
<updated>2025-05-09T13:33:12.888230+00:00</updated>
<author>
<name>palemomos</name>
<email>hidden</email>
</author>
<link href="https://palemomos.bearblog.dev/" rel="alternate"/>
<link href="https://palemomos.bearblog.dev/feed/" rel="self"/>
<generator uri="https://lkiesow.github.io/python-feedgen" version="0.9.0">python-feedgen</generator>
<subtitle>Cool guides to revamp your web design skills and make your website a super cool place.</subtitle>
<entry>
<id>https://palemomos.bearblog.dev/add-a-gallery-with-hundreds-of-images-easily-to-your-website-using-javascript-or-jquery/</id>
<title>Add a gallery with HUNDREDS of images easily to your website using Javascript or jQuery</title>
<updated>2022-09-23T17:07:11.638268+00:00</updated>
<author>
<name>palemomos</name>
<email>hidden</email>
</author>
<content type="html">Have you ever wanted to add a lot of images to your website, for example to build a gallery or display a collection of items, but then you remember that it's a lot of work and you don't do it anymore? And you were very excited about the idea, but sometimes it's hell to add the images manually, and then if you want to make any changes to the structure it's even worse because you have to make the changes one by one. Maybe you will, maybe you won't, but if you do it will be once in your life and you won't turn that page again because it's a lot of work (or maybe I wouldn't do it again because I'm sometimes lazy).
Anyway, today I want to show you a way to build a super easy and fast gallery, so much so that you will have like 20 galleries on your website.
This time will be built the gallery with two methods, one using pure javascript and second with jQuery, I put both in the same tutorial because it's pretty almost the same but with little differences.
<h2 id=before-we-start>Before we start</h2>This tutorial is aimed at people with little or no javascript experience, so if you don't know anything about it, don't worry, I'll guide you step by step on what to do. If you already know javascript or programming, how cool! It will be very easy to follow then.
If you read the <a href='https://palemomos.bearblog.dev/add-a-gallery-with-hundreds-of-images-easily-to-your-website-with-vuejs/'>tutorial with Vue</a>, this is exactly the same but using two alternative methods. At the end of the tutorial there's some advices in which method use.
Requeriments:
<ul>
<li>a little of html and css knowledge</li>
<li>a little knowledge of javascript (optional)</li>
<li>actitude to learn something cool</li>
</ul>
<h2 id=lets-get-started-with-the-javascript-method>Let's get started with the Javascript method</h2><h3 id=create-a-html-page-for-your-content>Create a html page for your content</h3>Create for example a "gallery.html" file, with the following content:
<div class="highlight"><pre>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;title&gt;My gallery&lt;/title&gt;
&lt;meta charset=&quot;UTF-8&quot; /&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;header&gt;
&lt;h1&gt;My gallery&lt;/h1&gt;
&lt;/header&gt;
&lt;main&gt;
&lt;section id=&quot;gallery&quot;&gt;
&lt;/section&gt;
&lt;/article&gt;
&lt;/main&gt;
&lt;footer&gt;
Made by *Your Name*&lt;/a&gt;
&lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre></div>
<h3 id=save-your-images-in-a-directory>Save your images in a directory</h3>In the same location you have gallery.html, create a directory called for example "imgs" and move all the images you want to display there. In my example, I have the following images:
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-21%2000-54-30.png" alt="Image" />
<h3 id=create-your-script>Create your script</h3>Just after the <code>&lt;/body&gt;</code> closing tag, add the following script:
<div class="highlight"><pre>&lt;script&gt;
let images = [];
let gallery = document.getElementById(&quot;gallery&quot;);
images.map(image =&gt; {
gallery.innerHTML += `&lt;img src=imgs/${image} /&gt;`;
})
&lt;/script&gt;
</pre></div>
<h3 id=quick-explanation>Quick explanation:</h3>In this script, we have a thing called "images" which is an array. If you don't know what an array is, is just a piece of data (a variable) that can store more than one value.
In the array "images", we are going to add the names of our images with their extension, for example in my case, I will add the following:
<code>let images = [&quot;image1.jpg&quot;, &quot;image2.jpg&quot;, &quot;image3.jpg&quot;]</code>
It is very important to add the images between " " and separated by commas.
If you're not familiarized with javascript, the <code>let</code> reserved word means that we are just declaring a variable called "images".
Then we have the function <code>document.getElementById(&quot;gallery&quot;)</code>, this function finds the element <code>&lt;section&gt;</code> with the id="gallery". We store the element found in the variable "gallery".
Finally, we have the <code>map</code> function. This function acts like a loop. For people not familiarized with javascript or programming, this will read all the contents of the array "images" one by one, ie first it will go through "image1.jpg", then "image2.jpg" and finally "image3.jpg". When it is the turn of the corresponding image, it will have a temporary name "image". For each "image", we are going to add a <code>&lt;img&gt;</code>element to the element gallery we previously found, this is with the function <code>innerHTML</code>, which allows us to change the content of an element. There we indicate that we want to append <code>&lt;img src=imgs/${image} /&gt;</code>. You can see we used ` instead of " or ', this is important because using this symbol javascript allows us to mix javascript variables with text (string variables). To mix the temporal variable "image", we just have to write it with the format <code>${image}</code>.
The <code>+=</code>means that the content will be added one after one, and not replace all the previous content, if we youst set the <code>=</code>, the gallery will only show the last image, because each time the content will be replaced.
Horray! If you save your changes and refresh the page, you will see that know we have all the images in the website. And if you inspect your page, you will see that it appears that you have tree images there like if you write it manually. Is like magic!
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-22%2000-10-34.png" alt="Image" />
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-22%2000-12-39.png" alt="Image" />
<h2 id=lets-get-started-with-the-jquery-method>Let's get started with the jQuery method</h2><h3 id=what-is-jquery>What is jQuery?</h3><blockquote>
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
</blockquote>
In other words, jQuery can help us to write javascript more easily, in terms of finding and modifying the elements of a webpage.
<h3 id=add-jquery-to-your-project>Add jQuery to your project</h3>Go back to your gallery.html file, and inside the <code>&lt;head&gt;</code>tag add the following:
<code>&lt;script src=&quot;https://code.jquery.com/jquery-3.6.1.slim.min.js&quot; integrity=&quot;sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;</code>
<h3 id=create-your-script>Create your script</h3>Just after the <code>&lt;/body&gt;</code> closing tag, add the following script:
<div class="highlight"><pre>&lt;script&gt;
let images = [&quot;image1.jpg&quot;,&quot;image2.jpg&quot;,&quot;image3.jpg&quot;]
images.map(image =&gt; {
$(&quot;#gallery&quot;).append(`&lt;img src=imgs/${image} /&gt;`);
});
&lt;/script&gt;
</pre></div>
<h3 id=quick-explanation>Quick explanation:</h3>This works exactly the same as the pure javascript version, but with some small differences. Here we don't have to call the function getElementByID, because jQuery allows us to access directly to elements through their class or id, using the syntax <code>$(&quot;#gallery&quot;)</code>. Then jQuery has a special function <code>append</code>, which works exactly the same as <code>innerHTML+=</code>.
And that's all! Tecnically the difference with javascript and jQuery is how we wrote the code, but both do exactly the same.
We're almost finish, we need to add some style because in this case the images are to big to display them.
<h2 id=continue-adding-style-to-the-gallery>Continue adding style to the gallery</h2>From here it doesn't matter which method you're using, jquery or javascript, what follows works for both.
Create an style.css file and add the following code to fix the size of the images and also for the gallery doesn't look so plain, don't forget to link your page to the stylesheet with <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; /&gt;</code>.
<div class="highlight"><pre>:root {
 --bg-color: #f5d4ff;
 --text-color:#fff;
}
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
body {
 background-color: var(--bg-color);
 color: var(--text-color);
text-shadow: 1px 1px 2px #999;
 font-family: sans-serif;
}
header {
 margin: 2rem 0;
}
header h1 {
 font-size: 2rem;
 font-weight: normal;
 text-align: center;
}
main {
 width: 80%;
 margin: 20px auto;
}
#gallery {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}
#gallery img {
 margin: 10px;
 max-width: 300px;
 height: max-content;
 padding: 1rem;
}
footer {
 text-align: center;
 font-size: 0.9rem;
 padding-bottom: 1rem;
}
@media only screen and (max-width: 768px) {
 main {
 width: 95%;
 }
}
</pre></div>
Now your gallery should look like this:
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-21%2001-37-37.png" alt="Image" />
Much better. Customize your gallery as much as you want!
<h2 id=big-quantity-of-images>Big quantity of images</h2><img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-21%2013-49-33.png" alt="Image" />
Technically now we have our gallery! But imagine you have like 100 images, or your images have big names like the ones in my screenshot, you don't want add the names to the array one by one. This trick will help you a lot with the process (works in all operating systems).
<ol>
<li>Open your terminal or command prompt of your operating system.</li>
<li>Enter the following command: <code>cd YOUR PATH TO YOUR IMAGES FOLDER</code> . For example in my case my path is "Documents/tutorials/imgs", so my command is <code>cd Documents/tutorials/imgs</code>.</li>
</ol>
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-21%2013-47-58.png" alt="Image" />
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-21%2013-38-59.png" alt="Image" />
<ol start="3">
<li>Enter the command: <code>ls -1 &gt; ../names.txt</code> . This will generate a file "names.txt" with all the names of your images, as you can see in the image. Open the generated file and copy all its contents.</li>
</ol>
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-21%2013-39-36.png" alt="Image" />
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-21%2013-40-29.png" alt="Image" />
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-21%2013-48-11.png" alt="Screenshot" />
<ol start="4">
<li>Go to this website <a href='https://delim.co/'>https://delim.co/</a>, and paste the content in the "Column Data Here" column.</li>
<li>Click the option "Converter Settings" and where it says Quotes, select "Double".</li>
</ol>
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot-20220921134150.png" alt="Image" />
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot-20220921134310.png" alt="Screenshot" />
<ol start="6">
<li>Click the right arrow button and now you have all your names separated by double quotes and commas"!</li>
</ol>
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot-20220921134409.png" alt="Image" />
<ol start="7">
<li>Select and copy again, and paste the content inside of the array "images". Note: Don't replace all the content, if you repeat names the images will appear repeated too.</li>
</ol>
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-21%2013-45-21.png" alt="Image" />
Now your gallery has a lot of images, you can add more images manually adding the names in the array or repeating the trick again.
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-22%2011-42-02.png" alt="Image" />
<h2 id=bonus-open-the-image-in-a-new-tab>Bonus: Open the image in a new tab.</h2>If you want your images to have links to a new window, for the javascript method just replace the function inside <code>map</code> with the following
<div class="highlight"><pre>gallery.innerHTML+= `&lt;a href=&quot;imgs/${image}&quot; target=&quot;_blank&quot;&gt;
 &lt;img src=imgs/${image} /&gt;
&lt;/a&gt;`;
</pre></div>
In this case, we are also generating dynamically link tags to all our images. Note that using the `also allows us to write javascript text with blank lines without problems, with " and ' we CAN'T do that.
For the jQuery method, replace the function content <code>map</code> with the following:
<div class="highlight"><pre>$(&quot;#gallery&quot;).append(`&lt;a href=&quot;imgs/${image}&quot; target=&quot;_blank&quot;&gt;
 &lt;img src=imgs/${image} /&gt;
&lt;/a&gt;`);
</pre></div>
<h2 id=bonus-2-generate-more-complex-structures>Bonus 2: Generate more complex structures!</h2>With both methods we can also create more complex content dynamically, for example, let's create a gallery of polaroids with the name of the image with it. For the javascript method, replace the function inside <code>map</code> with the following:
<div class="highlight"><pre>gallery.innerHTML += `&lt;div class=&quot;polaroid&quot;&gt;
 &lt;a href=&quot;imgs/${image}&quot; target=&quot;_blank&quot;&gt;
 &lt;figure&gt;
 &lt;img src=imgs/${image} /&gt;
 &lt;figcaption&gt;
 &lt;em&gt;${image}&lt;/em&gt;
 &lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;/a&gt;
&lt;/div&gt;`;
</pre></div>
For the jQuery method, replace the content inside <code>map</code> with the following:
<div class="highlight"><pre>$(&quot;#gallery&quot;).append(`&lt;div class=&quot;polaroid&quot;&gt;
 &lt;a href=&quot;imgs/${image}&quot; target=&quot;_blank&quot;&gt;
 &lt;figure&gt;
 &lt;img src=imgs/${image} /&gt;
 &lt;figcaption&gt;
 &lt;em&gt;${image}&lt;/em&gt;
 &lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;/a&gt;
&lt;/div&gt;`);
</pre></div>
Note that althougth this looks like html, anything inside ` is just text. The functions <code>innerHTML</code> and <code>append</code> converts this text to html elements.
Now add the following css to your previous style.css file:
<div class="highlight"><pre>.polaroid {
 background-color: #fff;
 margin: 10px;
 height: max-content;
box-shadow: 5px 5px 10px #999
}
.polaroid a {
 text-decoration: none;
}
.polaroid figcaption {
color: rgb(94, 92, 92);
 text-align: center;
 padding: 1rem 0;
}
</pre></div>
Now our gallery looks like this:
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-22%2000-22-28.png" alt="Image" />
That's all! Experiment with different designs and see what happens.
<h2 id=conclusions-and-recommendations>Conclusions and recommendations</h2>We have built a dynamic gallery using two methods, one using pure javascript and one with jQuery, it can have hundreds of images and the maintenance will be a piece of cake.
This tutorial was aimed at people with little or no experience in javascript or programming in general. You can have a cool website without being an expert, but if you are interested in following the path of web development in the future, I recommend that you delve into the area of programming and learn javascript. Web development is a world, but javascript will be a good way to start your path. Also I recommend learning some jQuery basics, because it's really useful when you want to interact directly with the elements of a page withough the need of calling a lot of functions.
<h2 id=which-method-use>Which method use?</h2>I have presented you three forms of doing the same thing, you can use any of them, but maybe this advices will help you.
If you want to make a simple and fast gallery, I mean without a complex structure, and also you don't have or don't want to depend on any external framework like jQuery or Vue, use the pure javascript method.
If you want to do the same thing as the previous point but for some reason you are already using jQuery, use the jQuery method.
If you want to have a gallery with a more complex structure, I recommend using the VueJS method, since being able to handle the html elements directly as they are instead of text is a pretty good advantage and avoids having syntax errors.
Thank you for reading! I hope this tutorial has been helpful.
I'll also add a tutorial to open the images in a popup. Stay tunned ✨.
Download the full code of the project <a href='https://gitlab.com/Palemona/pale-web-tutorials/-/archive/main/pale-web-tutorials-main.zip?path=2'>here</a>.
Learn Javascript at <a href='https://www.w3schools.com/js/default.asp'>w3schools.com</a>
Learn jQuery at <a href='https://www.w3schools.com/jquery/default.asp'>w3schools.com too</a>
Learn Vue at <a href='https://vuejs.org/guide/introduction.html#what-is-vue'>vuejs.org</a>
Never stop trying 🌠
Credit for the example images: <a href='https://unsplash.com/@ujitomo?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText'>TOMOKO UJI</a>
<img src="https://i.imgur.com/3jxqrKP.jpeg" alt="Image" />
</content>
<link href="https://palemomos.bearblog.dev/add-a-gallery-with-hundreds-of-images-easily-to-your-website-using-javascript-or-jquery/" rel="alternate"/>
<summary>Have you ever wanted to build a huge image gallery, but then you remember that it's a lot of work and you don't want to do it anymore? Learn how to build a dynamic gallery and solve this problem.</summary>
<category term="javascript"/>
<category term="vuejs"/>
<category term="web design"/>
<category term="web development"/>
<published>2022-09-23T01:34:31.990709+00:00</published>
</entry>
<entry>
<id>https://palemomos.bearblog.dev/add-a-gallery-with-hundreds-of-images-easily-to-your-website-with-vuejs/</id>
<title>Add a gallery with HUNDREDS of images easily to your website with Vue.js</title>
<updated>2022-09-23T17:06:50.854523+00:00</updated>
<author>
<name>palemomos</name>
<email>hidden</email>
</author>
<content type="html">Have you ever wanted to add a lot of images to your website, for example to build a gallery or display a collection of items, but then you remember that it's a lot of work and you don't do it anymore? And you were very excited about the idea, but sometimes it's hell to add the images manually, and then if you want to make any changes to the structure it's even worse because you have to make the changes one by one. Maybe you will, maybe you won't, but if you do it will be once in your life and you won't turn that page again because it's a lot of work (or maybe I wouldn't do it again because I'm sometimes lazy).
Anyway, today I want to show you a way to build a super easy and fast gallery, so much so that you will have like 20 galleries on your website.
<h2 id=before-we-start>Before we start</h2>This tutorial is aimed at people with little or no javascript experience, so if you don't know anything about it, don't worry, I'll guide you step by step on what to do. If you already know javascript or programming, how cool! It will be very easy to follow then.
UPDATE
If you read the <a href='https://palemomos.bearblog.dev/add-a-gallery-with-hundreds-of-images-easily-to-your-website-using-javascript-or-jquery/'>tutorial with javascript and jQuery</a>, this is exactly the same but using an alternative methods. At the end of the tutorial there's some advices in which method use.
Requeriments:
<ul>
<li>a little of html and css knowledge</li>
<li>a little knowledge of javascript (optional)</li>
<li>actitude to learn something cool</li>
</ul>
<h2 id=what-is-vuejs>What is Vue.js</h2><blockquote>
"Vue (pronounced /vjuː/, like view) is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be it simple or complex."
</blockquote>
Sounds cool right? It doesn't matter if you didn't understand anything of the above, in resume, Vue can help us to generate dynamic content for websites. And that's very useful for galleries and collections.
<h2 id=lets-get-started>Let's get started</h2><h3 id=create-a-html-page-for-your-content>Create a html page for your content</h3>Create for example a "gallery.html" file, with the following content:
<div class="highlight"><pre>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;title&gt;My gallery&lt;/title&gt;
&lt;meta charset=&quot;UTF-8&quot; /&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;header&gt;
&lt;h1&gt;My gallery&lt;/h1&gt;
&lt;/header&gt;
&lt;main&gt;
&lt;section id=&quot;gallery&quot;&gt;
&lt;/section&gt;
&lt;/article&gt;
&lt;/main&gt;
&lt;footer&gt;
Made by *Your Name*&lt;/a&gt;
&lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre></div>
<h3 id=save-your-images-in-a-directory>Save your images in a directory</h3>In the same location you have gallery.html, create a directory called for example "imgs" and move all the images you want to display there. In my example, I have the following images:
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-21%2000-54-30.png" alt="Image" />
<h3 id=add-vuejs-to-your-code>Add vue.js to your code</h3>One of the advantages of Vue is that you can add it to your website with just one link. Inside your <code>&lt;head&gt;</code> tag, paste the following code:
<div class="highlight"><pre>&lt;script src=&quot;https://unpkg.com/vue@3/dist/vue.global.js&quot;&gt;&lt;/script&gt;
</pre></div>
<h3 id=create-your-vue-snippet>Create your Vue snippet</h3>Just after the <code>&lt;/body&gt;</code> closing tag, add the following script:
<div class="highlight"><pre>&lt;script&gt;
const { createApp } = Vue
createApp({
data() {
return {
images: []
}
}
}).mount(&#39;#gallery&#39;)
&lt;/script&gt;
</pre></div>
<h4 id=quick-explanation>Quick explanation:</h4>We are creating an instance of Vue which will affect directly the content on the <code>&lt;section&gt;</code> with the id "gallery" through the function <code>createApp().mount</code> (mount("#gallery)).
createApp is just a function to initialize Vue. There we have a thing called "images" which is an array. If you don't know what an array is, is just a piece of data (a variable) that can store more than one value.
In the array "images", we are going to add the names of our images with their extension, for example in my case, I will add the following:
<code>images: [&quot;image1.jpg&quot;, &quot;image2.jpg&quot;, &quot;image3.jpg&quot;]</code>
It is very important to add the images between " " and separated by commas.
<h3 id=declare-your-image-component>Declare your image component</h3>Inside <code>&lt;section id=&quot;gallery&quot;&gt;</code>, add the following code:
<div class="highlight"><pre>&lt;img v-bind:src=&quot;&#39;imgs/&#39;+image&quot; v-for=&quot;image in images&quot; /&gt;
</pre></div>
<h4 id=quick-explanation>Quick Explanation:</h4>This <code>&lt;img&gt;</code> element will serve as a "reutilizable element" which will render all the images we added in the array "images".
<ul>
<li><code>v-for=&quot;image in images&quot;</code> is a loop. For people not familiarized with javascript or programming, this will read all the contents of "images" one by one, ie first it will go through "image1.jpg", then "image2.jpg" and finally "image3.jpg". When it is the turn of the corresponding image, it will have a temporary name "image". That's why it's "image in images".
</li>
<li><code>v-bind:src=&quot;'imgs/'+image&quot;</code> is like the original src attribute, but by adding v-bind: we are indicating to Vue that the source will be dynamic and obtained of the array "images". As explained above, when is the turn of the corresponding image, called "image", Vue will print dynamically an <code>&lt;img&gt;</code> element with the source of the corresponding image (the name "image1.jpg" for example), but we have to make sure with add the path of the images folder, thats why we 'imgs/' along with the "image", because the images are in a folder called "imgs".
</li>
</ul>
Horray! If you save your changes and refresh the page, you will see that know we have all the images in the website. And if you inspect your page, you will see that it appears that you have tree images there like if you write it manually. Is like magic!
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-22%2000-10-34.png" alt="Image" />
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-22%2000-12-39.png" alt="Image" />
We're almost finish, we need to add some style because in this case the images are to big to display them.
<h3 id=adding-style-to-the-gallery>Adding style to the gallery</h3>Create an style.css file and add the following code to fix the size of the images and also for the gallery doesn't look so plain, don't forget to link your page to the stylesheet with <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; /&gt;</code>.
<div class="highlight"><pre>:root {
 --bg-color: #f5d4ff;
 --text-color:#fff;
}
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
body {
 background-color: var(--bg-color);
 color: var(--text-color);
text-shadow: 1px 1px 2px #999;
 font-family: sans-serif;
}
header {
 margin: 2rem 0;
}
header h1 {
 font-size: 2rem;
 font-weight: normal;
 text-align: center;
}
main {
 width: 80%;
 margin: 20px auto;
}
#gallery {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}
#gallery img {
 margin: 10px;
 max-width: 300px;
 height: max-content;
 padding: 1rem;
}
footer {
 text-align: center;
 font-size: 0.9rem;
 padding-bottom: 1rem;
}
@media only screen and (max-width: 768px) {
 main {
 width: 95%;
 }
}
</pre></div>
Now your gallery should look like this:
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-21%2001-37-37.png" alt="Image" />
Much better. Customize your gallery as much as you want!
<h2 id=big-quantity-of-images>Big quantity of images</h2><img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-21%2013-49-33.png" alt="Image" />
Technically now we have our gallery! But imagine you have like 100 images, or your images have big names like the ones in my screenshot, you don't want add the names to the array one by one. This trick will help you a lot with the process (works in all operating systems).
<ol>
<li>Open your terminal or command prompt of your operating system.</li>
<li>Enter the following command: <code>cd YOUR PATH TO YOUR IMAGES FOLDER</code> . For example in my case my path is "Documents/tutorials/imgs", so my command is <code>cd Documents/tutorials/imgs</code>.</li>
</ol>
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-21%2013-47-58.png" alt="Image" />
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-21%2013-38-59.png" alt="Image" />
<ol start="3">
<li>Enter the command: <code>ls -1 &gt; ../names.txt</code> . This will generate a file "names.txt" with all the names of your images, as you can see in the image. Open the generated file and copy all its contents.</li>
</ol>
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-21%2013-39-36.png" alt="Image" />
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-21%2013-40-29.png" alt="Image" />
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-21%2013-48-11.png" alt="Screenshot" />
<ol start="4">
<li>Go to this website <a href='https://delim.co/'>https://delim.co/</a>, and paste the content in the "Column Data Here" column.</li>
<li>Click the option "Converter Settings" and where it says Quotes, select "Double".</li>
</ol>
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot-20220921134150.png" alt="Image" />
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot-20220921134310.png" alt="Screenshot" />
<ol start="6">
<li>Click the right arrow button and now you have all your names separated by double quotes and commas"!</li>
</ol>
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot-20220921134409.png" alt="Image" />
<ol start="7">
<li>Select and copy again, and paste the content inside of the array "images". Note: Don't replace all the content, if you repeat names the images will appear repeated too.</li>
</ol>
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-21%2013-45-21.png" alt="Image" />
Now your gallery has a lot of images, you can add more images manually adding the names in the array or repeating the trick again.
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-22%2011-42-02.png" alt="Image" />
<h2 id=bonus-open-the-image-in-a-new-tab>Bonus: Open the image in a new tab.</h2>If you want your images to have links to a new window, just replace the content of <code>&lt;section id=&quot;gallery&quot;&gt;</code> with this:
<div class="highlight"><pre>&lt;a v-bind:href=&quot;&#39;imgs/&#39;+image&quot; v-for=&quot;image in images&quot; target=&quot;_blank&quot;&gt;
&lt;img v-bind:src=&quot;&#39;imgs/&#39;+image&quot; :key=&quot;image&quot; /&gt;
&lt;/a&gt;
</pre></div>
In this case, we are also generating dynamically link tags to all our images.
<h2 id=bonus-2-play-with-vue-and-generate-more-complex-structures>Bonus 2: Play with Vue and generate more complex structures!</h2>With the beneficts of vue we can generate more complex content dynamically, for example, let's create a gallery of polaroids with the name of the image with it. Replace the content inside <code>&lt;section id=&quot;gallery&quot;&gt;</code> with the following code:
<div class="highlight"><pre>&lt;div class=&quot;polaroid&quot; v-for=&quot;image in images&quot;&gt;
&lt;a v-bind:href=&quot;&#39;imgs/&#39;+image&quot; target=&quot;_blank&quot;&gt;
&lt;figure&gt;
&lt;img v-bind:src=&quot;&#39;imgs/&#39;+image&quot;/&gt;
&lt;figcaption&gt;
&lt;em&gt;{{ image }}&lt;/em&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/a&gt;
&lt;/div&gt;
</pre></div>
Note that now <code>v-for=&quot;image in images&quot;</code> is placed in the new <code>&lt;div class=&quot;polaroid&quot;&gt;</code> element, remember, the element you want to repeat is the one you have to add the sentence <code>v-for=&quot;image in images&quot;</code>, and everything inside this element will repeat, too. Note that Vue allows us to directly put javascript values inside our html, in this case, we can display the name of your images writting directly <code>{{ image }}</code>, remember image is the temporal name of the image in turn.
Now add the following css to your previous style.css file:
<div class="highlight"><pre>.polaroid {
 background-color: #fff;
 margin: 10px;
 height: max-content;
box-shadow: 5px 5px 10px #999
}
.polaroid a {
 text-decoration: none;
}
.polaroid figcaption {
color: rgb(94, 92, 92);
 text-align: center;
 padding: 1rem 0;
}
</pre></div>
Now our gallery looks like this:
<img src="https://palemomos.neocities.org/resources/tutorials/archive/1/screenshots/Screenshot%20from%202022-09-22%2000-22-28.png" alt="Image" />
That's all! Experiment with different designs and see what happens.
<h2 id=conclusions-and-recommendations>Conclusions and recommendations</h2>We have built a dynamic gallery with VueJS, it can have hundreds of images and the maintenance will be a piece of cake.
This tutorial was aimed at people with little or no experience in javascript or programming in general. You can have a cool website without being an expert, but if you are interested in following the path of web development in the future, I recommend that you delve into the area of programming and learn javascript. Web development is a world, but javascript will be a good way to start your path. Then I highly recommend you take a deeper look at Vue, we literally only use 1% of its capacity. If you already know javascript, learn how to use Vue! You will not regret.
Thank you for reading! I hope this tutorial has been helpful. This is ONLY ONE of the ways you can make a dynamic gallery. Soon I will upload the same tutorial but now using only pure Javascript and the equivalent using jQuery.
UPDATE
I already did the <a href='https://palemomos.bearblog.dev/add-a-gallery-with-hundreds-of-images-easily-to-your-website-using-javascript-or-jquery/'>javascript and jQuery tutorial</a>.
<h2 id=which-method-use>Which method use?</h2>I have presented you three forms of doing the same thing, you can use any of them, but maybe this advices will help you.
If you want to make a simple and fast gallery, I mean without a complex structure, and also you don't have or don't want to depend on any external framework like jQuery or Vue, use the pure javascript method.
If you want to do the same thing as the previous point but for some reason you are already using jQuery, use the jQuery method.
If you want to have a gallery with a more complex structure, I recommend using the VueJS method, since being able to handle the html elements directly as they are instead of text is a pretty good advantage and avoids having syntax errors.
I'll also add a tutorial to open the images in a popup. Stay tunned ✨.
Download the full code of the project <a href='https://gitlab.com/Palemona/pale-web-tutorials/-/archive/main/pale-web-tutorials-main.zip?path=1'>here</a>.
Learn Javascript at <a href='https://www.w3schools.com/js/default.asp'>w3schools.com</a>
Learn Vue at <a href='https://vuejs.org/guide/introduction.html#what-is-vue'>vuejs.org</a>
Never stop trying 🌠
Credit for the example images: <a href='https://unsplash.com/@ujitomo?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText'>TOMOKO UJI</a>
<img src="https://i.imgur.com/3jxqrKP.jpeg" alt="Image" />
</content>
<link href="https://palemomos.bearblog.dev/add-a-gallery-with-hundreds-of-images-easily-to-your-website-with-vuejs/" rel="alternate"/>
<summary>Have you ever wanted to build a huge image gallery, but then you remember that it's a lot of work and you don't want to do it anymore? Learn how to build a dynamic gallery and solve this problem.</summary>
<category term="javascript"/>
<category term="vuejs"/>
<category term="web design"/>
<category term="web development"/>
<published>2022-09-22T05:28:22.604195+00:00</published>
</entry>
</feed>

Home · About · News · Docs · Terms