Exercise 7-3 Walkthrough

Pages 156-158

Step 1

• We’re going to give the Black Goose Bistro Gallery page a makeover using responsive images.

• Instead of the user clicking a thumbnail and going to a separate page (as we did in Exercise 07-02), the large images will appear right on the page and resize to fill the available space.  Pretty cool.

Read pages 146-156 before starting Exercise 7-3.

Exercise 7-3 What you need to know for this exercise

1. The large images that are displayed on computer screens are overkill for the smaller screens on smartphones and tablets.  And the larger file sizes of these images means it will take longer than it needs to be to display them on smartphones and tablets.

2. The solution: Responsive web design.  Responsive means a website will look just as good on small screen like a smartphone as it does on a much larger screen.

3. The srcset attribute used with the <img> element allows you to specify a list of image source options for the browser to choose from, depending on the size of the screen.

4. Its basic syntax is <img src="image-URL" alt="" srcset="image-URL #x, image-URL #x">

5. The sizes attribute allows you to limit unnecessary data downloads by providing appropriately sized images.  Smaller sized images for smaller screens.  Larger sized images for larger screens.

NOTE: Pages 147 to 152 in the text can be a bit confusing, so I have these additional resources that help to explain it.

6. On a mobile device, the viewport fills the whole screen.  On a desktop browser, the viewport is the area where the page displays, not including the scrollbars.

7. The <picture>…</picture> element has no attributes; it is just a wrapper for some number of source elements and an img element.

8. The <source>…</source> element specifies alternate image sources.  It has the srcset attribute and either the media or type attributes.

NOTE: A great place to learn about the picture element is here:

https://www.w3schools.com/html/html_images_picture.asp 

NOTE: A great place to learn about the source element and srcset attribute is here:

https://www.w3schools.com/tags/att_source_srcset.asp 

8.  Each source element includes a media attribute and a srcset attribute.  It can also use the sizes attribute

9.  For the newer image-format-based selections (i.e. the WebP, JPEG 2000, and JPEG XR image formats) , each source element has two attributes: the srcset attribute that we’ve seen before, and the type attribute for specifying the type of image file.

Making the large images appear right on the home page Instead of a separate page

Step 2

Open File Explorer, and navigate to the Exercise 07-03 subfolder in the Ch7 folder.  Open the responsivegallery subdirectory, and then open the index.html file in your text editor.

NOTE: The index.html file mistakenly has as its title, Blackstone Bistro Gallery when in fact it should be the Black Goose Bistro Gallery.  This is just a mistake in the materials for this exercise and can be ignored.

Step 3 (this has already been done for you)

The meta element is used to set the viewport to the same size as the device width, which is required to make this page responsive.  This element is already provided for you as shown below in bold text:

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>Black Goose Bistro Gallery</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

Step 4  (this has already been done for you)

In the <style> section the CSS that sets the maximum width to 100% of the available space for the img elements is likewise already provided for you.  Here, img is the selector, max-width is the property, and 100% is the value.

img {

  max-width: 100%;

}

Adding the picture element to the Our Baked Goods paragraph

Step 6

To change between horizontal and square versions of the image on this page, we need to use the picture element in the first paragraph after “Our Baked Goods,” including the picture wrapper and its required img element.   The img element points to the default small (400 pixels by 400 pixels) square version of the image (bread-400.jpg).  

Add a line break element <br> after the picture element to start the text on the next line as shown here in bold text:

<h2>Our Baked Goods</h2>

<p>

<picture>

    <img src="images/bread-400.jpg" alt="close-up of sliced rustic bread">

</picture>

<br>We start our day at the crack of dawn to bake our own muffins, bread, and dinner rolls. Loaves not used that day are donated to the local food shelter. </p>

This bread-400.jpg image will be used for devices with small screens.

Step 7

Adding a source element inside the picture element will tell the browser to use a 1200-pixel-wide landscape version of the image when the viewport is larger than 480 pixels.  This source element is shown below in bold text.  Notice it goes after the opening picture tag <picture> and before the img element.

<h2>Our Baked Goods</h2>

<p>

<picture>

    <source media="(min-width: 480px)" srcset="images/bread-1200.jpg">

    <img src="images/bread-400.jpg" alt="close-up of sliced rustic bread">

</picture>

