forked from jenniferwagner18/d2l-content-templates
-
Notifications
You must be signed in to change notification settings - Fork 0
/
08_images.html
90 lines (89 loc) · 4.81 KB
/
08_images.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../assets/thirdpartylib/bootstrap-4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/thirdpartylib/fontawesome-free-5.9.0-web/css/all.min.css">
<link rel="stylesheet" href="../assets/css/styles.min.css">
<link rel="stylesheet" href="../assets/css/custom.css">
<script src="../assets/thirdpartylib/jquery/jquery-3.3.1.slim.min.js" defer></script>
<script src="../assets/thirdpartylib/popper-js/popper.min.js" defer></script>
<script src="../assets/thirdpartylib/bootstrap-4.3.1/js/bootstrap.min.js" defer></script>
<script src="../assets/js/scripts.min.js" defer></script>
<title>Image Samples</title>
</head>
<body><main>
<div class="container-fluid">
<div class="row">
<div class="col-12 banner-img"><img src="../assets/img/banner_05.jpg" alt=""></div>
<div class="col-sm-10 offset-sm-1">
<!-- DO NOT EDIT CODE ABOVE THIS LINE -->
<h1>Image Samples</h1>
<p>This page includes samples of images.</p>
<h2>Best Practices</h2>
<p>Images can be added to any of your pages to create visual interest and help break up text-heavy courses. This section illustrates the different ways images can be used.</p>
<p>You can do one of the following:</p>
<ul>
<li>Replace the images and text on this page</li>
<li>Follow the directions below to insert new images on other pages</li>
<li>Copy the image alignment samples from this page and past them to other pages</li>
</ul>
<h3>Replace Image</h3>
<p>This template comes with some image placeholders. To replace the image:</p>
<ol>
<li>Select the image and delete it (<strong>Note</strong>: Do not move your cursor)</li>
<li>Click the <strong>Insert Image</strong> icon</li>
<li>Select the source of your image</li>
<li>Click the <strong>Choose Destination</strong> button to save it to the folder you want</li>
</ol>
<p>Recommendation for banner image size: at least 1200 pixels wide and 400 pixels high.</p>
<h3>Insert New Image</h3>
<p>Inserting your own image is simple. Once in the Edit HTML mode, you can use <strong>Insert Image</strong> to add an image. If the image is not the right size, you can edit it using the inline image editor.</p>
<h3>Image Alignment</h3>
<p>The HTML editor provides <strong>Align Left</strong>, <strong>Align Right</strong> and <strong>Align Full</strong> functions to place an image in particular location.</p>
<p>For example, if you want your image to appear on the left with the text wrapping around it:</p>
<ol>
<li>Insert your image on the empty line before the paragraph</li>
<li>Crop the image or set its dimension to your desired size</li>
<li>Apply <strong>Align Left</strong> on the selected image</li>
</ol>
<h2>Copying Images</h2>
<p>To copy any of the following images, please select everything between "start copy" and "end copy" for the specific image, then copy and paste into the HTML Editor.</p>
<p><strong>To copy images onto a different page please make sure the page is in 'Edit' mode.</strong></p>
<h3>Image Align Left</h3>
<p class="small">Image Align Left: start copy</p>
<figure class="float-left">
<p><img src="../assets/img/column_02.jpg" alt="placeholder" /></p>
<figcaption>Caption, <a href="https://www.d2l.com/">link example </a></figcaption>
</figure>
<p>Floating image to the left with text wrapping around it. You can replace the image and text with your own. The text area below the image can be used to include a caption, which describes the important content displayed in the image.</p>
<div class="clearfix"></div>
<p class="small">Image Align Left: end copy</p>
<h3>Image Align Right</h3>
<p class="small">Image Align Right: start copy</p>
<figure class="float-right">
<p><img src="../assets/img/column_03.jpg" alt="placeholder" /></p>
<figcaption>Caption, <a href="https://www.d2l.com/">link example </a></figcaption>
</figure>
<p>Floating image to the right with text wrapping around it. You can replace the image and text with your own. The text area below the image can be used to include a caption, which describes the important content displayed in the image.</p>
<div class="clearfix"></div>
<p class="small">Image Align Right: end copy</p>
<h3>Image Align Full</h3>
<p>Large image will automatically adjust to its parent to fit small screen size. Recommended image size: at least 1200 pixels wide.</p>
<p class="small">Image Align Full: start copy</p>
<figure>
<p><img src="../assets/img/image_align.jpg" alt="placeholder" /></p>
<figcaption>Caption, <a href="https://www.d2l.com/">link example </a></figcaption>
</figure>
<div class="clearfix"></div>
<p class="small">Image Align Full: end copy</p>
<!-- DO NOT EDIT CODE BELOW THIS LINE -->
</div>
<div class="col-12"><footer>
<p><img src="../assets/img/logo.png" alt="" /></p>
</footer></div>
</div>
</div>
</main></body>
</html>