Difference between revisions of "Drupal/C3/Controlling-Display-of-Images/English-timed"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with " {|border=1 | '''Time''' | '''Narration''' |- | 00:01 | Welcome to the Spoken tutorial on''' Controlling Display of Images''' |- | 00:06 | In this tutorial, we will learn ab...")
 
 
(5 intermediate revisions by 3 users not shown)
Line 6: Line 6:
 
|-
 
|-
 
| 00:01
 
| 00:01
−
| Welcome to the Spoken tutorial on''' Controlling Display of Images'''
+
| Welcome to the '''Spoken tutorial''' on''' Controlling Display of Images'''.
  
 
|-
 
|-
 
| 00:06
 
| 00:06
−
| In this tutorial, we will learn about  '''Image styles''' and  A photo gallery view
+
| In this tutorial, we will learn about  '''Image styles''' and  a '''photo gallery view'''.
  
 
|-
 
|-
−
| 00:12
+
| 00:12  
−
| To record this tutorial, I am using
+
| To record this tutorial, I am using:'''Ubuntu Linux''' Operating System, '''Drupal''' 8 and '''Firefox''' Web browser.
−
 
+
−
* '''Ubuntu Linux''' Operating System
+
−
* '''Drupal''' 8 and
+
−
* '''Firefox''' Web browser
+
  
 
|-
 
|-
Line 34: Line 30:
 
|-
 
|-
 
| 00:37
 
| 00:37
−
| '''Drupal''' takes the original image and converts it to the size and scale we want.
+
| Drupal takes the original image and converts it to the size and scale we want.
  
 
|-
 
|-
Line 50: Line 46:
 
|-
 
|-
 
| 00:51
 
| 00:51
−
| Scroll down and locate''' MEDIA tab.'''
+
| Scroll down and locate''' MEDIA''' tab.
  
 
|-
 
|-
Line 62: Line 58:
 
|-
 
|-
 
| 01:03
 
| 01:03
−
| And also for the next view that we will be creating, which is a grid of logos.
+
| And also for the next view that we will be creating which is a '''grid''' of '''logo'''s.
  
 
|-
 
|-
Line 70: Line 66:
 
|-
 
|-
 
| 01:12
 
| 01:12
−
| In the''' Image style name,''' we will type''' Upcoming Events 150 x 150'''
+
| In the''' Image style name,''' we will type "Upcoming Events 150 x 150".
  
 
|-
 
|-
 
| 01:19
 
| 01:19
−
| Notice that''' Drupal''' fills out the machine name for us.
+
| Notice that Drupal fills out the '''machine name''' for us.
  
 
|-
 
|-
Line 86: Line 82:
 
|-
 
|-
 
| 01:29
 
| 01:29
−
| On the left, is the original image which is''' 600''' by''' 800 pixels''' and the edited version of the image is on the right.
+
| On the left, is the original image which is 600 by 800 pixels and the edited version of the image is on the right.
  
 
|-
 
|-
 
| 01:38
 
| 01:38
−
| Under''' EFFECT''', click on''' Select a new effect''' dropdown.
+
| Under''' EFFECT''', click on''' Select a new effect''' drop-down.
  
 
|-
 
|-
 
| 01:42
 
| 01:42
−
| Many options are displayed in this list. Among these options, I will choose''' Scale and crop''' effect.
+
| Many options are displayed in this list. Among these options, I will choose "Scale and crop" effect.
  
 
|-
 
|-
 
| 01:49
 
| 01:49
−
| You can choose any option that you want to. For eg:''' Rotate, Resize''' or any other.
+
| You can choose any option that you want to. For e.g:''' Rotate, Resize''' or any other.
  
 
|-
 
|-
Line 130: Line 126:
 
|-
 
|-
 
| 02:29
 
| 02:29
−
| This time, in the''' Image style name''' we will type''' photo gallery of logos.'''
+
| This time, in the''' Image style name''' we will type: "photo gallery of logos".
  
 
|-
 
|-
Line 138: Line 134:
 
|-
 
|-
 
| 02:38
 
| 02:38
−
| This can be an image in any photo gallery on your machine.
+
| This can be an image in any '''photo gallery''' on your machine.
  
 
|-
 
|-
Line 146: Line 142:
 
|-
 
|-
 
| 02:47
 
| 02:47
−
| Once again, click on''' Select a new effect''' and then on''' Scale and crop''' option.
+
| Once again, click on''' Select a new effect''' and then on "Scale and crop" option.
  
 
|-
 
|-
Line 158: Line 154:
 
|-
 
|-
 
| 03:03
 
| 03:03
−
| Notice that the right-hand-side image now has the new dimensions of''' 300''' by''' 300'''.
+
| Notice that the right-hand-side image now has the new dimensions of 300 by 300.
  
 
|-
 
|-
 
| 03:09
 
| 03:09
−
| This shows that''' Drupal''' automatically creates versions of images for each''' Image style''' and stores them on the''' site'''.
+
| This shows that Drupal automatically creates versions of images for each''' Image style''' and stores them on the site.
  
 
|-
 
|-
Line 170: Line 166:
 
|-
 
|-
 
| 03:21
 
| 03:21
−
| Let’s now update our''' Upcoming Events view''' by clicking on''' Edit'''.
+
| Let’s now update our''' Upcoming Events''' view by clicking on''' Edit'''.
  
 
|-
 
|-
 
|  03:27
 
|  03:27
−
|  Click on''' Event Logo''' and change the''' Image Style''' to''' Upcoming Events.'''
+
|  Click on''' Event Logo''' and change the''' Image Style''' to "Upcoming Events".  
  
 
|-
 
|-
Line 182: Line 178:
 
|-
 
|-
 
|  03:36
 
|  03:36
−
|  Scroll down to the preview section and we find that our logos are all uniform.
+
|  Scroll down to the preview section and we find our logos are all uniform.
  
 
|-
 
|-
Line 190: Line 186:
 
|-
 
|-
 
|  03:45
 
|  03:45
−
|  Click on''' Back to site'''. Here’s our view on our '''website'''.
+
|  Click on''' Back to site'''. Here’s our view on our website.
  
 
|-
 
|-
Line 210: Line 206:
 
|-
 
|-
 
| 04:09
 
| 04:09
−
| Set the''' view''' setting as''' Content - of type - Events'''.
+
| Set the''' VIEW SETTINGS''' as''' Content - of type - Events'''.
  
 
|-
 
|-
Line 226: Line 222:
 
|-
 
|-
 
| 04:29
 
| 04:29
−
| Please note: we can choose any other option provided in the drop-down by''' Drupal,''' also.
+
| Please note: we can choose any other option, provided in the drop-down by''' Drupal''', also.
  
 
|-
 
|-
Line 234: Line 230:
 
|-
 
|-
 
| 04:42
 
| 04:42
−
| Let’s check''' Create a menu link''', as well.
+
| Let’s check''' Create a menu link''' as well.
  
 
|-
 
|-
 
|  04:46
 
|  04:46
−
|  Under the''' Menu''' dropdown, choose the option''' Main navigation.'''
+
|  Under the''' Menu''' drop-down, choose the option "Main navigation".
  
 
|-
 
|-
Line 246: Line 242:
 
|-
 
|-
 
|  04:54
 
|  04:54
−
|  Let’s cross-check with our 5 criteria:
+
|  Let’s cross-check with our 5 criteria: The''' Display''' is a''' Page''',
−
 
+
−
# The''' Display''' is a''' Page''',
+
  
 
|-
 
|-
 
| 04:59
 
| 04:59
−
|  The''' Format''' is a''' Grid''',
+
|  the''' Format''' is a''' Grid''',
 
|-
 
|-
 
| 05:01
 
| 05:01
−
|  There is only one''' Field''' named''' Title,'''
+
|  there is only one''' Field''' named''' Title,''' and lastly, the''' Filter''' and''' Sort Criteria'''.
−
 
+
−
|-
+
−
| 05:04
+
−
| And lastly, the''' Filter''' and''' Sort Criteria'''.
+
  
 
|-
 
|-
Line 267: Line 257:
 
|-
 
|-
 
|  05:12
 
|  05:12
−
|  Scroll down. We see here - we have 4 columns and 9 events.
+
|  Scroll down. We see here - we have 4 '''column'''s and 9 '''events'''.
  
 
|-
 
|-
 
|  05:17
 
|  05:17
−
|  To change the number of columns, in''' Format,''' click on the''' Settings''' option'''.'''
+
|  To change the number of columns, in''' Format,''' click on the''' Settings''' option.
  
 
|-
 
