Harmeet: Created page with "{|border = 1 |Time |Narration |- |00:01 |Controlling Display of Images ਉੱਤੇ ਸਪੋਕਨ ਟਿਊਟੋਰੀਅਲ ਵਿੱਚ ਤੁਹਾਡਾ ਸਵਾ..."

2017-08-07T05:48:25Z

Created page with "{|border = 1 |Time |Narration |- |00:01 |Controlling Display of Images ਉੱਤੇ ਸਪੋਕਨ ਟਿਊਟੋਰੀਅਲ ਵਿੱਚ ਤੁਹਾਡਾ ਸਵਾ..."

New page

{|border = 1
|Time
|Narration
|-
|00:01
|Controlling Display of Images ਉੱਤੇ ਸਪੋਕਨ ਟਿਊਟੋਰੀਅਲ ਵਿੱਚ ਤੁਹਾਡਾ ਸਵਾਗਤ ਹੈ।
|-
|00:06
|ਇਸ ਟਿਊਟੋਰੀਅਲ ਵਿੱਚ ਅਸੀ Image styles ਅਤੇ photo gallery view ਦੇ ਬਾਰੇ ਵਿੱਚ ਸਿਖਾਂਗੇ।
|-
|00:12
|ਇਸ ਟਿਊਟੋਰੀਅਲ ਨੂੰ ਰਿਕਾਰਡ ਕਰਨ ਲਈ ਮੈਂ ਵਰਤੋਂ ਕਰ ਰਿਹਾ ਹਾਂ
* ਉਬੰਟੁ ਆਪਰੇਟਿੰਗ ਸਿਸਟਮ
* Drupal 8 ਅਤੇ
* Firefox ਵੈਬ ਬਰਾਉਜਰ
|-
|00:21
|ਤੁਸੀ ਆਪਣੇ ਪਸੰਦ ਦੇ ਕਿਸੇ ਵੀ ਵੈਬ ਬਰਾਉਜਰ ਦੀ ਵਰਤੋ ਕਰ ਸਕਦੇ ਹੋ।
|-
|00:25
|ਆਪਣੀ ਵੈਬਸਾਈਟ ਨੂੰ ਖੋਲੋ ਜਿਸਨੂੰ ਅਸੀਂ ਪਹਿਲਾਂ ਹੀ ਬਣਾਇਆ ਹੈ।
|-
|00:29
|Drupal ਵਿੱਚ, site ਦੀ ਲੋੜ ਅਨੁਸਾਰ ਅਸੀ ਇਮੇਜ ਦੇ ਸਾਇਜ ਅਤੇ ਸਕੇਲ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹਾਂ।
|-
|00:37
|Drupal ਮੂਲ ਇਮੇਜ ਲੈਂਦਾ ਹੈ ਅਤੇ ਸਾਡੇ ਅਨੁਸਾਰ ਇਸਦਾ ਸਾਇਜ ਅਤੇ ਸਕੇਲ ਬਦਲਦਾ ਹੈ।
|-
|00:43
|ਫਿਰ, ਫਾਈਲ ਦੇ ਇਸ ਵਰਜਨ ਨੂੰ ਸੇਵ ਕਰਦਾ ਹੈ।
|-
|00:46
|Configuration ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|00:48
|ਅਸੀ ਇੱਥੇ 2 image styles ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ।

|-
|00:51
|ਹੇਠਾਂ ਸਕਰੋਲ ਕਰੋ ਅਤੇ MEDIA tab ਉੱਤੇ ਜਾਓ।
|-
|00:54
|ਇੱਥੇ ਅਸੀ Image Styles ਵੇਖ ਸਕਦੇ ਹਾਂ ਇਸ ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|00:58
|ਅਸੀ table ਲਈ Image style ਬਣਾਵਾਂਗੇ ਜਿਸਨੂੰ ਅਸੀਂ ਸੈੱਟ ਕੀਤਾ ਹੈ।
|-
|01:03
|ਅਤੇ ਅਗਲੇ view ਲਈ ਵੀ ਜਿਸਨੂੰ ਅਸੀ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ ਜੋ ਕਿ logos ਦਾ ਗਰਿਡ ਹੈ।
|-
|01:09
|Add image styles ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|01:12
|Image style name ਵਿੱਚ, ਅਸੀ ਟਾਈਪ ਕਰਾਂਗੇ Upcoming Events 150x150.
|-
|01:19
|ਧਿਆਨ ਦਿਓ ਕਿ Drupal ਸਾਡੇ ਲਈ ਮਸ਼ੀਨ ਦਾ ਨਾਮ ਭਰਦਾ ਹੈ।
|-
|01:23
|ਇਹ ਸਾਡਾ Image style name ਹੈ।
|-
|01:26
|ਹੁਣ Create new style ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|01:29
|ਖੱਬੇ ਵੱਲ, ਮੂਲ ਇਮੇਜ 600 by 800 pixels ਹੈ ਅਤੇ ਇਮੇਜ ਦਾ ਐਡਿਟ ਕੀਤਾ ਹੋਇਆ ਵਰਜਨ ਸੱਜੇ ਵੱਲ ਹੈ।
|-
|01:38
|EFFECT ਵਿੱਚ, Select a new effect ਡਰਾਪਡਾਉਨ ਵਿੱਚ ਕਲਿਕ ਕਰੋ।
|-
|01:42
|ਇਸ ਸੂਚੀ ਵਿੱਚ ਕਈ ਆਪਸ਼ੰਸ ਦਿਖਾਏ ਹੋਏ ਹਨ। ਇਹਨਾਂ ਆਪਸ਼ੰਸ ਵਿੱਚੋਂ ਮੈਂ Scale and crop ਇਫੈਕਟ ਚੁਣਾਗਾ।
|-
|01:49
|ਤੁਸੀ ਆਪਣੇ ਅਨੁਸਾਰ ਕਿਸੇ ਵੀ ਆਪਸ਼ਨ ਨੂੰ ਚੁਣ ਸਕਦੇ ਹੋ, ਉਦਾਹਰਣ ਲਈ, Rotate, Resize ਜਾਂ ਹੋਰ।
|-
|01:56
|Add ਬਟਨ ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|01:58
|Width 150 ਅਤੇ Height 150 ਐਂਟਰ ਕਰੋ।
|-
|02:02
|ਯਾਦ ਰੱਖੋ ਕਿ Width ਅਤੇ Height ਮੂਲ ਇਮੇਜ ਨਾਲੋਂ ਕਦੇ ਵੀ ਜਿਆਦਾ ਨਾ ਰੱਖੋ।
|-
|02:07
|ਅਜਿਹਾ ਕਰਨਾ, ਇਮੇਜ ਨੂੰ ਪਿਕਸਲੇਟ (pixelate) ਕਰਨ ਦਾ ਕਾਰਨ ਹੋਵੇਗਾ।
|-
|02:11
|Add effect ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|02:13
|ਇੱਥੇ ਸਾਡਾ ਨਵਾਂ Image Style ਹੈ। ਸੱਜੇ ਵੱਲ ਦੀ ਇਮੇਜ ਵਿੱਚ, ਅਸੀ ਵੇਖ ਸਕਦੇ ਹਾਂ ਕਿ ਇਹ ਹੁਣ ਸਕੇਲ ਅਤੇ ਕਰੋਪ ਹੋ ਚੁੱਕੀ ਹੈ।
|-
|02:22
|ਇੱਕ ਹੋਰ ਬਣਾਓ। Image styles ਉੱਤੇ ਕਲਿਕ ਕਰੋ ਅਤੇ ਫਿਰ Add image styles ਬਟਨ ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|02:29
|ਇਸ ਸਮੇਂ, Image style name ਵਿੱਚ ਅਸੀ ਟਾਈਪ ਕਰਾਂਗੇ:photo gallery of logos
|-
|02:35
|Create new style ਬਟਨ ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|02:38
|ਇਹ ਇਮੇਜ ਤੁਹਾਡੀ ਮਸ਼ੀਨ ਉੱਤੇ ਕਿਸੇ ਵੀ photo gallery ਵਿੱਚ ਹੋ ਸਕਦੀ ਹੈ।
|-
|02:42
|ਤੁਸੀ ਇਹ ਕਿਸੇ ਵੀ ਇਮੇਜ ਦੇ ਲਈ, ਕਿਸੇ ਵੀ field ਵਿੱਚ ਅਤੇ ਕਿਸੇ ਵੀ ਕੰਟੈਂਟ ਵਿੱਚ ਕਰ ਸਕਦੇ ਹੋ।
|-
|02:47
|ਫਿਰ ਤੋਂ Select a new effect ਉੱਤੇ ਕਲਿਕ ਕਰੋ ਅਤੇ ਫਿਰ Scale and crop ਆਪਸ਼ਨ ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|02:53
|Add ਬਟਨ ਉੱਤੇ ਕਲਿਕ ਕਰੋ। ਹੁਣ Width 300 ਅਤੇ Height 300 ਐਂਟਰ ਕਰੋ।
|-
|03:00
|ਅਤੇ ਫਿਰ Add effect ਬਟਨ ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|03:03
|ਧਿਆਨ ਦਿਓ ਕਿ ਸੱਜੇ ਵੱਲ ਦੀ ਇਮੇਜ ਹੁਣ 300 by 300 ਦੇ ਨਵੇਂ ਡਾਇਮੈਂਸ਼ਨ ਵਿੱਚ ਹੈ।
|-
|03:09
|ਇਹ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ Drupal ਆਪਣੇ ਆਪ ਹੀ ਹਰ ਇੱਕ Image style ਲਈ ਇਮੇਜ ਦਾ ਵਰਜਨ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਫਿਰ ਉਨ੍ਹਾਂ ਨੂੰ site ਉੱਤੇ ਸਟੋਰ ਕਰਦਾ ਹੈ।
|-
|03:18
|Structure ਉੱਤੇ ਕਲਿਕ ਕਰੋ, ਫਿਰ Views ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|03:21
|ਹੁਣ Edit ਉੱਤੇ ਕਲਿਕ ਕਰੋ ਆਪਣੇ Upcoming Events view ਨੂੰ ਅਪਡੇਟ ਕਰੋ।
|-
|03:27
|Event Logo ਉੱਤੇ ਕਲਿਕ ਕਰੋ ਅਤੇ Image Style Upcoming Events ਵਿੱਚ ਬਦਲੋ।
|-
|03:33
|ਫਿਰ Apply ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|03:36
|ਪ੍ਰਿਵਿਊ ਸੈਕਸ਼ਨ ਉੱਤੇ ਹੇਠਾਂ ਸਕਰੋਲ ਕਰੋ ਅਤੇ ਅਸੀ ਵੇਖਾਂਗੇ ਕਿ ਸਾਡੇ ਸਾਰੇ ਲੋਗੋਜ ਸਮਾਨ ਹਨ।
|-
|03:42
|ਹੁਣ Save ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|03:45
|Back to site ਉੱਤੇ ਕਲਿਕ ਕਰੋ। ਇਹ ਸਾਡੀ ਵੈਬਸਾਈਟ ਉੱਤੇ ਸਾਡਾ ਵਿਊ ਹੈ।
|-
|03:50
|ਇਸ ਤਰ੍ਹਾਂ Image Styles ਕਾਰਜ ਕਰਦਾ ਹੈ।
|-
|03:53
|ਹੁਣ ਇਸ ਸਾਰੇ ਇਵੈਂਟਸ ਲਈ ਗਰਿਡ ਲੇਆਊਟ ਦੇ ਰੂਪ ਵਿੱਚ ਨਵਾਂ view ਬਣਾਓ।
|-
|03:59
|ਅਜਿਹਾ ਕਰਨ ਦੇ ਲਈ, Structures ਉੱਤੇ ਕਲਿਕ ਕਰੋ, ਫਿਰ Views ਅਤੇ Add new view ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|04:05
|ਅਸੀ ਇਸਨੂੰ Photo Gallery ਨਾਮ ਦੇਵਾਂਗੇ।
|-
|04:09
|view ਸੈਟਿੰਗਸ ਨੂੰ Content- of type- Events ਸੈੱਟ ਕਰੋ।
|-
|04:14
|ਇਹ ਵਿਸ਼ੇਸ਼ view photo-of-the-day ਜਾਂ ਇਵੈਂਟ ਲਈ ਇਮੇਜਸ ਦੀ ਗੈਲਰੀ ਦੇ ਰੂਪ ਵਿੱਚ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ।
|-
|04:22
|Create a page ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|04:25
|ਹੇਠਾਂ ਸਕਰੋਲ ਕਰੋ ਅਤੇ fields ਦੇ Grid ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|04:29
|ਕ੍ਰਿਪਾ ਕਰਕੇ ਧਿਆਨ ਰੱਖੋ, ਅਸੀ ਡਰਾਪ-ਡਾਊਨ ਵਿੱਚ Drupal ਦੁਆਰਾ ਦਿੱਤੇ ਗਏ ਕਿਸੇ ਵੀ ਹੋਰ ਆਪਸ਼ਨ ਨੂੰ ਚੁਣ ਸਕਦੇ ਹਾਂ।
|-
|04:36
|Items to display ਫੀਲਡ ਵਿੱਚ, 9 ਚੁਣੋ ਕਿਉਂਕਿ ਇਹ 3 by 3 grid ਦਰਸਾਉਂਦਾ ਹੈ।
|-
|04:42
|Create a menu link ਚੈਕ ਕਰੋ।
|-
|04:46
|Menu ਡਰਾਪ-ਡਾਊਨ ਵਿੱਚ, Main navigation ਆਪਸ਼ਨ ਚੁਣੋ।
|-
|04:51
|ਫਿਰ Save and Edit ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|04:54
|ਆਪਣੇ 5 ਮਾਪਦੰਡਾਂ ਨੂੰ ਫਿਰ ਤੋਂ ਜਾਂਚੋ।
Display ਇੱਕ Page ਹੈ।
|-
|04:59
|Format ਇੱਕ Grid ਹੈ।
|-
|05:01
|ਇੱਥੇ Title ਨਾਮਕ ਕੇਵਲ ਇੱਕ Field ਹੈ।
|-
|05:04
|ਅਤੇ ਅਖੀਰ ਵਿੱਚ Filter ਅਤੇ Sort Criteria
|-
|05:08
|ਹੁਣ ਦੇ ਲਈ ਅਸੀ ਉਨ੍ਹਾਂ ਨੂੰ ਇੰਜ ਹੀ ਛੱਡਾਂਗੇ।
|-
|05:12
|ਹੇਠਾਂ ਸਕਰੋਲ ਕਰੋ। ਇੱਥੇ ਅਸੀ ਵੇਖਾਂਗੇ ਕਿ ਸਾਡੇ ਕੋਲ 4 columns ਅਤੇ 9 events ਹਨ।
|-
|05:17
|Format ਵਿੱਚ ਕਾਲਮਸ ਦੀ ਗਿਣਤੀ ਬਦਲਨ ਦੇ ਲਈ, Settings ਆਪਸ਼ਨ ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|05:22
|ਫਿਰ ਕਾਲਮਸ ਦੀ ਗਿਣਤੀ 3 ਕਰੋ ਅਤੇ Apply ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|05:28
|ਇਹ ਸਾਨੂੰ 3 by 3 grid ਦੇਵੇਗਾ।
|-
|05:31
|Fields ਵਿੱਚ, Add ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|05:34
|Event Logo ਉੱਤੇ ਜਾਓ, ਇਸ ਉੱਤੇ ਚੈਕ-ਮਾਰਕ ਕਰੋ ਅਤੇ ਫਿਰ Apply ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|05:40
|ਇਸ ਸਮੇਂ, Image style ਵਿੱਚ photo gallery of logos ਚੁਣੋ।
|-
|05:45
|Link image to ਵਿੱਚ Content ਚੁਣੋ ਅਤੇ Apply ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|05:50
|ਤੁਰੰਤ ਹੀ, ਹੇਠਾਂ Preview ਸੈਕਸ਼ਨ ਵਿੱਚ, ਗਰਿਡ ਦਿਖਦਾ ਹੈ।
|-
|05:55
|ਸੋ, ਤੁਸੀ ਵੇਖ ਰਹੇ ਹੋ ਕਿ ਗਰਿਡ ਲੇਆਊਟ table ਤੋਂ ਵੱਖਰਾ ਹੁੰਦਾ ਹੈ।
|-
|06:00
|ਸਾਰੇ fields ਜਿਨ੍ਹਾਂ ਨੂੰ ਤੁਸੀਂ ਨੋਡ ਵਿਚੋਂ ਚੁਣਿਆ, ਇੱਕ ਸੈੱਲ ਵਿੱਚ ਹਨ।
|-
|06:05
|ਅਤੇ, ਅਸੀ ਨਿਰਧਾਰਤ ਕਰ ਸਕਦੇ ਹਾਂ ਕਿ ਅਸੀਂ ਕਿੰਨੇ ਸੈੱਲਸ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹਾਂ।
|-
|06:09
|Save ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|06:12
|Back to site ਬਟਨ ਉੱਤੇ ਕਲਿਕ ਕਰੋ ਅਤੇ ਫਿਰ Photo Gallery ਉੱਤੇ ਕਲਿਕ ਕਰੋ।
|-
|06:17
|ਇਹ ਬਿਹਤਰ ਦਿੱਸ ਰਿਹਾ ਹੈ।
|-
|06:19
|ਛੋਟੇ ਡਿਵਾਈਸ ਜਿਵੇਂ ਕਿ ਮੋਬਾਇਲ ਉੱਤੇ, ਆਪਣੇ 3 by 3 grid ਨੂੰ ਬਣਾਏ ਰੱਖਣ ਲਈ ਸਾਰੀਆਂ ਇਮੇਜਸ ਦਾ ਸਕੇਲ ਘੱਟ ਹੋ ਜਾਂਦਾ ਹੈl
|-
|06:26
|ਅਤੇ ਇਹ ਹੈ ਜੋ Drupal ਗਰਿਡ ਦੇ ਨਾਲ ਕਰਦਾ ਹੈ।
|-
|06:29
|ਇਸ ਦੇ ਨਾਲ ਅਸੀ, ਇਸ ਟਿਊਟੋਰੀਅਲ ਦੇ ਅੰਤ ਵਿੱਚ ਪਹੁੰਚ ਗਏ ਹਾਂ। ਸੰਖੇਪ ਵਿੱਚ...
|-
|06:34
|ਇਸ ਟਿਊਟੋਰੀਅਲ ਵਿੱਚ ਅਸੀਂ Image styles ਅਤੇ photo gallery view ਦੇ ਬਾਰੇ ਵਿੱਚ ਸਿੱਖਿਆ।
|-
|06:44
|ਇਹ ਵੀਡੀਓ Acquia ਅਤੇ OS ਟ੍ਰੇਨਿੰਗ ਵਲੋਂ ਲਿਆ ਗਿਆ ਹੈ ਅਤੇ ਸਪੋਕਨ ਟਿਊਟੋਰੀਅਲ ਪ੍ਰੋਜੈਕਟ ਆਈ.ਆਈ.ਟੀ ਬਾੰਬੇ ਦੁਆਰਾ ਸੰਸ਼ੋਧਿਤ ਕੀਤਾ ਗਿਆ ਹੈ।
|-
|06:53
|ਇਸ ਲਿੰਕ ਉੱਤੇ ਉਪਲੱਬਧ ਵੀਡੀਓ ਸਪੋਕਨ ਟਿਊਟੋਰੀਅਲ ਪ੍ਰੋਜੈਕਟ ਦਾ ਸਾਰ ਕਰਦੀ ਹੈ। ਕ੍ਰਿਪਾ ਕਰਕੇ ਇਸਨੂੰ ਡਾਊਨਲੋਡ ਕਰਕੇ ਵੇਖੋ।
|-
|07:00
|ਸਪੋਕਨ ਟਿਊਟੋਰੀਅਲ ਪ੍ਰੋਜੈਕਟ ਟੀਮ ਵਰਕਸ਼ਾਪਾਂ ਲਗਾਉਂਦੀ ਹੈ ਅਤੇ ਪ੍ਰਮਾਣ ਪੱਤਰ ਦਿੰਦੀ ਹੈ। ਜਿਆਦਾ ਜਾਣਕਾਰੀ ਦੇ ਲਈ, ਸਾਨੂੰ ਲਿਖੋ।
|-
|07:08
|ਸਪੋਕਨ ਟਿਊਟੋਰੀਅਲ ਪ੍ਰੋਜੈਕਟ NMEICT, ਮਨੁੱਖੀ ਸੰਸਾਧਨ ਵਿਕਾਸ ਮੰਤਰਾਲਾ ਅਤੇ NVLI, ਸੱਭਿਆਚਾਰਕ ਮੰਤਰਾਲਾ, ਭਾਰਤ ਸਰਕਾਰ ਦੁਆਰਾ ਫੰਡ ਕੀਤਾ ਗਿਆ ਹੈ।
|-
|07:19
|ਇਹ ਸਕਰਿਪਟ ਅਮਰਜੀਤ ਦੁਆਰਾ ਅਨੁਵਾਦਿਤ ਹੈ। ਆਈ.ਆਈ.ਟੀ ਬਾੰਬੇ ਵਲੋਂ ਮੈਂ ਹੁਣ ਤੁਹਾਡੇ ਤੋਂ ਵਿਦਾ ਲੈਂਦਾ ਹਾਂ। ਧੰਨਵਾਦ...
|}

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

Harmeet: Created page with "{|border = 1 |Time |Narration |- |00:01 |Controlling Display of Images ਉੱਤੇ ਸਪੋਕਨ ਟਿਊਟੋਰੀਅਲ ਵਿੱਚ ਤੁਹਾਡਾ ਸਵਾ..."