https://script.spoken-tutorial.org/index.php?action=history&feed=atom&title=Drupal%2FC3%2FControlling-Display-of-Images%2FEnglish 2026-05-14T16:22:08Z Revision history for this page on the wiki MediaWiki 1.23.17 https://script.spoken-tutorial.org/index.php?title=Drupal/C3/Controlling-Display-of-Images/English&diff=27440&oldid=prev 2016-07-20T13:12:05Z

<p></p> <table class='diff diff-contentalign-left'> <col class='diff-marker' /> <col class='diff-content' /> <col class='diff-marker' /> <col class='diff-content' /> <tr style='vertical-align: top;'> <td colspan='2' style="background-color: white; color:black; text-align: center;">← Older revision</td> <td colspan='2' style="background-color: white; color:black; text-align: center;">Revision as of 13:12, 20 July 2016</td> </tr><tr><td colspan="2" class="diff-lineno">Line 24:</td> <td colspan="2" class="diff-lineno">Line 24:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>| style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| In this tutorial, we will learn about</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>| style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| In this tutorial, we will learn about</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* Image styles and</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* <ins class="diffchange diffchange-inline">'''</ins>Image styles<ins class="diffchange diffchange-inline">''' </ins>and</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>* A photo gallery view</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>* A photo gallery view</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2">&#160;</td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2">&#160;</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td></tr> <tr><td colspan="2" class="diff-lineno">Line 38:</td> <td colspan="2" class="diff-lineno">Line 36:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>| style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| To record this tutorial, I am using</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>| style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| To record this tutorial, I am using</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&#160;</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* <ins class="diffchange diffchange-inline">'''</ins>Ubuntu Linux<ins class="diffchange diffchange-inline">''' </ins>Operating System</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* Ubuntu Linux Operating System</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* <ins class="diffchange diffchange-inline">'''</ins>Drupal<ins class="diffchange diffchange-inline">''' </ins>8 and</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* Drupal 8 and</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* <ins class="diffchange diffchange-inline">'''</ins>Firefox<ins class="diffchange diffchange-inline">''' </ins>Web browser</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* Firefox Web browser</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>You can use any web browser as per your choice.</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>You can use any web browser as per your choice.</div></td></tr> <tr><td colspan="2" class="diff-lineno">Line 84:</td> <td colspan="2" class="diff-lineno">Line 81:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>| style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 00:40</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>| style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 00:40</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>| style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| We will create an''' Image style''' for the table that we have set up.</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>| style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| We will create an''' Image style''' for the <ins class="diffchange diffchange-inline">'''</ins>table<ins class="diffchange diffchange-inline">''' </ins>that we have set up.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td colspan="2" class="diff-lineno">Line 173:</td> <td colspan="2" class="diff-lineno">Line 170:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>You can do this for any image, in any field and in any content.</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>You can do this for any image, in any <ins class="diffchange diffchange-inline">'''</ins>field<ins class="diffchange diffchange-inline">''' </ins>and in any content.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td></tr> <tr><td colspan="2" class="diff-lineno">Line 184:</td> <td colspan="2" class="diff-lineno">Line 181:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Let’s enter the''' Width''' as''' 300''' and''' Height''' as''' 300'''<del class="diffchange diffchange-inline">, and </del>then click on''' Add effect''' button.</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Let’s enter the''' Width''' as''' 300''' and''' Height''' as''' 300'''<ins class="diffchange diffchange-inline">.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">And </ins>then click on''' Add effect''' button.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td></tr> <tr><td colspan="2" class="diff-lineno">Line 191:</td> <td colspan="2" class="diff-lineno">Line 191:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>This shows that''' Drupal''' automatically creates versions of images for each''' <del class="diffchange diffchange-inline">image </del>style.'''</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>This shows that''' Drupal''' automatically creates versions of images for each''' <ins class="diffchange diffchange-inline">Image </ins>style.'''</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td colspan="2" class="diff-lineno">Line 229:</td> <td colspan="2" class="diff-lineno">Line 229:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Here’s our view on our website.</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Here’s our view on our <ins class="diffchange diffchange-inline">'''</ins>website<ins class="diffchange diffchange-inline">'''</ins>.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td colspan="2" class="diff-lineno">Line 247:</td> <td colspan="2" class="diff-lineno">Line 247:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Set the''' view''' setting as''' Content<del class="diffchange diffchange-inline">''' </del>of type<del class="diffchange diffchange-inline">''' </del>Events'''.</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Set the''' view''' setting as''' Content <ins class="diffchange diffchange-inline">- </ins>of type <ins class="diffchange diffchange-inline">- </ins>Events'''.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>| style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 01:15</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>| style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 01:15</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>| style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| This particular '''view''' could be used as photo-of-the-day or gallery of images <del class="diffchange diffchange-inline">from </del>any event.</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>| style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| This particular '''view''' could be used as photo-of-the-day or gallery of images <ins class="diffchange diffchange-inline">for </ins>any event.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td></tr> <tr><td colspan="2" class="diff-lineno">Line 325:</td> <td colspan="2" class="diff-lineno">Line 325:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>So, you see, a grid layout differs from a table.</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>So, you see, a grid layout differs from a <ins class="diffchange diffchange-inline">'''</ins>table<ins class="diffchange diffchange-inline">'''</ins>.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>All the fields that you choose from a node are in one cell.</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>All the <ins class="diffchange diffchange-inline">'''</ins>fields<ins class="diffchange diffchange-inline">''' </ins>that you choose from a <ins class="diffchange diffchange-inline">'''</ins>node<ins class="diffchange diffchange-inline">,''' </ins>are in one cell.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td colspan="2" class="diff-lineno">Line 366:</td> <td colspan="2" class="diff-lineno">Line 366:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>In this tutorial we have learnt about</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>In this tutorial we have learnt about</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* Image styles and</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* <ins class="diffchange diffchange-inline">'''</ins>Image styles<ins class="diffchange diffchange-inline">''' </ins>and</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>* A photo gallery view</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>* A photo gallery view</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2">&#160;</td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2">&#160;</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td></tr> <tr><td colspan="2" class="diff-lineno">Line 382:</td> <td colspan="2" class="diff-lineno">Line 380:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>* adapted from Acquia and OSTraining</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>* adapted from Acquia and OSTraining</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>* and revised by Spoken Tutorial Project, IIT Bombay.</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>* and revised by Spoken Tutorial Project, IIT Bombay.</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2">&#160;</td></tr> <tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2">&#160;</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td><td class='diff-marker'>&#160;</td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td></tr> </table>