|-
Line 291: Line 281:
 
|-
 
|-
 
|  05:40
 
|  05:40
−
|  This time, choose the''' photo gallery of logos''' as''' Image style.'''
+
|  This time, choose the "photo gallery of logos" as''' Image style.'''
  
 
|-
 
|-
 
| 05:45
 
| 05:45
−
| In''' Link image to,''' choose''' Content''', and then click''' Apply'''.
+
| In''' Link image to,''' choose''' Content''' and then click''' Apply'''.
  
 
|-
 
|-
Line 307: Line 297:
 
|-
 
|-
 
| 06:00
 
| 06:00
−
| All the '''fields''' that you choose from a '''node,''' are in one cell.
+
| All the '''fields''' that you choose from a node, are in one cell.
  
 
|-
 
|-
 
| 06:05
 
| 06:05
−
| And we can decide how many cells we want to display.
+
| And, we can decide how many cells we want to display.
  
 
|-
 
|-
Line 335: Line 325:
 
|-
 
|-
 
| 06:29
 
| 06:29
−
| With this we come to the end of this tutorial.  Let us summarize.
+
| With this, we come to the end of this tutorial.  Let us summarize.
  
 
|-
 
|-
 
| 06:34
 
| 06:34
−
| In this tutorial we have learnt about '''Image styles''' and  A photo gallery view
+
| In this tutorial, we have learnt about: '''Image styles''' and  '''photo gallery view.'''
  
 
|-
 
|-
 
| 06:44
 
| 06:44
−
| This video is  adapted from Acquia and OSTraining  and revised by Spoken Tutorial Project, IIT Bombay.
+
| This video is  adapted from '''Acquia''' and '''OSTraining''' and revised by '''Spoken Tutorial Project, IIT Bombay'''.
  
 
|-
 
|-
 
| 06:53
 
| 06:53
−
| The video at this link summarises the Spoken Tutorial project. Please download and watch it.
+
| The video at this link summarizes the Spoken Tutorial project. Please download and watch it.
  
 
|-
 
|-
 
| 07:00
 
| 07:00
−
| The Spoken Tutorial Project Team conducts workshops and gives certificates. For more details, please write to us.
+
| The Spoken Tutorial Project team conducts workshops and gives certificates. For more details, please write to us.
  
 
|-
 
|-
 
| 07:08
 
| 07:08
−
| Spoken Tutorial Project is funded by
+
| Spoken Tutorial Project is funded by- NMEICT, Ministry of Human Resource Development and NVLI, Ministry of Culture, Government of India.
−
 
+
−
* NMEICT, Ministry of Human Resource Development and
+
−
* NVLI, Ministry of Culture
+
−
 
+
−
Government of India.
+
  
 
|-
 
|-
 
| 07:19
 
| 07:19
−
| This is Ameesha Bhorkhade signing off. Thanks for joining.
+
| This is Ameesha Bhorkhade, signing off. Thanks for joining.
  
 
|}
 
|}

Latest revision as of 11:34, 17 October 2016