<br>We start our day at the crack of dawn to bake our own muffins, bread, and dinner rolls. Loaves not used that day are donated to the local food shelter. </p>

Because there is only one image specified in the source, you could have used a simple src attribute instead of the source element.

Step 8

The bread-1200.jpg image is rather large, so a 800 pixel version of that image could also be used.

The srcset attribute specifies a comma-separated list of images and their respective pixel widths with w-descriptors.

Before we add the 800 pixel version of the image, we need to add the 1200w descriptor to the bread-1200.jpg image like this:

srcset="images/bread-1200.jpg 1200w    (Don't type in anything just yet)

Now you can add the 800-pixel bread-800.jpg image to the srcset attribute with the 800w descriptor :

srcset="images/bread-1200.jpg 1200w, images/bread-800.jpg 800w"   (don't type in anything just yet)

Step 9

Finally, use the sizes attribute to let the browser know that the image will occupy 80% of the viewport width by giving it a value of 80vw.  Here is how it will all look, with this new added text markup shown in bold text here:

<p>

<picture>

  <source media="(min-width: 480px)" 

srcset="images/bread-800.jpg 800w, 

          images/bread-1200.jpg 1200w"

          sizes="80vw">

  <img src="images/bread-400.jpg" alt="close-up of sliced rustic bread">

</picture>

<br>We start our day at the crack of dawn to bake our own muffins, bread, and dinner rolls. Loaves not used that day are donated to the local food shelter. </p>

Step 10

Save the index.html file back into the responsivegallery folder that's in the Exercise 07-03 folder.

Step 11

In Sublime, right-click your mouse and  select Open in Browser.  If you are using another text editer, use File Explorer to go to the responsivegallery folder that's in the Exercise 07-03 folder, and open the the index.html file in your web browser. 

Try changing the width of the browser to resize the window.  When the browser width is narrow, the 400 pixel version of the bread photo should appear as shown below.  When the width of the browser is larger, it will switch to either the 800 pixel or the 1200 pixel version of the photo.

Finish by adding these same settings to the last two images on this page

Step 12

Go back to your text editor, and in the responsivegallery folder, add the two remaining images, burgers and fish, to the index.html page.  The entire picture element for each is shown below in bold text.

<h1>Black Goose Bistro Gallery</h1>

<p>Not is our food good, it's also good-looking! Our patrons often stop to admire our fare with a quick Instagram before digging in. We've collected a few of our favorite shots here.</p>

<h2>Our Baked Goods</h2>

<p>

<picture>

  <source media="(min-width: 480px)" srcset="images/bread-800.jpg 800w, images/bread-1200.jpg 1200w" sizes="80vw">

  <img src="images/bread-400.jpg" alt="close-up of sliced rustic bread">

</picture>

<br>We start our day at the crack of dawn to bake our own muffins, bread, and dinner rolls. Loaves not used that day are donated to the local food shelter. </p>

<h2>Our Burgers</h2>

<p>

<picture>

  <source media="(min-width: 480px)" srcset="images/burgers-800.jpg 800w, images/burgers-1200.jpg 1200w" sizes="80vw">

  <img src="images/burgers-400.jpg" alt="juicy burgers on a cutting board">

</picture><br>

People come from all over to enjoy our lovingly made burgers. We grind our own locally-sourced organic beef and turkey so you know it's fresh and free from fillers and other nonsense. Go for one of our creative topping combos or stick with the classics. </p>

<h2>Catch of the Day</h2>

<p>

<picture>

  <source media="(min-width: 480px)" srcset="images/fish-800.jpg 800w, images/fish-1200.jpg 1200w" sizes="80vw">

  <img src="images/fish-400.jpg" alt="baked fish with potatoes and cherry tomatoes">

</picture><br>

Our chef works with local fisherman to pick the freshest the sea has to offer for our daily seafood special. Our Roast Cod Caponata with Roasted Potatoes is an old favorite with our regulars.</p>

</body>

</html>

Step 13

Save the index.html file back into the responsivegallery folder that's in the Exercise 07-03 folder.

Step 14

In Sublime, right-click your mouse and  select Open in Browser.  If you are using another text editer, use File Explorer to go to the Exercise 07-03 folder, and open the the index.html file in your web browser.  It should now appear as shown below: