Difference between revisions of "Drupal/C3/Controlling-Display-of-Images/Gujarati"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with " {|border=1 | '''Time''' | '''Narration''' |- | 00:01 | Welcome to the '''Spoken tutorial''' on''' Controlling Display of Images'''. |- | 00:06 | In this tutorial, we will l...")
 
 
(5 intermediate revisions by the same user not shown)
Line 6: Line 6:
 
|-
 
|-
 
| 00:01
 
| 00:01
−
| Welcome to the '''Spoken tutorial''' on''' Controlling Display of Images'''.
+
| ''' Controlling Display of Images''' પરનાં '''Spoken tutorial''' માં સ્વાગત છે.
  
 
|-
 
|-
 
| 00:06
 
| 00:06
−
| In this tutorial, we will learn about  '''Image styles''' and  a photo gallery view.
+
| આ ટ્યુટોરીયલમાં આપણે આપેલ વિશે શીખીશું: '''Image styles''' અને એક ફોટો ગેલેરી વ્યુ.
  
 
|-
 
|-
 
| 00:12
 
| 00:12
−
| To record this tutorial, I am using:
+
| આ ટ્યુટોરીયલ રેકોર્ડ કરવા માટે, હું ઉપયોગ કરી રહ્યી છું: '''Ubuntu Linux''' ઓપરેટીંગ સિસ્ટમ '''Drupal''' 8 અને '''Firefox''' વેબ બ્રાઉઝર.
−
* '''Ubuntu Linux''' Operating System
+
−
* '''Drupal''' 8 and
+
−
* '''Firefox''' Web browser.
+
  
 
|-
 
|-
 
| 00:21
 
| 00:21
−
| You can use any web browser as per your choice.
+
| તમે તમારા પસંદનું કોઈપણ વેબ બ્રાઉઝર વાપરી શકો છો.
  
 
|-
 
|-
 
| 00:25
 
| 00:25
−
| Let us open our website which we created earlier.
+
| ચાલો આપણે બનાવેલી પહેલાની વેબસાઈટ ખોલીએ.
  
 
|-
 
|-
−
|00:29
+
| 00:29
−
| In''' Drupal''', we can manipulate the size and scale of an image to fit the different needs of the''' site'''.
+
| ''' Drupal''' માં, '''site''' ની આવશ્યકતા અનુસાર આપણે ઇમેજનું માપ અને સ્કેલ બદલી શકીએ છીએ.
  
 
|-
 
|-
 
| 00:37
 
| 00:37
−
| Drupal takes the original image and converts it to the size and scale we want.
+
| ડ્રૂપલ મૂળ ઇમેજને લે છે અને આપણા અનુસાર તેનું માપ અને સ્કેલ બદલે છે.
  
 
|-
 
|-
 
| 00:43
 
| 00:43
−
| Then, it saves that version of the file.
+
| ત્યાબાદ, ફાઈલની આ આવૃત્તિને સંગ્રહે છે.
  
 
|-
 
|-
 
| 00:46
 
| 00:46
−
| Click on''' Configuration'''.
+
| ''' Configuration''' પર ક્લીક કરો.
  
 
|-
 
|-
 
| 00:48
 
| 00:48
−
| We are going to create 2''' image styles''' here.
+
| આપણે અહીં 2''' image styles''' બનાવવા જઈ રહયા છીએ.
  
 
|-
 
|-
 
| 00:51
 
| 00:51
−
| Scroll down and locate''' MEDIA tab.'''
+
| નીચે સ્ક્રોલ કરીને ''' MEDIA tab''' પર જાવ.
  
 
|-
 
|-
 
| 00:54
 
| 00:54
−
| Here, we can see''' Image Styles'''. Click on it.
+
| અહીં, આપણે ''' Image Styles''' જોઈ શકીએ છીએ. તેના પર ક્લીક કરો.
  
 
|-
 
|-
 
| 00:58
 
| 00:58
−
| We will create an''' Image style''' for the '''table''' that we have set up.
+
| આપણે '''table''' માટે એક ''' Image style''' બનાવીશું જે આપણે સુયોજિત કર્યું છે.
  
 
|-
 
|-
 
| 01:03
 
| 01:03
−
| And also for the next view that we will be creating which is a grid of logos.
+
| અને આગળના વ્યુ માટે પણ જેને આપણે બનાવવા માટે જઈ રહયા છીએ જે કે logos નું ગ્રીડ છે.
  
 
|-
 
|-
 
| 01:09
 
| 01:09
−
| Click on''' Add image styles.'''
+
| ''' Add image styles''' પર ક્લીક કરો.
  
 
|-
 
|-
 
| 01:12
 
| 01:12
−
| In the''' Image style name,''' we will type "Upcoming Events 150 x 150".
+
| ''' Image style name''' માં, આપણે ટાઈપ કરીશું "Upcoming Events 150 x 150".
  
 
|-
 
|-
 
| 01:19
 
| 01:19
−
| Notice that Drupal fills out the machine name for us.
+
| નોંધ લો ડ્રૂપલ આપણી માટે મશીનનું નામ ભરે છે.
  
 
|-
 
|-
 
| 01:23
 
| 01:23
−
| This is our''' Image style name.'''
+
| આ છે આપણું ''' Image style name.'''
  
 
|-
 
|-
 
| 01:26
 
| 01:26
−
| Now, click on''' Create new style'''.
+
| હવે, ''' Create new style''' પર ક્લીક કરો.
  
 
|-
 
|-
 
| 01:29
 
| 01:29
−
| On the left, is the original image which is 600 by 800 pixels and the edited version of the image is on the right.
+
| ડાબી બાજુએ, મૂળ ઇમેજ છે જે 600 બાય 800 પિક્સલની છે અને ઇમેજની એડિટ કરેલ આવૃત્તિ જમણી બાજુએ છે.
  
 
|-
 
|-
 
| 01:38
 
| 01:38
−
| Under''' EFFECT''', click on''' Select a new effect''' drop-down.
+
| ''' EFFECT''' અંતર્ગત, ''' Select a new effect''' ડ્રોપ-ડાઉન પર ક્લીક કરો.
  
 
|-
 
|-
 
| 01:42
 
| 01:42
−
| Many options are displayed in this list. Among these options, I will choose''' Scale and crop''' effect.
+
| આ યાદીમાં ઘણા વિકલ્પો દર્શાવ્યા છે. આ વિકલ્પોમાંથી, હું ''' Scale and crop''' અસર પસંદ કરીશ.
  
 
|-
 
|-
 
| 01:49
 
| 01:49
−
| You can choose any option that you want to. For eg:''' Rotate, Resize''' or any other.
+
| તમે તમારા પસંદનું કોઈપણ વિકલ્પ પસંદ કરી શકો છો. ઉદાહરણ તરીકે:''' Rotate, Resize''' અથવા બીજું કોઈપણ.
  
 
|-
 
|-
 
| 01:56
 
| 01:56
−
| Click on the''' Add''' button.
+
| ''' Add''' બટન પર ક્લીક કરો.
  
 
|-
 
|-
 
| 01:58
 
| 01:58
−
| Enter the''' Width''' as''' 150''' and''' Height''' as''' 150'''.
+
| ''' Width''' ને ''' 150''' અને ''' Height''' ને ''' 150''' દાખલ કરો.
−
 
+
 
|-
 
|-
 
| 02:02
 
| 02:02
−
| Remember - never make the''' Width''' and''' Height''' larger than the original image.
+
| યાદ રાખો - ''' Width''' અને ''' Height''' ને મૂળ ઇમેજ કરતા કદી પણ મોટું ન રાખો.
  
 
|-
 
|-
 
| 02:07
 
| 02:07
−
| Doing so, will cause the image to pixelate.
+
| આવું કરવું, ઇમેજનાં પિક્સલને વધુ ખેંચેલ દર્શાવશે.
  
 
|-
 
|-
 
| 02:11
 
| 02:11
−
| Click''' Add effect'''.
+
| ''' Add effect''' ક્લીક કરો.
  
 
|-
 
|-
 
| 02:13
 
| 02:13
−
| Here is our new''' Image Style'''. In the right-hand-side image, we can see that it is now scaled and cropped.
+
| અહીંયા આપણી નવી ''' Image Style''' છે. જમણી બાજુની ઇમેજમાં, આપણી જોઈ શકીએ છીએ કે તે હવે સ્કેલ અને ક્રોપ થઇ છે.
  
 
|-
 
|-
 
| 02:22
 
| 02:22
−
| Let’s create another one. Click on''' Image styles''' and then on''' Add image styles''' button.
+
| ચાલો બીજી એક બનાવીએ. ''' Image styles''' પર ક્લીક કરો અને ત્યારબાદ ''' Add image styles''' બટન પર.
  
 
|-
 
|-
 
| 02:29
 
| 02:29
−
| This time, in the''' Image style name''' we will type: "photo gallery of logos".
+
| આ વખતે, ''' Image style name''' માં, આપણે ટાઈપ કરીશું: "photo gallery of logos".
  
 
|-
 
|-
 
| 02:35
 
| 02:35
−
| Then click on''' Create new style''' button.
+
| ત્યારબાદ ''' Create new style''' બટન પર ક્લીક કરો.
  
 
|-
 
|-
 
| 02:38
 
| 02:38
−
| This can be an image in any '''photo gallery''' on your machine.
+
| આ ઇમેજ તમારા મશીન પર કોઈપણ '''photo gallery''' માં હોઈ શકે છે.
  
 
|-
 
|-
−
| 02:42
+
| 02:42  
−
| You can do this for any image, in any '''field''' and in any content.
+
| આ તમે કોઈપણ ઇમેજ માટે, કોઈપણ '''field''' માં અને કોઈપણ કન્ટેન્ટમાં કરી શકો છો.
  
 
|-
 
|-
 
| 02:47
 
| 02:47
−
| Once again, click on''' Select a new effect''' and then on''' Scale and crop''' option.
+
| ફરી એકવાર, ''' Select a new effect''' પર ક્લીક કરો અને ત્યારબાદ ''' Scale and crop''' વિકલ્પ પર.
  
 
|-
 
|-
 
| 02:53
 
| 02:53
−
| Click on''' Add''' button. Let’s enter the''' Width''' as''' 300''' and''' Height''' as''' 300'''.
+
| ''' Add''' બટન પર ક્લીક કરો. ચાલો ''' Width''' ને ''' 300''' અને ''' Height''' ને ''' 300''' દાખલ કરીએ.
  
 
|-
 
|-
 
| 03:00
 
| 03:00
−
| And then click on''' Add effect''' button.
+
| અને ત્યારબાદ ''' Add effect''' બટન પર ક્લીક કરો.
  
 
|-
 
|-
 
| 03:03
 
| 03:03
−
| Notice that the right-hand-side image now has the new dimensions of 300 by 300.
+
| નોંધ લો જમણી બાજુની ઇમેજ હવે 300 બાય 300 નું નવું માપ ધરાવે છે.
  
 
|-
 
|-
 
| 03:09
 
| 03:09
−
| This shows that Drupal automatically creates versions of images for each''' Image style''' and stores them on the''' site'''.
+
| આ એ દર્શાવે છે કે ડ્રૂપલ દરેક ''' Image style''' માટે આપમેળે ઇમેજોની આવૃતિઓ બનાવે છે અને તેને '''site''' પર સંગ્રહે છે.
  
 
|-
 
|-
 
|  03:18
 
|  03:18
−
|  Click''' Structure''', then on''' Views.'''
+
|  ક્લીક કરો ''' Structure''', ત્યારબાદ ''' Views''' પર.
  
 
|-
 
|-
 
| 03:21
 
| 03:21
−
| Let’s now update our''' Upcoming Events view''' by clicking on''' Edit'''.
+
| ચાલો હવે '''Edit''' પર ક્લીક કરીને આપણા ''' Upcoming Events view''' ને અપડેટ કરીએ.
  
 
|-
 
|-
−
| 03:27
+
| 03:27
−
| Click on''' Event Logo''' and change the''' Image Style''' to''' Upcoming Events.'''  
+
| ''' Event Logo''' પર ક્લીક કરો અને ''' Image Style''' ને ''' Upcoming Events''' તરીકે બદલો.
  
 
|-
 
|-
 
| 03:33
 
| 03:33
−
| Then click on''' Apply'''.
+
| ત્યારબાદ ''' Apply''' પર ક્લીક કરો.
  
 
|-
 
|-
−
| 03:36
+
| 03:36
−
| Scroll down to the preview section and we find that our logos are all uniform.
+
| પ્રિવ્યુ વિભાગમાં નીચે સ્ક્રોલ કરો અને આપણે જોશું કે આપણા દરેક લોગો એકસમાન છે.
  
 
|-
 
|-
 
|  03:42
 
|  03:42
−
|  Now, click on''' Save'''.
+
|  હવે, ''' Save''' પર ક્લીક કરો.
  
 
|-
 
|-
−
| 03:45
+
| 03:45
−
| Click on''' Back to site'''. Here’s our view on our website.
+
| ''' Back to site''' પર ક્લીક કરો. આ આપણી વેબસાઈટ પર આપણું વ્યુ છે.
  
 
|-
 
|-
 
| 03:50
 
| 03:50
−
| This is what''' Image Styles''' does.
+
| આ રીતે ''' Image Styles''' કામ કરે છે.
  
 
|-
 
|-
−
| 03:53
+
| 03:53
−
| Let’s now create a new''' view''' as a grid layout for all these events.
+
| ચાલો હવે આ તમામ ઇવેન્ટો માટે એક નવું ''' view''' એક ગ્રીડ લેઆઉટ તરીકે બનાવીએ.
  
 
|-
 
|-
−
| 03:59
+
| 03:59
−
| To do this, click on''' Structures''', then''' Views''', and''' Add new view'''.
+
| આવું કરવા માટે, ''' Structures''' પર ક્લીક કરો, ત્યારબાદ ''' Views''', અને ''' Add new view'''.
  
 
|-
 
|-
 
| 04:05
 
| 04:05
−
| We will name this as''' Photo Gallery'''.
+
| આપણે આને ''' Photo Gallery''' તરીકે નામ આપીશું.
  
 
|-
 
|-
 
| 04:09
 
| 04:09
−
| Set the''' view''' setting as''' Content - of type - Events'''.
+
| ''' view''' સેટિંગને ''' Content - of type - Events''' તરીકે સુયોજિત કરો.
  
 
|-
 
|-
−
| 04:14
+
| 04:14
−
| This particular '''view''' could be used as photo-of-the-day or gallery of images for any event.
+
| આ ચોક્કસ '''view''' ને photo-of-the-day તરીકે અથવા કોઈપણ ઇવેન્ટ માટે ઈમેજોની ગેલેરીનાં રૂપમાં વાપરી શકાવાય છે.
  
 
|-
 
|-
−
| 04:22
+
| 04:22
−
| Click on''' Create a page.'''
+
| ''' Create a page''' પર ક્લીક કરો.
  
 
|-
 
|-
−
| 04:25
+
| 04:25
−
| Scroll down and select''' Grid''' of''' fields'''.
+
| નીચે સ્ક્રોલ કરો અને ''' fields''' નું ''' Grid''' પસંદ કરો.
  
 
|-
 
|-
 
| 04:29
 
| 04:29
−
| Please note: we can choose any other option, provided in the drop-down by''' Drupal''', also.
+
| નોંધ લો: સાથે જ આપણે ''' Drupal''' દ્વારા ડ્રોપ-ડાઉનમાં આપેલ, કોઈપણ વિકલ્પને પણ પસંદ કરી શકીએ છીએ.
  
 
|-
 
|-
 
| 04:36
 
| 04:36
−
| In''' Items to display''' field, choose''' 9''' as this gives a 3 by 3 grid.
+
| ''' Items to display''' ફિલ્ડમાં, ''' 9''' પસંદ કરો કારણ કે આ 3 બાય 3 ગ્રીડ આપે છે.
  
 
|-
 
|-
 
| 04:42
 
| 04:42
−
| Let’s check''' Create a menu link''' as well.
+
| ચાલો ''' Create a menu link''' પણ ચેક કરીએ.
  
 
|-
 
|-
−
| 04:46
+
| 04:46
−
| Under the''' Menu''' drop-down, choose the option''' Main navigation.'''
+
| ''' Menu''' ડ્રોપ-ડાઉન અંતર્ગત, ''' Main navigation''' વિકલ્પ પસંદ કરો.
  
 
|-
 
|-
 
| 04:51
 
| 04:51
−
| Then click''' Save and Edit'''.
+
| ત્યારબાદ ''' Save and Edit''' ક્લીક કરો.
  
 
|-
 
|-
−
| 04:54
+
| 04:54
−
| Let’s cross-check with our 5 criteria:
+
| ચાલો આપણા 5 માપદંડ ફરી તપાસ કરીએ: ''' Display''' એક ''' Page''' છે,
−
 
+
−
The''' Display''' is a''' Page''',
+
  
 
|-
 
|-
 
| 04:59
 
| 04:59
−
| the''' Format''' is a''' Grid''',
+
| ''' Format''' એ ''' Grid''' છે,
 +
 
 
|-
 
|-
 
| 05:01
 
