Drupal/C3/Controlling-Display-of-Images/Gujarati - Revision history

Jyotisolanki at 12:11, 14 October 2016

2016-10-14T12:11:45Z

Jyotisolanki at 10:10, 7 October 2016

2016-10-07T10:10:07Z

Jyotisolanki at 06:08, 7 October 2016

2016-10-07T06:08:33Z

Jyotisolanki at 09:16, 5 September 2016

2016-09-05T09:16:58Z

Jyotisolanki at 20:47, 4 September 2016

2016-09-04T20:47:06Z

Show changes

Jyotisolanki at 16:40, 4 September 2016

2016-09-04T16:40:38Z

Show changes

Bharat636: 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 l..."

2016-09-03T18:49:06Z

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

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''' 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 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''' 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,'''

|-
| 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 '''column'''s 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 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.

|}

@@ Line 14: / Line 14: @@
 |-
 | 00:12
-| આ ટ્યુટોરીયલ રેકોર્ડ કરવા માટે, હું ઉપયોગ કરી રહ્યી છું:
+| આ ટ્યુટોરીયલ રેકોર્ડ કરવા માટે, હું ઉપયોગ કરી રહ્યી છું: '''Ubuntu Linux''' ઓપરેટીંગ સિસ્ટમ '''Drupal''' 8 અને '''Firefox''' વેબ બ્રાઉઝર.
 '''Ubuntu Linux''' ઓપરેટીંગ સિસ્ટમ
 '''Drupal''' 8 અને
 '''Firefox''' વેબ બ્રાઉઝર.
 |-
@@ Line 245: / Line 242: @@
 |-
 | 04:54
-| ચાલો આપણા 5 માપદંડ ફરી તપાસ કરીએ:
+| ચાલો આપણા 5 માપદંડ ફરી તપાસ કરીએ: ''' Display''' એક ''' Page''' છે,
-−
 ''' Display''' એક ''' Page''' છે,
 |-
@@ Line 355: / Line 350: @@
 |-
 | 07:08
-| સ્પોકન ટ્યુટોરીયલને પ્રોજેક્ટને આપેલ દ્વારા ફાળો આપવામાં આવ્યો છે -
+| સ્પોકન ટ્યુટોરીયલને પ્રોજેક્ટને આપેલ દ્વારા ફાળો આપવામાં આવ્યો છે -'''NMEICT, Ministry of Human Resource Development''' અને'''NVLI, Ministry of Culture Government of India'''.
 '''NMEICT, Ministry of Human Resource Development''' અને
 '''NVLI, Ministry of Culture Government of India'''.
 |-

@@ Line 15: / Line 15: @@
 | 00:12
 | આ ટ્યુટોરીયલ રેકોર્ડ કરવા માટે, હું ઉપયોગ કરી રહ્યી છું:
- '''Ubuntu Linux''' ઓપરેટીંગ સિસ્ટમ
+'''Ubuntu Linux''' ઓપરેટીંગ સિસ્ટમ
- '''Drupal''' 8 અને
+'''Drupal''' 8 અને
- '''Firefox''' વેબ બ્રાઉઝર.
+'''Firefox''' વેબ બ્રાઉઝર.
 |-
@@ Line 356: / Line 356: @@
 | 07:08
 | સ્પોકન ટ્યુટોરીયલને પ્રોજેક્ટને આપેલ દ્વારા ફાળો આપવામાં આવ્યો છે -
- NMEICT, Ministry of Human Resource Development અને
+'''NMEICT, Ministry of Human Resource Development''' અને
- NVLI, Ministry of Culture Government of India.
+'''NVLI, Ministry of Culture Government of India'''.
 |-

@@ Line 15: / Line 15: @@
 | 00:12
 | આ ટ્યુટોરીયલ રેકોર્ડ કરવા માટે, હું ઉપયોગ કરી રહ્યી છું:
-* '''Ubuntu Linux''' ઓપરેટીંગ સિસ્ટમ
+ '''Ubuntu Linux''' ઓપરેટીંગ સિસ્ટમ
-* '''Drupal''' 8 અને
+ '''Drupal''' 8 અને
-* '''Firefox''' વેબ બ્રાઉઝર.
+ '''Firefox''' વેબ બ્રાઉઝર.
 |-
@@ Line 356: / Line 356: @@
 | 07:08
 | સ્પોકન ટ્યુટોરીયલને પ્રોજેક્ટને આપેલ દ્વારા ફાળો આપવામાં આવ્યો છે -
-* NMEICT, Ministry of Human Resource Development અને
+ NMEICT, Ministry of Human Resource Development અને
-* NVLI, Ministry of Culture Government of India.
+ NVLI, Ministry of Culture Government of India.
 |-

@@ Line 225: / Line 225: @@
 |-
 | 04:29
-| કૃપા કરી નોંધ લો: સાથે જ આપણે ''' Drupal''' દ્વારા ડ્રોપ-ડાઉનમાં આપેલ, કોઈપણ વિકલ્પને પણ પસંદ કરી શકીએ છીએ.
+|  નોંધ લો: સાથે જ આપણે ''' Drupal''' દ્વારા ડ્રોપ-ડાઉનમાં આપેલ, કોઈપણ વિકલ્પને પણ પસંદ કરી શકીએ છીએ.
 |-
@@ Line 267: / Line 267: @@
 |-
 | 05:12
-| નીચે સ્ક્રોલ કરો. આપણે અહીં જોઈએ છીએ - આપણી પાસે 4 '''column'''s અને 9 '''events''' છે.
+| નીચે સ્ક્રોલ કરો. આપણે અહીં જોઈએ છીએ - આપણી પાસે 4 '''columns''' અને 9 '''events''' છે.
 |-