Drupal/C3/Controlling-Display-of-Images/Hindi

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	यह स्क्रिप्ट बिंदु पांडे द्वारा अनुवादित है। आईआईटी बॉम्बे की ओर से मैं श्रुति आर्य अब आपसे विदा लेती हूँ। धन्यवाद...

Contributors and Content Editors

Devraj, Shruti arya