| 05:01
−
| there is only one''' Field''' named''' Title,'''
+
| અહીં ''' Title''' નામનું ફક્ત એક ''' Field''' છે.
  
 
|-
 
|-
 
| 05:04
 
| 05:04
−
| and lastly, the''' Filter''' and''' Sort Criteria'''.
+
| અને છેલ્લે, ''' Filter''' અને ''' Sort Criteria'''.
  
 
|-
 
|-
 
| 05:08
 
| 05:08
−
| We will leave these as they are, for now.
+
| હમણાં માટે, આપણે આને આવું જ રહેવા દઈશું.
  
 
|-
 
|-
−
| 05:12
+
| 05:12
−
| Scroll down. We see here - we have 4 '''column'''s and 9 '''events'''.
+
| નીચે સ્ક્રોલ કરો. આપણે અહીં જોઈએ છીએ - આપણી પાસે 4 '''columns''' અને 9 '''events''' છે.
  
 
|-
 
|-
−
| 05:17
+
| 05:17
−
| To change the number of columns, in''' Format,''' click on the''' Settings''' option'''.'''
+
| ''' Format''' માં, કોલમોની સંખ્યા બદલવા માટે, ''' Settings''' વિકલ્પ પર ક્લીક કરો.
  
 
|-
 
|-
 
| 05:22
 
| 05:22
−
| Then change the number of columns to 3 and click''' Apply'''.
+
| ત્યારબાદ કોલમની સંખ્યા 3 કરો અને ''' Apply''' ક્લીક કરો.
  
 
|-
 
|-
 
| 05:28
 
| 05:28
−
| That will give us a 3 by 3 grid.
+
| આ આપણને 3 બાય 3 ગ્રીડ આપશે.
  
 
|-
 
|-
−
| 05:31
+
| 05:31
−
| In''' Fields''', click on''' Add.'''  
+
| ''' Fields''' માં, ''' Add''' પર ક્લીક કરો.
  
 
|-
 
|-
 
| 05:34
 
| 05:34
−
| Locate the''' Event Logo''', put a check mark on it and then click on''' Apply'''.
+
| ''' Event Logo''' પર જાવ, તેના પર ચેકમાર્ક મુકો અને ત્યારબાદ ''' Apply''' પર ક્લીક કરો.
  
 
|-
 
|-
−
| 05:40
+
| 05:40
−
| This time, choose the''' photo gallery of logos''' as''' Image style.'''
+
| આ વખતે, ''' Image style''' માં ''' photo gallery of logos''' પસંદ કરો.
  
 
|-
 
|-
 
| 05:45
 
| 05:45
−
| In''' Link image to,''' choose''' Content''', and then click''' Apply'''.
+
| ''' Link image to''' માં, ''' Content''' પસંદ કરો, અને ત્યારબાદ ''' Apply''' ક્લીક કરો.
  
 
|-
 
|-
−
| 05:50
+
| 05:50
−
| Immediately, in the''' Preview''' section below, a grid is laid out.
+
| તુરત જ, નીચે ''' Preview''' વિભાગમાં, ગ્રીડ પ્રદર્શિત થાય છે.
  
 
|-
 
|-
 
| 05:55
 
| 05:55
−
| So, you see, a grid layout differs from a '''table'''.
+
| તો, તમે જોયું કે, ગ્રીડ લેઆઉટ '''table''' થી જુદું છે.
  
 
|-
 
|-
 
| 06:00
 
| 06:00
−
| All the '''fields''' that you choose from a node, are in one cell.
+
| તમામ '''fields''' જે તમે નોડમાંથી પસંદ કર્યા છે, તે એક સેલમાં છે.
  
 
|-
 
|-
 
| 06:05
 
| 06:05
−
| And, we can decide how many cells we want to display.
+
| અને, આપણે નક્કી કરી શકીએ છીએ કે આપણે કેટલી સેલો દર્શાવવી છે.
  
 
|-
 
|-
−
| 06:09
+
| 06:09
−
| Let’s click on''' Save''' now.  
+
| ચાલો હવે ''' Save''' પર ક્લીક કરો.
  
 
|-
 
|-
 
| 06:12
 
| 06:12
−
| Let’s click on''' Back to site''' button and then click on''' Photo Gallery'''.
+
| ચાલો ''' Back to site''' બટન પર ક્લીક કરો અને ત્યારબાદ ''' Photo Gallery''' પર ક્લીક કરો.
  
 
|-
 