Nancyvarkey https://script.spoken-tutorial.org/index.php?title=Drupal/C3/Controlling-Display-of-Images/English&diff=27358&oldid=prev 2016-07-13T09:20:08Z

<p>Created page with &quot;&#039;&#039;&#039;Title of Script:&#039;&#039;&#039; Controlling Display of Images &#039;&#039;&#039;Keywords: video tutorial, drupal, Media, Image Styles, Scales and Sizes, Grid, Effect, Event logo, Grid Layout, Displa...&quot;</p> <p><b>New page</b></p><div>'''Title of Script:''' Controlling Display of Images<br /> <br /> '''Keywords: video tutorial, drupal, Media, Image Styles, Scales and Sizes, Grid, Effect, Event logo, Grid Layout, Display, Format, Fields, Filter, Sort'''<br /> <br /> <br /> <br /> {| style=&quot;border-spacing:0;&quot;<br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| &lt;center&gt;Visual Cue&lt;/center&gt;<br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| &lt;center&gt;Narration&lt;/center&gt;<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| Slide 1:<br /> <br /> Controlling Display of Images<br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| Welcome to the Spoken tutorial on''' Controlling Display of Images'''<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| Slide 2:<br /> <br /> Learning Objectives<br /> <br /> <br /> <br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| In this tutorial, we will learn about<br /> <br /> * Image styles and<br /> * A photo gallery view<br /> <br /> <br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| Slide 3:<br /> <br /> System requirement<br /> <br /> <br /> <br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| To record this tutorial, I am using<br /> <br /> <br /> * Ubuntu Linux Operating System<br /> * Drupal 8 and<br /> * Firefox Web browser<br /> <br /> You can use any web browser as per your choice.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| <br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| Let us open our website which we created earlier.<br /> <br /> |}<br /> <br /> {| style=&quot;border-spacing:0;&quot;<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| '''Time'''<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| '''Narration'''<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 00:10<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| In''' Drupal''', we can manipulate the size and scale of an image to fit the different needs of the''' site'''.<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 00:15<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| '''Drupal''' takes the original image and converts it to the size and scale we want.<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 00:25<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| Then, it saves that version of the file.<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 00:30<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| Click on''' Configuration'''.<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 00:32<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| We are going to create 2''' image styles''' here.<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 00:36<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| Scroll down and locate''' MEDIA tab.'''<br /> <br /> <br /> Here, we can see''' Image Styles'''. Click on it.<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 00:40<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| We will create an''' Image style''' for the table that we have set up.<br /> <br /> <br /> And also for the next view that we will be creating, which is a grid of logos.<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 00:53<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| Click on''' Add image styles.'''<br /> <br /> <br /> In the''' Image style name,''' we will type''' Upcoming Events 150 x 150'''<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 01:05<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| Notice that''' Drupal''' fills out the machine name for us.<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 01:09<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| This is our''' Image style name.'''<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 01:15<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| Now, click on''' Create new style'''.<br /> <br /> <br /> On the left, is the original image which is''' 600''' by''' 800 pixels'''.<br /> <br /> <br /> And the edited version of the image is on the right.<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 01:25<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| Under''' EFFECT''', click on''' Select a new effect''' dropdown.<br /> <br /> <br /> Many options are displayed in this list.<br /> <br /> <br /> Among these options, I will choose''' Scale and crop''' effect.<br /> <br /> <br /> You can choose any option that you want to. For eg:''' Rotate, Resize''' or any other.<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 01:50<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| Click on the''' Add''' button.<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 01:52<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| Enter the''' Width''' as''' 150''' and''' Height''' as''' 150'''.<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 01:57<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| Remember - never make the''' Width''' and''' Height''' larger than the original image.<br /> <br /> <br /> Doing so, will cause the image to pixelate.<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 02:05<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| Click''' Add effect'''.<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 02:10<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| Here is our new''' Image Style'''.<br /> <br /> <br /> In the right-hand-side image, we can see that it is now scaled and cropped.<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 02:15<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| Let’s create another one.<br /> <br /> <br /> Click on''' Image styles''' and then on''' Add image styles''' button.<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 02:25<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| This time, in the''' Image style name''' we will type''' photo gallery of logos.'''<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 02:30<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| Then click on''' Create new style''' button.<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 02:35<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| This can be an image in any photo gallery on your machine.<br /> <br /> <br /> You can do this for any image, in any field and in any content.<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 02:45<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| Once again, click on''' Select a new effect''' and then on''' Scale and crop''' option.<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 02:50<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| Click on''' Add''' button.<br /> <br /> <br /> Let’s enter the''' Width''' as''' 300''' and''' Height''' as''' 300''', and then click on''' Add effect''' button.<br /> <br /> |-<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| 03:05<br /> | style=&quot;background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;&quot;| Notice that the right-hand-side image now has the new dimensions of''' 300''' by''' 300'''.<br /> <br /> <br /> This shows that''' Drupal''' automatically creates versions of images for each''' image style.'''<br /> <br /> <br /> And stores them on the''' site'''.<br /> <br /> |}<br /> <br /> {| style=&quot;border-spacing:0;&quot;<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| '''Time'''<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| '''Narration'''<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 00:05<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| Click''' Structure''', then on''' Views.'''<br /> <br /> <br /> Let’s now update our''' Upcoming Events view''' by clicking on''' Edit'''.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 00:15<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| Click on''' Event Logo''' and change the''' Image Style''' to''' Upcoming Events.'''<br /> <br /> <br /> Then click on''' Apply'''.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 00:30<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| Scroll down to the preview section and we find that our logos are all uniform.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 00:35<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| Now, click on''' Save'''.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 00:40<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| Click on''' Back to site'''.<br /> <br /> <br /> Here’s our view on our website.<br /> <br /> <br /> This is what''' Image Styles''' does.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 00:46<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| Let’s now create a new''' view''' as a grid layout for all these events.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 00:55<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| To do this, click on''' Structures''', then''' Views''', and''' Add new view'''.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 01:00<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| We will name this as''' Photo Gallery'''.<br /> <br /> <br /> Set the''' view''' setting as''' Content''' of type''' Events'''.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 01:15<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| This particular '''view''' could be used as photo-of-the-day or gallery of images from any event.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 01:27<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| Click on''' Create a page.'''<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 01:29<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| Scroll down and select''' Grid''' of''' fields'''.<br /> <br /> <br /> Please note: we can choose any other option provided in the drop-down by''' Drupal,''' also.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 01:45<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| In''' Items to display''' field, choose''' 9''' as this gives a 3 by 3 grid.<br /> <br /> <br /> Let’s check''' Create a menu link''', as well.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 01:50<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| Under the''' Menu''' dropdown, choose the option''' Main navigation.'''<br /> <br /> <br /> Then click''' Save and Edit'''.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 02:00<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| Let’s cross-check with our 5 criteria:<br /> <br /> # The''' Display''' is a''' Page''',<br /> # The''' Format''' is a''' Grid''',<br /> # There is only one''' Field''' named''' Title,'''<br /> # And lastly, the''' Filter''' and''' Sort Criteria'''.<br /> <br /> We will leave these as they are, for now.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 02:15<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| Scroll down.<br /> <br /> <br /> We see here - we have 4 columns and 9 events.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 02:20<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| To change the number of columns, in''' Format,''' click on the''' Settings''' option'''.'''<br /> <br /> <br /> Then change the number of columns to 3 and click''' Apply'''.<br /> <br /> <br /> That will give us a 3 by 3 grid.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 02:35<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| In''' Fields''', click on''' Add.'''<br /> <br /> <br /> Locate the''' Event Logo''', put a check mark on it and then click on''' Apply'''.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 02:50<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| This time, choose the''' photo gallery of logos''' as''' Image style.'''<br /> <br /> <br /> In''' Link image to,''' choose''' Content''', and then click''' Apply'''.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 03:00<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| Immediately, in the''' Preview''' section below, a grid is laid out.<br /> <br /> <br /> So, you see, a grid layout differs from a table.<br /> <br /> <br /> All the fields that you choose from a node are in one cell.<br /> <br /> <br /> And we can decide how many cells we want to display.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 03:20<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| Let’s click on''' Save''' now.<br /> <br /> <br /> Let’s click on''' Back to site''' button and then click on''' Photo Gallery'''.<br /> <br /> <br /> This looks quite nice.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| 03:40<br /> | style=&quot;border:1pt solid #000000;padding:0.185cm;&quot;| On a small device like a mobile, all the images scale down to maintain their 3 by 3 grid.<br /> <br /> <br /> And that is what''' Drupal''' does with a grid.<br /> <br /> <br /> With this we come to the end of this tutorial.<br /> <br /> |}<br /> <br /> {| style=&quot;border-spacing:0;&quot;<br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| Slide 5:<br /> <br /> Summary<br /> <br /> <br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| Let us summarize.<br /> <br /> <br /> In this tutorial we have learnt about<br /> <br /> * Image styles and<br /> * A photo gallery view<br /> <br /> <br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| Slide 6:<br /> <br /> Acknowledgement<br /> <br /> <br /> <br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| This video is<br /> <br /> * adapted from Acquia and OSTraining<br /> * and revised by Spoken Tutorial Project, IIT Bombay.<br /> <br /> <br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| Slide 7:<br /> <br /> Acknowledgement<br /> <br /> <br /> <br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| The video at this link summarises the Spoken Tutorial project.<br /> <br /> <br /> Pls download and watch it.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| Slide 8:<br /> <br /> Spoken Tutorial Workshops<br /> <br /> <br /> <br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| The Spoken Tutorial Project Team conducts workshops and gives certificates.<br /> <br /> <br /> For more details, please write to us.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| Slide 9:<br /> <br /> Acknowledgement<br /> <br /> <br /> <br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| Spoken Tutorial Project is funded by<br /> <br /> * NMEICT, Ministry of Human Resource Development and<br /> * NVLI, Ministry of Culture<br /> <br /> Government of India.<br /> <br /> |-<br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| <br /> | style=&quot;border:1pt solid #000000;padding:0.097cm;&quot;| This is Ameesha Bhorkhade signing off.<br /> <br /> <br /> Thanks for joining.<br /> <br /> |}</div>

Priyacst