Difference between revisions of "Drupal/C3/Controlling-Display-of-Images/Hindi"
From Script | Spoken-Tutorial
Shruti arya (Talk | contribs) |
|||
| (One intermediate revision by one other user not shown) | |||
| Line 14: | Line 14: | ||
|- | |- | ||
| 00:12 | | 00:12 | ||
| − | | इस ट्यूटोरियल को रिकॉर्ड करने के लिए मैं उपोयग कर रही हूँ | + | | इस ट्यूटोरियल को रिकॉर्ड करने के लिए मैं उपोयग कर रही हूँ'उबंटु ऑपरेटिंग सिस्टम','Drupal' 8 और'Firefox' वेब ब्राउजर |
| − | + | ||
| − | + | ||
| − | + | ||
|- | |- | ||
| Line 155: | Line 152: | ||
|- | |- | ||
| 03:27 | | 03:27 | ||
| − | | | + | | 'Event Logo' पर क्लिक करें और 'Image Style' 'Upcoming Events' में बदलें। |
|- | |- | ||
| Line 170: | Line 167: | ||
|- | |- | ||
| 03:45 | | 03:45 | ||
| − | | | + | | 'Back to site' पर क्लिक करें। यह हमारी वेबसाइट पर हमारा व्यू है। |
|- | |- | ||
| Line 214: | Line 211: | ||
|- | |- | ||
| 04:46 | | 04:46 | ||
| − | | | + | | 'Menu' ड्रॉप-डाउन में, 'Main navigation' ऑप्शन चुनें। |
|- | |- | ||
| Line 222: | Line 219: | ||
|- | |- | ||
| 04:54 | | 04:54 | ||
| − | |अपने 5 मानदंडों को फिर से जाँचें। | + | |अपने 5 मानदंडों को फिर से जाँचें। 'Display', 'Page' है। |
| − | 'Display', 'Page' है। | + | |
|- | |- | ||
| 04:59 | | 04:59 | ||
| − | | | + | | 'Format', 'Grid' है। |
|- | |- | ||
| 05:01 | | 05:01 | ||
| Line 252: | Line 248: | ||
|- | |- | ||
| 05:31 | | 05:31 | ||
| − | | | + | | 'Fields' में , 'Add' पर क्लिक करें। |
|- | |- | ||
| Line 276: | Line 272: | ||
|- | |- | ||
| 06:05 | | 06:05 | ||
| − | | और | + | | और हम निर्धारित कर सकते हैं कि हमें कितने सेल्स प्रदर्शित करनी है। |
|- | |- | ||
| 06:09 | | 06:09 | ||
| Line 312: | Line 308: | ||
|- | |- | ||
| 07:08 | | 07:08 | ||
| − | | स्पोकन ट्यूटोरियल प्रोजेक्ट | + | | स्पोकन ट्यूटोरियल प्रोजेक्ट NMEICT, मानव संसाधन विकास मंत्रायल और NVLI, संस्कृति मंत्रालय, भारत सरकार द्वारा निधिबद्ध है। |
| − | NMEICT, मानव संसाधन विकास मंत्रायल और NVLI, संस्कृति मंत्रालय, भारत सरकार द्वारा निधिबद्ध है। | + | |
|- | |- | ||
| 07:19 | | 07:19 | ||
|यह स्क्रिप्ट बिंदु पांडे द्वारा अनुवादित है। आईआईटी बॉम्बे की ओर से मैं श्रुति आर्य अब आपसे विदा लेती हूँ। धन्यवाद... | |यह स्क्रिप्ट बिंदु पांडे द्वारा अनुवादित है। आईआईटी बॉम्बे की ओर से मैं श्रुति आर्य अब आपसे विदा लेती हूँ। धन्यवाद... | ||
|} | |} | ||
Latest revision as of 16:39, 14 October 2016
| 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 150 x 150". |
| 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 | ऐसा करना, इमैज को पिक्सलेट करने का कारण होगा। |
| 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 को बनाये रखने के लिए सभी इमैजेस का स्केल कम हो जाता है |
| 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 | यह स्क्रिप्ट बिंदु पांडे द्वारा अनुवादित है। आईआईटी बॉम्बे की ओर से मैं श्रुति आर्य अब आपसे विदा लेती हूँ। धन्यवाद... |
