website/webdevelopment/javascriptessentialtraining.../responsiveimages.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Learning Website</title>
<link href="/styles/styles.css" rel="stylesheet" type="text/css">
<link href="/webdevelopment/styles/styles.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<article>
    <h1 class="coursetitle">JavaScript Essential Training</h1>

    <h2 class="lecturer">LinkedIn Learning : Morten Rand-Hendriksen</h2>

    <h1 class="episodetitle">Project: Automated Responsive Images Markup</h1>

	<h2 class="sectiontitle">Project Breakdown</h2>

	<p>The last project will help to solve a real problem when creating responsive web pages.   Responsive Images are a topic all on their own and are covered in the course, <a href=" https://www.linkedin.com/learning/responsive-images">Responsive Images</a> which is also by Morten.  It may be worth bearing in mind that this course is from 2015 so there may be other, more general courses that would be better.</p>
	<p>In addition, although this project does provide a solution to a real-world problem, it is probably not the best solution and that is something that should be considered before implementing it in a project.</p>
	<p>The project will use the Moonwalk demo website as an example, and this website does include a number of non-responsive images.  The images are quite large and you would download the same images, regardless of the platform on which you are viewing the website.  In the project, we will use JavaScript to inject some code for handling responsive images into the HTML.</p>
	<p>We will start off by preventing the images from being downloaded straight away (unless JavaScript is not enabled).  Next, we will get all of the image references from the page and use these to generate some responsive images markup and we will then inject that markup back in to the HTML page.</p>
	<p>There are several advantages arising from this project in that it provides a demonstration of how JavaScript can be used to address problems with HTML and improve the code and also to introduce advanced features only where these are supported by the browser.</p>
	<h1 class="sectiontitle">Rundown of the Project Setup</h1>
	<p>The starting point for this project is a copy of the Moonwalk website, but there have been some changes made to the HTML code for this exercise.</p>
	<p>The following code is taken from the HTML file in an earlier exercise.</p>
	<pre><code>
		1.	&lt;ul class="slides"&gt;
		2.	                &lt;li&gt;
		3.	                    &lt;img src="images/mainpromo/welcome01.jpg" /&gt;
		4.	                &lt;/li&gt;
		5.	                &lt;li&gt;
		6.	                    &lt;img src="images/mainpromo/welcome02.jpg" /&gt;
		7.	                &lt;/li&gt;
		8.	                &lt;li&gt;
		9.	                    &lt;img src="images/mainpromo/welcome03.jpg" /&gt;
		10.	                &lt;/li&gt;
		11.	                &lt;li&gt;
		12.	                    &lt;img src="images/mainpromo/welcome04.jpg" /&gt;
		13.	                &lt;/li&gt;
		14.	            &lt;/ul&gt;
	</code></pre>
	<p class="caption">Figure 113 - a snippet of HTML code from an earlier version of the index.html file for the Moonwalk web page</p>
	<p>In figure 114, we have the same snippet of code, but this time taken from the version of the file we are using for this exercise.</p>
	<pre><code>
		1.	&lt;ul class="slides"&gt;
		2.	                &lt;li&gt;
		3.	                    &lt;img src="images/mainpromo/welcome01-800.jpg" alt="" data-type="showcase" /&gt;
		4.	                &lt;/li&gt;
		5.	                &lt;li&gt;
		6.	                    &lt;img src="images/mainpromo/welcome02-800.jpg" alt="" data-type="showcase" /&gt;
		7.	                &lt;/li&gt;
		8.	                &lt;li&gt;
		9.	                    &lt;img src="images/mainpromo/welcome03-800.jpg" alt="" data-type="showcase" /&gt;
		10.	                &lt;/li&gt;
		11.	                &lt;li&gt;
		12.	                    &lt;img src="images/mainpromo/welcome04-800.jpg" alt="" data-type="showcase" /&gt;
		13.	                &lt;/li&gt;
		14.	&lt;/ul&gt;
	</code></pre>
	<p class="caption">Figure 114 - the same snippet of code as shown in figure 113, but taken from the HTML file for this exercise</p>
	<p>The first difference to note is that -800 has been added to the end of each file name and we will see the reason for that shortly.</p>
	<p>Secondly, a data-type has been added to create groups of pictures.  In figure 114, the data-type is "showcase".  We have other similar groups of images with data-types "reason", "feature" and "story".  This is because the different sets of images have different sizes on the version of the page we look at on a PC so we need to be able to style each group differently to avoid having all of our images the same size.</p>
	<p>For each image, the sites images folder has a variety of different size ranging from 400 pixels wide up to 2000 pixels wide.  This is where the -800 comes in.  This is our default size so if the page is viewed on a device where JavaScript is not enabled, the user will see these 800 pixel-width images.</p>
	<p>This is probably a reasonable compromise because it will give us images on a small screen that are probably going to be too big, but not ridiculously so.  They may also be too small for a larger screen but again, not ridiculously so.</p>
	<h1 class="sectiontitle">Loop Through All Images in the Document</h1>
	<p>In our JavaScript file, we are going to create an array as a constant called images.</p>
	<pre><code>
		const IMAGES = document.querySelectorAll("img");
	</code></pre>
	<p>We will iterate over the images in the array and for each, we will get the value of the src attribute.  For now, we will just log that to the console.</p>
	<pre><code>
		1.	for (var i = 0; i &lt; IMAGES.length; i++) {
		2.	    let imgSrc = IMAGES[i].getAttribute("src");
		3.	    console.log(imgSrc);
		4.	}
	</code></pre>
	<p>We can save this and refresh the page, and the list of images is output to the console.</p>
	<p>Inside the loop, we will add a line of code to strip off the tail end of the image source.  Since each image has a standardised filename, this is relatively straightforward.  We want to strip off the part of the filename that identifies which particular source image should be loaded.  For example, if we take the first image from the list in figure 114, that is</p>
	<pre><code>
		&lt;img src="images/mainpromo/welcome01-800.jpg" alt="" data-type="showcase" /&gt;
	</code></pre>
	<p>We can split that filename into two parts.  The first part</p>
	<pre><code>
		welcome01
	</code></pre>
	<p>effectively identifies which image we want to load since this is the unique part of the filename.  The rest of the filename<p>
	<pre><code>
		-800.jpg
	</code></pre>
	<p>identifies the width in pixels (as well as the extension, of course).  It's this second part that we want to strip off.  The intention is that when we have calculated which version of the image we want to load, we can add that on again to give us a complete filename that the browser will load.</p>
	<p>We can remove the end by using the slice function</p>
	<pre><code>
		imgSrc = imgSrc.slice(0, -8);
	</code></pre>
	<p>That will give us a slice counting from the first character (with index 0) to the character that is 9th from the end (that is, the last character minus 8).  Again, we can save this and refresh the page and we see the same list again, but with the last 8 characters removed.</p>
	<p>We also want to retrieve the data-type for each of the images and we can do that with the getAttribute function so we will add this line to the for loop.</p>
	<pre><code>
	let type = IMAGES[i].getAttribute("data-type");
	</code></pre>
	<p>We'll log that to the console as well and again, we can save and refresh the browser and we will see a list of our truncated filenames with each one followed by its data type.</p>
</article>
<button class="previous" onclick="window.location.href='loops.html';">
		Previous Chapter - Loops
</button>
<button class="next" onclick="window.location.href='troubleshooting.html';">
		Next Chapter - Troubleshhoting, Validating and Minifying JavaScript
</button>
<button class="coursebutton" onclick="window.location.href='javascriptessentialtraining.html'">
		Course Contents
</button>
<button class="webdevbutton" onclick="window.location.href='/webdevelopment/webdevelopment.html'">
		Web Development Page
</button>
<button class="homebutton" onclick="window.location.href='/index.html'">
		Home
</button>
</body>
</html>