|-
 
| 06:17
 
| 06:17
−
| This looks quite nice.
+
| આ બહુ સરસ દેખાય છે.
  
 
|-
 
|-
−
| 06:19
+
| 06:19
−
| On a small device like a mobile, all the images scale down to maintain their 3 by 3 grid.
+
| મોબાઈલ જેવા નાના ઉપકરણ પર, તમામ ઈમેજો તેમની 3 બાય 3 ગ્રીડને જાળવવા માટે ઓછી સ્કેલ થઇ જાય છે.
  
 
|-
 
|-
 
| 06:26
 
| 06:26
−
| And that is what''' Drupal''' does with a grid.
+
| અને આવું જ ''' Drupal''' ગ્રીડ સાથે કરે છે.
  
 
|-
 
|-
 
| 06:29
 
| 06:29
−
| With this, we come to the end of this tutorial. Let us summarize.
+
| આ સાથે, આપણું આ ટ્યુટોરીયલ સમાપ્ત થાય છે. ચાલો સારાંશ લઈએ.
  
 
|-
 
|-
 
| 06:34
 
| 06:34
−
| In this tutorial, we have learnt about  '''Image styles''' and  A '''photo gallery view.'''
+
| આ ટ્યુટોરીયલમાં, આપણે આપેલ વિશે શીખ્યા '''Image styles''' અને એક '''photo gallery view.'''
  
 
|-
 
|-
 
| 06:44
 
| 06:44
−
| This video is  adapted from '''Acquia''' and '''OSTraining''' and revised by '''Spoken Tutorial Project, IIT Bombay'''.
+
| આ વિડિઓ '''Acquia''' અને '''OSTraining''' માંથી અનુકૂલિત છે અને '''Spoken Tutorial Project, IIT Bombay''' દ્વારા પુનરાવર્તિત કરાયેલ છે.
  
 
|-
 
|-
 
| 06:53
 
| 06:53
−
| The video at this link summarizes the Spoken Tutorial project. Please download and watch it.
+
| આપેલ લીંક પર ઉપલબ્ધ વિડિઓ નિહાળો. આ સ્પોકન ટ્યુટોરીયનો સારાંશ આપે છે. તેને ડાઉનલોડ કરીને જુઓ.  
  
 
|-
 
|-
 
| 07:00
 
| 07:00
−
| The Spoken Tutorial Project team conducts workshops and gives certificates. For more details, please write to us.
+
| સ્પોકન ટ્યુટોરીયલ ટીમ સ્પોકન ટ્યુટોરીયલનાં મારફતે ઓનલાઇન વર્કશોપો આયોજિત કરે છે. જેઓ ઓનલાઇન પરીક્ષા પાસ કરે છે તેઓને પ્રમાણપત્રો પણ આપે છે. વધુ વિગતો માટે અમને લખો.
  
 
|-
 
|-
 
| 07:08
 
| 07:08
−
| Spoken Tutorial Project is funded by-
+
| સ્પોકન ટ્યુટોરીયલને પ્રોજેક્ટને આપેલ દ્વારા ફાળો આપવામાં આવ્યો છે -'''NMEICT, Ministry of Human Resource Development''' અને'''NVLI, Ministry of Culture Government of India'''.
−
* NMEICT, Ministry of Human Resource Development and
+
−
* NVLI, Ministry of Culture Government of India.
+
  
 
|-
 
|-
 
| 07:19
 
| 07:19
−
| This is Ameesha Bhorkhade, signing off. Thanks for joining.
+
| આઈઆઇટી બોમ્બે તરફથી હું જ્યોતિ સોલંકી વિદાય લઉં છું. જોડવાબદ્દલ આભાર.
  
 
|}
 
|}

Latest revision as of 17:41, 14 October 2016

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 અહીંયા આપણી નવી 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 બાય 300 નું નવું માપ ધરાવે છે.
03:09 આ એ દર્શાવે છે કે ડ્રૂપલ દરેક 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 બાય 3 ગ્રીડ આપે છે.
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 બાય 3 ગ્રીડ આપશે.
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 બાય 3 ગ્રીડને જાળવવા માટે ઓછી સ્કેલ થઇ જાય છે.
06:26 અને આવું જ Drupal ગ્રીડ સાથે કરે છે.
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

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Drupal/C3/Controlling-Display-of-Images/Gujarati&oldid=29272"