Time Narration
00:01 Welcome to the Spoken tutorial on Controlling Display of Images.
00:06 In this tutorial, we will learn about Image styles and a photo gallery view.
00:12 To record this tutorial, I am using:Ubuntu Linux Operating System, Drupal 8 and Firefox Web browser.
00:21 You can use any web browser as per your choice.
00:25 Let us open our website which we created earlier.
00:29 In Drupal, we can manipulate the size and scale of an image to fit the different needs of the site.
00:37 Drupal takes the original image and converts it to the size and scale we want.
00:43 Then, it saves that version of the file.
00:46 Click on Configuration.
00:48 We are going to create 2 image styles here.
00:51 Scroll down and locate MEDIA tab.
00:54 Here, we can see Image Styles. Click on it.
00:58 We will create an Image style for the table that we have set up.
01:03 And also for the next view that we will be creating which is a grid of logos.
01:09 Click on Add image styles.
01:12 In the Image style name, we will type "Upcoming Events 150 x 150".
01:19 Notice that Drupal fills out the machine name for us.
01:23 This is our Image style name.
01:26 Now, click on Create new style.
01:29 On the left, is the original image which is 600 by 800 pixels and the edited version of the image is on the right.
01:38 Under EFFECT, click on Select a new effect drop-down.
01:42 Many options are displayed in this list. Among these options, I will choose "Scale and crop" effect.
01:49 You can choose any option that you want to. For e.g: Rotate, Resize or any other.
01:56 Click on the Add button.
01:58 Enter the Width as 150 and Height as 150.
02:02 Remember - never make the Width and Height larger than the original image.
02:07 Doing so, will cause the image to pixelate.
02:11 Click Add effect.
02:13 Here is our new Image Style. In the right-hand-side image, we can see that it is now scaled and cropped.
02:22 Let’s create another one. Click on Image styles and then on Add image styles button.
02:29 This time, in the Image style name we will type: "photo gallery of logos".
02:35 Then click on Create new style button.
02:38 This can be an image in any photo gallery on your machine.
02:42 You can do this for any image, in any field and in any content.
02:47 Once again, click on Select a new effect and then on "Scale and crop" option.
02:53 Click on Add button. Let’s enter the Width as 300 and Height as 300.
03:00 And then click on Add effect button.
03:03 Notice that the right-hand-side image now has the new dimensions of 300 by 300.
03:09 This shows that Drupal automatically creates versions of images for each Image style and stores them on the site.
03:18 Click Structure, then on Views.
03:21 Let’s now update our Upcoming Events view by clicking on Edit.
03:27 Click on Event Logo and change the Image Style to "Upcoming Events".
03:33 Then click on Apply.
03:36 Scroll down to the preview section and we find our logos are all uniform.
03:42 Now, click on Save.
03:45 Click on Back to site. Here’s our view on our website.
03:50 This is what Image Styles does.
03:53 Let’s now create a new view as a grid layout for all these events.
03:59 To do this, click on Structures, then Views, and Add new view.
04:05 We will name this as Photo Gallery.
04:09 Set the VIEW SETTINGS as Content - of type - Events.
04:14 This particular view could be used as photo-of-the-day or gallery of images for any event.
04:22 Click on Create a page.
04:25 Scroll down and select Grid of fields.
04:29 Please note: we can choose any other option, provided in the drop-down by Drupal, also.
04:36 In Items to display field, choose 9 as this gives a 3 by 3 grid.
04:42 Let’s check Create a menu link as well.
04:46 Under the Menu drop-down, choose the option "Main navigation".
04:51 Then click Save and Edit.
04:54 Let’s cross-check with our 5 criteria: The Display is a Page,
04:59 the Format is a Grid,
05:01 there is only one Field named Title, and lastly, the Filter and Sort Criteria.
05:08 We will leave these as they are, for now.
05:12 Scroll down. We see here - we have 4 columns and 9 events.
05:17 To change the number of columns, in Format, click on the Settings option.
05:22 Then change the number of columns to 3 and click Apply.
05:28 That will give us a 3 by 3 grid.
05:31 In Fields, click on Add.
05:34 Locate the Event Logo, put a check mark on it and then click on Apply.
05:40 This time, choose the "photo gallery of logos" as Image style.
05:45 In Link image to, choose Content and then click Apply.
05:50 Immediately, in the Preview section below, a grid is laid out.
05:55 So, you see, a grid layout differs from a table.
06:00 All the fields that you choose from a node, are in one cell.
06:05 And, we can decide how many cells we want to display.
06:09 Let’s click on Save now.
06:12 Let’s click on Back to site button and then click on Photo Gallery.
06:17 This looks quite nice.
06:19 On a small device like a mobile, all the images scale down to maintain their 3 by 3 grid.
06:26 And that is what Drupal does with a grid.
06:29 With this, we come to the end of this tutorial. Let us summarize.
06:34 In this tutorial, we have learnt about: Image styles and photo gallery view.
06:44 This video is adapted from Acquia and OSTraining and revised by Spoken Tutorial Project, IIT Bombay.
06:53 The video at this link summarizes the Spoken Tutorial project. Please download and watch it.
07:00 The Spoken Tutorial Project team conducts workshops and gives certificates. For more details, please write to us.
07:08 Spoken Tutorial Project is funded by- NMEICT, Ministry of Human Resource Development and NVLI, Ministry of Culture, Government of India.
07:19 This is Ameesha Bhorkhade, signing off. Thanks for joining.

Contributors and Content Editors

PoojaMoolya, Priyacst, Sandhya.np14

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Drupal/C3/Controlling-Display-of-Images/English-timed&oldid=29397"