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

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	ਇਹ ਸਕਰਿਪਟ ਅਮਰਜੀਤ ਦੁਆਰਾ ਅਨੁਵਾਦਿਤ ਹੈ। ਆਈ.ਆਈ.ਟੀ ਬਾੰਬੇ ਵਲੋਂ ਮੈਂ ਹੁਣ ਤੁਹਾਡੇ ਤੋਂ ਵਿਦਾ ਲੈਂਦਾ ਹਾਂ। ਧੰਨਵਾਦ...

Contributors and Content Editors

Harmeet