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...")
 
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''' Operating System
+
* '''Ubuntu Linux''' ઓપરેટીંગ સિસ્ટમ
−
* '''Drupal''' 8 and
+
* '''Drupal''' 8 અને
−
* '''Firefox''' Web browser.
+
* '''Firefox''' વેબ બ્રાઉઝર.
  
 
|-
 
|-
 
| 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''' ક્લીક કરો.
  
 
|-
 
|-
Line 334: Line 334:
 
|-
 
|-
 
| 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 and
+
* NMEICT, Ministry of Human Resource Development અને
 
* NVLI, Ministry of Culture Government of India.
 
* NVLI, Ministry of Culture Government of India.
  
 
|-
 
|-
 
| 07:19
 
| 07:19
−
| This is Ameesha Bhorkhade, signing off. Thanks for joining.
+
| આઈઆઇટી બોમ્બે તરફથી હું જ્યોતિ સોલંકી વિદાય લઉં છું. જોડવાબદ્દલ આભાર.
  
 
|}
 
|}

Revision as of 22:10, 4 September 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 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

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