Drupal/C2/Editing-Existing-Content/Gujarati

From Script | Spoken-Tutorial
Revision as of 23:55, 31 August 2016 by Bharat636 (Talk | contribs)

Jump to: navigation, search
Time
Narration
00:01 Editing Existing Content પરનાં સ્પોકન ટ્યુટોરીયલમાં સ્વાગત છે.
00:06 આ ટ્યુટોરીયલમાં આપણે Inline editing વિશે શીખીશું.
00:10 CKEditor વાપરીને અને
00:12 CKEditor કોન્ફીગર કરીને.
00:15 આ ટ્યુટોરીયલ રેકોર્ડ કરવા માટે, હું વાપરી રહ્યો છું:
  • Ubuntu Operating System
  • Drupal 8 અને
  • Firefox વેબ બ્રાઉઝર.
00:24 તમે તમારા પસંદનું કોઈપણ વેબ બ્રાઉઝર વાપરી શકો છો.
00:28 ચાલો આપણે પહેલા બનાવેલી આપણી વેબસાઈટ ખોલીએ.
00:32 પહેલા, આપણે Inline Editing વિશે શીખીશું.
00:36 કર્સરને Title પર ફેરવો. જમણી બાજુએ, આપણને એક pencil icon દેખાશે.
00:43 જ્યારે આપણે Title પર માઉસ ફેરવીએ છીએ ત્યારે, તે આપણને block કોન્ફીગર કરવા માટે પૂછશે.
00:48 Configure block પર ક્લીક કરો. block Page Title માટે સામાન્ય બ્લોક છે.
00:54 આને બદલવાથી દરેક node પર Page Titles દ્રશ્યમાન થવાની રીત બદલાશે.
00:59 Go back to site પર ક્લીક કરો. અહીં pencil પર ફેરવો અને Configure block પર ક્લીક કરો.
01:06 તમને જો ટેબો બદલવા હોય તો, તમે તે અહીં બદલી શકો છો.
01:10 હું તેને એવું જ રહેવા દઈશ.
01:13 Back to site ક્લીક કરો.
01:16 હવે, Content area માં pencil પર ક્લીક કરો.
01:20 તમને ત્રણ વિકલ્પો દેખાશે – Quick edit, Edit અને Delete.
01:25 Quick editinline window માં front end એડિટિંગ છે.
01:29 Edit આપણને નોડ માટે મુખ્ય એડિટિંગ વિન્ડોમાં પાછી લઇ જાય છે.
01:33 Delete એ ખાતરી કર્યા પછીથી નોડને રદ્દ કરશે.
01:37 ચાલો આપણી નોડને આંતરિક શૈલીમાં એડિટ કરવા માટે Quick edit પર ક્લીક કરીએ.
01:41 જેમ આપણે માઉસ ફેરવશું, તે આપણને વ્યક્તિગત નોડનાં વિભિન્ન વિભાગોમાં લઇ જાય છે.
01:47 જ્યારે આપણે તેના પર ક્લીક કરીએ છીએ તો, આપણે વધુ કન્ટેન્ટને ઉમેરવા, સ્ત્રોતને જોવા અને ઉપરાંત અમુક ટેક્સ્ટને બોલ્ડ કરવામાં સમર્થ છીએ.
01:53 એકવાર આપણે ફેરફાર કરી લઈએ તો, Drupal તેને સંગ્રહવા માટે પૂછે છે. નોડને અપડેટ કરવા માટે Save પર ક્લીક કરો.
02:00 હવે, ચાલો article node ને બદલવાનું શીખીએ, માનો કે Welcome to Drupalville.
02:06 Quick edit પર ક્લીક કરો. નોંધ લો કે front end માં Title અને body ફીલ્ડો અહીં એડિટ કરી શકાય એવા છે.
02:14 પરંતુ આપણે ઇમેજને એડિટ કરી શકતા નથી.
02:17 ઇમેજને એડિટ કરવા માટે, આપણને edit screen માં જવું પડશે.
02:22 હવે આપણે body માં ફેરફાર કરી શકીએ છીએ અને તેને સંગ્રહીશું.
02:26 સાથે જ હું Quick edit વિન્ડોમાં tags પણ એડિટ કરી શકું છું.
02:30 Drupal માં ફ્રન્ટ એંડ એડિટિંગ સાદા એડિટો માટે યોગ્ય છે.
02:34 કન્ટેન્ટને કોઈપણ સમયે અપડેટ કરવા માટે Edit ટેબ એ Drupal ની એક ઉત્તમ વિશિષ્ટતા છે.
02:40 Wysiwyg Editor એ પહેલા પણ ઘણી વખત ઉલ્લેખાયી હતી.
02:44 તે what you see is what you get આ માટે ઉભી રહે છે.
02:48 Wysiwyg Editor એ ઘણી મદદગાર છે.
02:52 ચાલો પહેલા Text Format ને Full HTML માં બદલીએ.
02:58 આ આપણને Wysiwyg Editor માં ઉપલબ્ધ ફોર્મેટિંગ વિકલ્પોનો વિચાર આપશે.
03:04 Drupal માં, CKEditor Drupal core સાથે આવે છે.
03:09 મૂળભૂત રીતે તે ચાલુ હોય છે અને કોન્ફીગર કરી શકાય એવી હોય છે.
03:14 ચાલો એક નજર ફેરવી લઈએ. "Welcome to our site" આ ટેક્સ્ટને હાઈલાઈટ કરો.
03:20 ફોર્મેટ Normal માંથી Heading 2 માં બદલો.
03:24 તુરત જ, ટેક્સ્ટ કેવી દેખાશે તેનો પ્રિવ્યું Drupal આપે છે.
03:30 આ નિશ્ચિત થાય છે theme અને cascading style sheets અથવા CSS દ્વારા જે કે આપણને થીમ દ્વારા અપાય છે.
03:38 ચાલો અહીં અમુક વધુ ટેક્સ્ટ ઉમેરીએ, “Editing Drupal nodes is really fun!”.
03:44 હવે તે ટેક્સ્ટને હાઈલાઈટ કરો, Italics ને બંધ કરો અને તે ટેક્સ્ટ માટે એક hyperlink બનાવો.
03:52 અહીં, ચાલો માનો કે, http://drupal.org/ . Save પર ક્લીક કરો.
04:00 માઉસને ફેરવો અને નોંધ લો કે ટેક્સ્ટ હવે hyperlinked છે.
04:04 hyperlink ને રદ્દ કરવા માટે, ટેક્સ્ટને હાઈલાઈટ કરો અને Unlink પર ક્લીક કરો.
04:10 ફેરફારને undo કરવા માટે Ctrl+Z દાબો.
04:14 આપણે અહીં Bullets and numbering icons પર ક્લીક કરીને ordered અને unordered lists પણ ઉમેરી શકીએ છીએ.
04:21 Unordered list પર ક્લીક કરો. ત્યારબાદ bullets - one, two, three ઉમેરો.
04:28 આગળ, Ordered list પર ક્લીક કરો અને one, two અને three ઉમેરો.
04:34 Block quotes વાપરવા માટે, અમુક ટેક્સ્ટને હાઈલાઈટ કરો અને Block Quote લીંક પર ક્લીક કરો.
04:40 ફરી એક વાર, ફોર્મેટિંગ આપણી theme દ્વારા વ્યવસ્થાપિત થાય છે.
04:46 આપણે ઇમેજને પણ સરળતાથી દાખલ કરી શકીએ છીએ. મેં આ ફાઈલને પસંદ કરી છે જેને મેં પહેલી node પર અપલોડ કરી હતી.
04:56 Alternate Text ફિલ્ડમાં, હું ટાઈપ કરીશ “Drupal Logo”.
05:02 Align અંતર્ગત, હું Right પસંદ કરીશ. જો તમને જોઈએ તો એક Caption ઉમેરો.
05:08 છેલ્લે, Save પર ક્લીક કરો.
05:12 હવે આ body અંતર્ગત node માં ઉમેરાઈ ગયું છે. ઇમેજ પર માઉસ ફેરવો, જો તમે ચાહો તો તેને ક્લીક કરીને તેને નવી જગ્યાએ ડ્રેગ કરો.
05:22 આપણને સૌ પહેલા આપણા એડિટિંગ વિન્ડોને સેજ માપસર કરવું પડશે, જેથી કરીને આપણે આપણી ઇમેજને જોઈએ એ સ્થાને ડ્રેગ કરી શકીએ.
05:30 ઇમેજ પર માઉસ ફેરવવાથી પણ આપણી ઈમેજોને resize કરવાની પરવાનગી મળે છે.
05:36 આપણા Drupal node માં ઈમેજો ઉમેરીએ એ પહેલા, એ વાતની ખાતરી કરી લો કે આપણી ઇમેજ બરાબરથી માપસર કરેલ અને ફોર્મેટ કરેલ હોય.
05:43 જેનાથી node પર કન્ટેન્ટને અલાઇન કરવામાં ઘણી મદદ મળશે.
05:47 આપણે એક table અથવા એક horizontal line ઉમેરી શકીએ છીએ.
05:51 અને blocks પણ દર્શાવી શકીએ છીએ જે આપણે આપણી નોડમાં બનાવ્યા હતા.
05:55 તો, આ રહ્યું H2 block, એક block code, paragraph, tag વગેરે.
06:01 તમને જો HTML ની જાણકારી હોય તો, તમે આ icon પર ક્લીક કરીને source જોઈ શકો છો.
06:07 આગળ વધો એ પહેલા આ દરેક વિકલ્પોનું બરાબરથી અન્વેષણ કરો.
06:12 યાદ કરો આપણે Full HTML ને ચાલુ કર્યું છે.
06:16 જો આપણે આને Basic HTML માં બદલીએ છીએ તો, તે આપણને ચેતવણી આપશે.
06:21 કન્ટેન્ટ હંમેશા માટે ખોવાઈ જાય કે રદ્દ થઇ જાય એવી શક્યતા છે.
06:26 માનો કે, આપણે દાખલ કરી છે એક JavaScript, I-frame, youtube video, એક google map અથવા એના જ જેવું કંઈક.
06:33 Basic HTML માં બદલવાથી, Drupal આ કન્ટેન્ટને રદ્દ કરશે.
06:38 આવી સમસ્યાને ઉકેલવા માટે, ફક્ત એ જ રાખો જે ખરેખર તમને જોઈએ છે.
06:43 ચાલો સેટિંગ્સમાં કરેલ ફેરફારને રદ્દ કરીએ, જેથી આપણું કંઈપણ ખોવાશે નહીં.
06:48 Drupal સાથે આવેલ CKEditor નું આ એક ઝડપી ઓવરવ્યુ છે.
06:52 અને આપણે શીખ્યા કે તેને કેવી રીતે કસ્ટમાઇઝ કરવું.
06:55 હવે Save and keep published પર ક્લીક કરો.
06:58 મોડીફાય કરેલ node દ્રશ્યમાન થાય છે.
07:01 આગળ ચાલો CKEditor ને કોન્ફીગર કરતા શીખીએ.
07:05 ઉપર Let’s click on Configuration at the top.
07:09 Now click on Text formats and editors.
07:13 We will notice that Basic HTML and Full HTML use the CKEditor.
07:19 And, they are assigned to Authenticated User and Administrator.
07:24 These are two unique user roles.
07:27 In Drupal, our user has different roles and each role has to be given permissions.
07:34 In this case, Basic HTML can be used by an Authenticated user and Administrator.
07:41 The CKEditor has been assigned for these 2 roles.
07:45 Similarly, Full HTML can be used by an Administrator.
07:50 Now, let’s check CKEditor for the Basic HTML.
07:54 Click on Configure and you will be able to assign it to different roles.
07:59 Assign any Text editor that you want. And then give them permissions for the buttons that they are allowed to use.
08:07 Recall - this is the Active toolbar we had, for the Authenticated User for Basic HTML Text Format.
08:15 What if we want to add one of these buttons to our Active toolbar? This is very simple.
08:21 Let’s choose Paste from Word icon from Available buttons.
08:26 Then click and drag the mouse until a little blue box opens up where we can add the icon.
08:33 To add a new group, click on Add group button. Name it “copy and paste” and click on Apply.
08:41 Now, click and drag Paste from Word icon into the copy and paste section.
08:47 Let’s now add all the paste icons here.
08:51 So, we have added three new buttons to our bar for Basic HTML format.
08:57 Paste icons are something that every toolbar needs, as most text are copy-pasted from files.
09:04 We also upload inline-images. And upload images with a maximum file size of 32MB, with any width and height.
09:14 The maximum size may be different in your installation.
09:18 We can change any of these settings down here, as per our preference.
09:23 Say, we always want to change a URL into a link, instead of manually linking it.
09:29 We can do so by clicking Convert URLs into links option.
09:34 Here we also have the Filter settings. Let’s click on Limit allowed HTML tags.
09:41 Now, we will be able to add the HTML tags that we can use, when we look at the source.
09:47 So, this is a really powerful WYSIWYG editor and its configuration area.
09:54 Once we have made all our changes, click the Save configuration button.
09:59 Let us now look at our Content.
10:02 Click the Edit option in Welcome to Drupalville node.
10:07 Notice that since we had Full HTML turned ON, nothing has changed.
10:12 Let’s now change this to Basic HTML. All the changes are still there.
10:18 Though I can’t see my blocks anymore, the Paste icons are now available.
10:23 I don’t want this image here. So, I’ll delete it by clicking on the image and pressing the Backspace or Delete key on my keyboard.
10:32 Click on Save and keep published.
10:35 Once again, click on Configuration. Scroll down and click on Text formats and editor.
10:43 This time let us configure the Full HTML toolbar.
10:47 Notice that we have got a few more buttons here but not the Paste icons.
10:52 Click Show group names and click Add group on the second line this time.
10:57 Name it as “copy and paste”. Now we can click and drag these into our copy and paste section.
11:05 Similarly down here, we have all these options again. For now, click on Save configuration button.
11:13 Let’s go back to our Welcome to Drupalville again and change it to Full HTML.
11:18 Click Continue. And now, we see two rows of buttons.
11:23 This means our editor is all set.
11:26 Take some time to play around with the CKEditor, and make sure that you understand it well.
11:32 With this we come to the end of this tutorial. Let us summarize.
11:37 In this tutorial, we have learnt about:
  • Inline editing
  • Using CKEditor and
  • Configuring CKEditor
