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

Time	Narration
00:01	Controlling Display of Images પરનાં Spoken tutorial માં સ્વાગત છે.
00:06	આ ટ્યુટોરીયલમાં આપણે આપેલ વિશે શીખીશું: Image styles અને એક ફોટો ગેલેરી વ્યુ.
00:12	આ ટ્યુટોરીયલ રેકોર્ડ કરવા માટે, હું ઉપયોગ કરી રહ્યી છું: Ubuntu Linux ઓપરેટીંગ સિસ્ટમ Drupal 8 અને Firefox વેબ બ્રાઉઝર.
00:21	તમે તમારા પસંદનું કોઈપણ વેબ બ્રાઉઝર વાપરી શકો છો.
00:25	ચાલો આપણે બનાવેલી પહેલાની વેબસાઈટ ખોલીએ.
00:29	Drupal માં, site ની આવશ્યકતા અનુસાર આપણે ઇમેજનું માપ અને સ્કેલ બદલી શકીએ છીએ.
00:37	ડ્રૂપલ મૂળ ઇમેજને લે છે અને આપણા અનુસાર તેનું માપ અને સ્કેલ બદલે છે.
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	અને આગળના વ્યુ માટે પણ જેને આપણે બનાવવા માટે જઈ રહયા છીએ જે કે logos નું ગ્રીડ છે.
01:09	Add image styles પર ક્લીક કરો.
01:12	Image style name માં, આપણે ટાઈપ કરીશું "Upcoming Events 150 x 150".
01:19	નોંધ લો ડ્રૂપલ આપણી માટે મશીનનું નામ ભરે છે.
01:23	આ છે આપણું Image style name.
01:26	હવે, Create new style પર ક્લીક કરો.
01:29	ડાબી બાજુએ, મૂળ ઇમેજ છે જે 600 બાય 800 પિક્સલની છે અને ઇમેજની એડિટ કરેલ આવૃત્તિ જમણી બાજુએ છે.
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	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 columns 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	આ સાથે, આપણું આ ટ્યુટોરીયલ સમાપ્ત થાય છે. ચાલો સારાંશ લઈએ.
06:34	આ ટ્યુટોરીયલમાં, આપણે આપેલ વિશે શીખ્યા Image styles અને એક photo gallery view.
06:44	આ વિડિઓ Acquia અને OSTraining માંથી અનુકૂલિત છે અને Spoken Tutorial Project, IIT Bombay દ્વારા પુનરાવર્તિત કરાયેલ છે.
06:53	આપેલ લીંક પર ઉપલબ્ધ વિડિઓ નિહાળો. આ સ્પોકન ટ્યુટોરીયનો સારાંશ આપે છે. તેને ડાઉનલોડ કરીને જુઓ.
07:00	સ્પોકન ટ્યુટોરીયલ ટીમ સ્પોકન ટ્યુટોરીયલનાં મારફતે ઓનલાઇન વર્કશોપો આયોજિત કરે છે. જેઓ ઓનલાઇન પરીક્ષા પાસ કરે છે તેઓને પ્રમાણપત્રો પણ આપે છે. વધુ વિગતો માટે અમને લખો.
07:08	સ્પોકન ટ્યુટોરીયલને પ્રોજેક્ટને આપેલ દ્વારા ફાળો આપવામાં આવ્યો છે - NMEICT, Ministry of Human Resource Development અને NVLI, Ministry of Culture Government of India.
07:19	આઈઆઇટી બોમ્બે તરફથી હું જ્યોતિ સોલંકી વિદાય લઉં છું. જોડવાબદ્દલ આભાર.

Contributors and Content Editors

Bharat636, Jyotisolanki