Drupal/C3/Controlling-Display-of-Images/English-timed - Revision history

PoojaMoolya at 06:04, 17 October 2016

2016-10-17T06:04:38Z

PoojaMoolya at 07:40, 7 October 2016

2016-10-07T07:40:21Z

PoojaMoolya at 05:41, 7 October 2016

2016-10-07T05:41:57Z

Priyacst at 10:57, 15 September 2016

2016-09-15T10:57:18Z

Sandhya.np14 at 07:55, 8 September 2016

2016-09-08T07:55:14Z

Sandhya.np14 at 10:01, 1 September 2016

2016-09-01T10:01:49Z

Show changes

PoojaMoolya: 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..."

2016-08-30T12:52:39Z

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..."

New page

{|border=1
| '''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''' dropdown.

|-
| 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 eg:''' 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 that 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''' setting 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''' dropdown, 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,'''

|-
| 05:04
| 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 A 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 summarises 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.

|}

@@ Line 13: / Line 13: @@
 |-
 | 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 245: / Line 242: @@
 |-
 |  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''',
 |-
@@ Line 253: / Line 249: @@
 |-
 | 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 337: / Line 329: @@
 |-
 | 06:34
-| In this tutorial, we have learnt about:
+| In this tutorial, we have learnt about: '''Image styles''' and  '''photo gallery view.'''
 '''Image styles''' and
 '''photo gallery view.'''
 |-
@@ Line 355: / Line 345: @@
 |-
 | 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.
 |-

@@ Line 15: / Line 15: @@
 | 00:12
 | To record this tutorial, I am using:
- '''Ubuntu Linux''' Operating System
+'''Ubuntu Linux''' Operating System
- '''Drupal''' 8 and
+'''Drupal''' 8 and
- '''Firefox''' Web browser.
+'''Firefox''' Web browser.
 |-
@@ Line 338: / Line 338: @@
 | 06:34
 | In this tutorial, we have learnt about:
- '''Image styles''' and
+'''Image styles''' and
- '''photo gallery view.'''
+'''photo gallery view.'''
 |-
@@ Line 356: / Line 356: @@
 | 07:08
 | Spoken Tutorial Project is funded by-
- NMEICT, Ministry of Human Resource Development and
+NMEICT, Ministry of Human Resource Development and
- NVLI, Ministry of Culture, Government of India.
+NVLI, Ministry of Culture, Government of India.
 |-

@@ Line 15: / Line 15: @@
 | 00:12
 | To record this tutorial, I am using:
-* '''Ubuntu Linux''' Operating System
+ '''Ubuntu Linux''' Operating System
-* '''Drupal''' 8 and
+ '''Drupal''' 8 and
-* '''Firefox''' Web browser.
+ '''Firefox''' Web browser.
 |-
@@ Line 338: / Line 338: @@
 | 06:34
 | In this tutorial, we have learnt about:
-* '''Image styles''' and
+ '''Image styles''' and
-* '''photo gallery view.'''
+ '''photo gallery view.'''
 |-
@@ Line 356: / Line 356: @@
 | 07:08
 | Spoken Tutorial Project is funded by-
-* NMEICT, Ministry of Human Resource Development and
+ NMEICT, Ministry of Human Resource Development and
-* NVLI, Ministry of Culture, Government of India.
+ NVLI, Ministry of Culture, Government of India.
 |-

@@ Line 181: / Line 181: @@
 |-
 |  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 10: / Line 10: @@
 |-
 | 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'''.
 |-
@@ Line 49: / Line 49: @@
 |-
 | 00:51
-| Scroll down and locate''' MEDIA tab.'''
+| Scroll down and locate''' MEDIA''' tab.
 |-
@@ Line 61: / Line 61: @@
 |-
 | 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 73: / Line 73: @@
 |-
 | 01:19
-| Notice that Drupal fills out the machine name for us.
+| Notice that Drupal fills out the '''machine name''' for us.
 |-
@@ Line 93: / Line 93: @@
 |-
 | 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
-| 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 145: / Line 145: @@
 |-
 | 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 161: / Line 161: @@
 |-
 | 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 169: / Line 169: @@
 |-
 | 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
-|  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 209: / Line 209: @@
 |-
 | 04:09
-| Set the''' view''' setting as''' Content - of type - Events'''.
+| Set the''' VIEW SETTINGS''' as''' Content - of type - Events'''.
 |-
@@ Line 237: / Line 237: @@
 |-
 |  04:46
-|  Under the''' Menu''' drop-down, choose the option''' Main navigation.'''
+|  Under the''' Menu''' drop-down, choose the option "Main navigation".
 |-
@@ Line 246: / Line 246: @@
 |  04:54
 |  Let’s cross-check with our 5 criteria:
 The''' Display''' is a''' Page''',
@@ Line 270: / Line 269: @@
 |-
 |  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 290: / Line 289: @@
 |-
 |  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
-| In''' Link image to,''' choose''' Content''', and then click''' Apply'''.
+| In''' Link image to,''' choose''' Content''' and then click''' Apply'''.
 |-
@@ Line 338: / Line 337: @@
 |-
 | 06:34
-| In this tutorial, we have learnt about  '''Image styles''' and  A '''photo gallery view.'''
+| In this tutorial, we have learnt about:
 |-
@@ Line 356: / Line 357: @@
 | Spoken Tutorial Project is funded by-
 * NMEICT, Ministry of Human Resource Development and
-* NVLI, Ministry of Culture Government of India.
+* NVLI, Ministry of Culture, Government of India.
 |-