11:50 આ વિડિઓ Acquia અને OSTraining માંથી અનુકૂલિત છે અને IIT બોમ્બે દ્વારા પુનરાવર્તિત કરાયેલ છે.
11:59 આપેલ લીંક પર ઉપલબ્ધ વિડિઓ નિહાળો આ સ્પોકન ટ્યુટોરીયલનો સારાંશ આપે છે. તેને ડાઉલોડ કરીને જુઓ.
12:06 સ્પોકન ટ્યુટોરીયલ ટીમ સ્પોકન ટ્યુટોરીયલનાં મારફતે ઓનલાઇન વર્કશોપો આયોજિત કરે છે. જેઓ ઓનલાઇન પરીક્ષા પાસ કરે છે તેઓને પ્રમાણપત્રો પણ આપે છે.વધુ વિગતો માટે અમને લખો.
12:13 સ્પોકન ટ્યુટોરીયલને NMEICT, Ministry of Human Resource Development અને NVLI, Ministry of Culture Government of India પાસેથી ફાળો આપવામાં આવ્યો છે.
12:25 આઈઆઇટી બોમ્બે તરફથી હું ભરતભાઈ સોલંકી વિદાય લઉં છું. જોડાવાબદ્દલ આભાર.

Contributors and Content Editors

Bharat636, Jyotisolanki