iBright Web Design Studio - Drupal http://ibright.org/ tags/drupal en HOW TO CREATE A PASSWORDLESS & SECURE DRUPAL SITE? http://ibright.org/ create-passwordless-secure-drupal-site <div class="field field-name-field-image field-type-image field-label-hidden"><div class="field-items"><div class="field-item even" rel="og:image rdfs:seeAlso" resource="http://ibright.org/ sites/default/files/field/image/bright-passwordless.png"><a href="http://ibright.org/ sites/default/files/field/image/bright-passwordless.png" title="Drupal Passwordless Login" class="colorbox" rel="gallery-node-22-BqfMXRi2QHQ"><img typeof="foaf:Image" src="http://ibright.org/ sites/default/files/styles/large/public/field/image/bright-passwordless.png?itok=aZJ0uw1m" width="480" height="246" alt="Drupal Passwordless Login" title="" /></a></div></div></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>Today I am goin to show you how to improve your Drupal sites security a step further by adding Passwordless function to your Drupal site. We are going to use the module "Passwordless"  this module replaces the regular Drupal login form with a modification of the password-request form, to give the possibility to log in without using a password. <br /> Every time a user needs to log in, only the e-mail address is required. The login link will be sent to the user’s e-mail address, and will expire in 24 hours if not used.</p> <h2> REQUIRED MODULES</h2> <ol><li> <a href="http://drupal.org/project/passwordless">Passwordless</a></li> <li> <a href="http://drupal.org/project/email_confirm">Email Change Confirmation</a></li> <li> <a href="http://drupal.org/project/email_registration">Email Registration</a> (Optional)</li> </ol><p>Install the above three modules and configure the Passwordless module from here <strong>admin/config/system/passwordless</strong></p> <p><a class="colorbox" href="/sites/default/files/images/passwordless.jpg" rel="gallery"><img alt="Drupal Passwordless Login" src="/sites/default/files/images/passwordless.jpg" style="width: 700px; height: 686px;" /></a></p> </div></div></div><div class="field field-name-field-tags field-type-taxonomy-term-reference field-label-above"><div class="field-label">Tags:&nbsp;</div><div class="field-items"><div class="field-item even" rel="dc:subject"><a href="/tags/passwordless-login" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Passwordless Login</a></div><div class="field-item odd" rel="dc:subject"><a href="/tags/drupal" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Drupal</a></div></div></div><div class="easy_social_box clearfix vertical easy_social_lang_en"> <div class="easy_social-widget easy_social-widget-twitter first"><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://ibright.org/ create-passwordless-secure-drupal-site" data-count="vertical" data-lang = "en" data-via="" data-related=":Check it out!" data-text="HOW TO CREATE A PASSWORDLESS & SECURE DRUPAL SITE?">Tweet</a></div> <div class="easy_social-widget easy_social-widget-facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&amp;href=http%3A//ibright.org/ create-passwordless-secure-drupal-site&amp;send=false&amp;layout=box_count&amp;width=48&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=&amp;height=90&amp;appId=" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:48px; height:90px;" allowTransparency="true"></iframe></div> <div class="easy_social-widget easy_social-widget-googleplus"><div class="g-plusone" data-size="tall" data-annotation="bubble" data-href="http://ibright.org/ create-passwordless-secure-drupal-site"></div></div> <div class="easy_social-widget easy_social-widget-linkedin last"><script type="in/share" data-url="http://ibright.org/ create-passwordless-secure-drupal-site" data-counter="top"></script></div> </div> <!-- /.easy_social_box --> Wed, 27 Feb 2013 05:53:44 +0000 ciril 22 at http://ibright.org/s__www HOW TO INSTALL & SETUP VIEWS SLIDESHOW MODULE ON DRUPAL7? http://ibright.org/ how-to-install-views-slideshow-module-on-drupal7 <div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p><a href="http://ibright.org/ how-to-install-views-slideshow-module-on-drupal7" title="how to install Views Slideshow module on drupal7"><img alt="Views Slide Show on Drupal7" src="/sites/default/files/images/homepage.png" style="width: 620px; height: 288px; border: 0px none; margin: 0px;" /></a></p> <p>Today I gonna show you how to install and setup the amazing views slideshow module on Drupal7.</p> <p><span style="color:#00cc00;"><strong>This tutorial is now uptodate with latest modules!!!</strong></span></p> <h2> <strong><strong>(1) Required Modules </strong></strong>(Version: Drupal7.0)</h2> <ol><li> <a href="http://drupal.org/project/views"><strong>Views (7.x-3.0-beta3)</strong></a></li> <li> <strong><a href="http://drupal.org/project/views_slideshow">Views Slideshow (7.x-3.0-alpha1)</a></strong></li> <li> <a href="http://drupal.org/project/ctools"><strong>Chaos tool suite (7.x-1.0-alpha4</strong><strong>)</strong></a></li> <li> <a href="http://drupal.org/project/libraries"><strong>Libraries (7.x-1.0)</strong></a></li> <li> <a href="http://drupal.org/project/link"><strong>Link Field (7.x-1.0-alpha3)</strong></a></li> <li> <a href="http://drupal.org/project/token"><strong>Token (optional) (7.x-1.0-beta1)</strong></a></li> </ol><h2> <strong><strong>(2) Install the Modules</strong></strong></h2> <p>In Drupal7 you can install modules from the admin section, but I still feel this new feature doesn't have any meaning, because we have to search for the module link in the Druapl site and then copy paste into the admin module installation area, really crazy. It would have been so good if they would have made it something like wordpress a small search feasture. Anyway I just gonna download and istall it in the old way (I still recommend this old way).</p> <p>Download all the modules from Drupal site and install in the directory <strong>yoursitename/sites/all/modules</strong>.<br /> Go to <strong><a href="http://www.yoursitename.com/node#overlay=admin/modules">http://www.yoursitename.com/node#overlay=admin/modules</a></strong> and enable these modules as below;</p> <p>(1) <strong>Views</strong> (2) <strong>Views UI</strong> (3) <strong>Views Slideshow</strong> (4) <label for="edit-modules-views-views-slideshow-cycle-enable"><strong>Views Slideshow: Cycle </strong></label>(5) <strong>Chaos tools (6) Link (7) Libraries (8) Token (Optional)</strong></p> <h2> <strong><strong><strong><strong>(3) Create Image Cache</strong></strong></strong></strong></h2> <p>In Drupal7 imagecache is part of core module and is named as <u><strong>Image styles.</strong></u> So let's create two image cache from here, one for the full size slider image and other for the thumbnail image. In this tutorial I use 935x293 (pixels) dimension for the full size slider image and 210x100 (pixels) dimension for the thumbnail image. <u><strong>Note: These configurations csn be defered depends on your needs.</strong></u></p> <p><u><strong>* Fullsize Slider image settings</strong></u></p> <p>Go to <a href="http://www.yoursitename.com/node#overlay=admin/config/media/image-styles">http://www.yoursitename.com/node#overlay=admin/config/media/image-styles</a> and click on the add new style link<br />   (1) Give an Image style name and click on create new style button<br />   (2) On the next configuration screen <u><strong>select new style</strong></u> you want and then click <u><strong>add</strong></u> button (In this tutorial I choose resize style)<br />   (3) On the next screen set the <u><strong>width and height</strong></u> and click on the <u><strong>add effect</strong></u> button. (The settings may vary depend on the style you choose). I set width as 935 and height as 293 <span class="field-suffix">pixels.</span></p> <p>Do this same process for the thumbnail image too. (for the thumbnail image dimension, I set width as 210 and height as 100 <span class="field-suffix">pixels.)</span></p> <h2> <strong><strong>(4) Create New Content Type</strong></strong></h2> <p>Let's create a new content type, From the dashboard menu bar cick on <u><strong>Structure</strong></u> and then <u><strong>content types</strong></u> then click on the <u><strong>add new content type</strong></u> link.</p> <p>  (1) Give a human-readable name, I named it as <u><strong>Featured Slider</strong></u> (machiine name will be auto generated based on the human readable name)<br />   (2) Give a brief and relevant description<br />   (3) Submission form settings, I leave as the default settings<br />   (4) Publishing options, I checked <u><strong>only published</strong></u> (all other settings <u>unchecked</u>)<br />   (5) Display settings, I have <u><strong>unchecked</strong></u> the authour and date info.<br />   (6) Comment settings,I set <u><strong>hidden</strong></u> (disabled)<br />   (7) Menu settings, I leave as default settings.<br />   (8) Click <strong><u>Save and add fields</u></strong> Button</p> <h2> <strong><strong>(5) Create New Fields</strong></strong></h2> <p>Here in this example I create only two fileds, and they are image field and link field.<br /> We will use image field for uploading our slider image and link field for creating a custom link where we want our slider to be linked.</p> <p><strong> Image Field Settings</strong></p> <p>    (1) Label: Slider Image<br />     (2) Field: slider_image<br />     (3) Field type: image<br />     (4) Widget (form element): image<br />     (5) Click <u><strong>Save</strong></u> button, and on the field settings page leave default settings and click on <u><strong>Save field settings</strong></u> button.<br />     (6) On the image field configuration settings page you can configure as you wish.<br /> I set this field as required, I added a file director name called <u><strong>slider-image</strong></u> so that this images will be arranged sperately from other images.<br /> You can set the maximum upload size and resolution here, I have anabled <u><strong>alt and title</strong></u> field and finally click <u><strong>Save settings</strong></u> button.</p> <p>By using same method create the link field too.</p> <p><strong>Link Field Settings</strong></p> <div>     (1) Label: Slider Link<br />     (2) Field: slider_link<br />     (3) Field type: link<br />     (4) Widget (form element): link<br />     (5) Click <u><strong>Save</strong></u> button,</div> <div> For the link field configurations leave evrything to default settings.</div> <div> I have re arranged the field like shown below;</div> <div>  Title field<br />  Image field<br />  Link field<br />  Body field (you can even remove this field if not necessary)</div> <div> <strong>Manage Display</strong></div> <div> On the manage display tab you can conigure how the out put of the field to be diplayed.<br /> I have set the <u><strong>link field</strong></u> as <strong><u>hidden</u></strong> and I have also set <u><strong>image label</strong></u> as <u><strong>hidden</strong></u></div> <div> <u><strong><img alt="Drupal7: manage fields" src="/sites/default/files/images/manage-fields.png" style="width: 630px; height: 365px; border: 0px none; margin: 0px;" /></strong></u></div> <h2> <strong>(6) Create Feature Slider Content</strong></h2> <p>I have created four featured slider content for this tutorial.</p> <p>  (1) Click on <u><strong>add content</strong></u> link<br />   (2) Create Featured Slider content<br />   (3) Give a proper title name<br />   (4) Upload slider image<br />   (5) Give alt and title field names<br />   (6) Give a link <u><strong>title and url</strong></u> where you want the slider to be linked<br />   (7) Leave all othe settings as default except for the <u><strong>path field</strong></u> if yo want you can give an SEO friendly URL alias.<br />   (8) Save the content.</p> <p>Same way create more Featured Slider contents (I have created four contents)</p> <h2> <strong><strong>(7) Create a New View</strong></strong></h2> <p>Now it's time to create our new Slideshow view.<br /> From the <u><strong>Dashboard</strong></u> menu click on the <u><strong>Structure</strong></u> and then click on the <u><strong>Views</strong></u>.</p> <p>  (1) Click add new view<br />   (2) Give view name, I have named as <u><strong>Featured Slider</strong></u> (machiine name will be auto generated)<br />   (3) Give an apropriate view description<br />   (4) Choose Show <u><strong>Content</strong></u> of type <u><strong>Featured Slider</strong></u> (your content type name).<br />   (5) Uncheck <u><strong>Create a Pge</strong></u> and check <strong><u>Create a block</u></strong><br />   (6) Type in Block title and choose display format as <u><strong>"Slideshow"</strong></u> of "<strong>fields</strong>" items per page 5 (you can enter the number of items you want to display)<br />   (7) Click the button "<strong><u>Continue &amp; edit</u></strong>"<br /><u><strong>Views Field Settings</strong></u><br /> First let's add <strong><u>link field</u></strong> (link must be the first field in order to work everything properly) so click on the <span style="font-size: 16px;"><span style="color: rgb(255, 140, 0);"><strong>add</strong></span></span> icon and from the filter <u><strong>Groups</strong></u> select <u><strong>Content</strong></u><br /> Add Content: <strong><u>Link</u></strong>, Click "<u><strong>Add &amp; configure button</strong></u>" in the next cofiguration window uncheck <strong><u>"Create a label</u></strong>". "<strong><u>Check</u></strong>" <strong><u>Exclude from display</u></strong>.<br /> Click "<strong><u>Apply button</u></strong>"</p> <p>Next let's add image field, so click on the <span style="font-size: 16px;"><span style="color: rgb(255, 140, 0);"><strong>add</strong></span></span> icon and from the filter <u><strong>Groups</strong></u> select <u><strong>content</strong></u></p> <p><u><strong><img alt="Content Filter" src="/sites/default/files/images/Screen-Shot-2013-04-09-at-5_20_24-PM.png" style="width: 700px; height: 285px;" /></strong></u><br /> Add Content: <strong><u>image field</u></strong> (<strong><u>Note:</u></strong> <em>make sure you choose the image field which we crerated for this slider content type only</em>.)<br /> Click "<u><strong>Add &amp; configure button</strong></u>" in the next cofiguration window uncheck <strong><u>"Create a label</u></strong>".</p> <p><strong>Formatter</strong>: Image (if you have installed Colorbox or lightbox you can choose them here!)<br /><strong>Image Style</strong>: Fullsize (Choose the imagecache you have created in the above step)<br /><strong>Link image to</strong>: Nothing<br /><strong>Style Settings</strong>: Leave default settings<br /><strong>No result behaviour</strong>: Leave default settings<br /><strong>Rewrite Results</strong>: Check Output this field as a link<br /><strong>Link path: </strong>[view_node] (Note:Scroll dow a bit and you can see <strong><u>replacement patterns</u></strong> created by <strong><u>Core Token</u></strong> module, (if we didn't set the link field as first we can't see link field option here) copy only <span style="font-size: 16px;"><span style="color: rgb(255, 140, 0);">[view_node]</span></span> then scroll up and paste it in the <u><strong>link path field</strong></u>.)<br /> Click "<strong><u>Apply button</u></strong>"</p> <p>Finally we need one more field for the <u><strong>thumbnail</strong></u>, so let's click on the <span style="font-size: 16px;"><span style="color: rgb(255, 140, 0);"><strong>add</strong></span></span> icon and from the filter <u><strong>Groups</strong></u> select <u><strong>Content</strong></u><br /> Add Content: <strong><u>image field</u></strong> (<strong><u>Note:</u></strong> <em>make sure you choose the image field which we crerated for this slider content type only</em>.)<br /> Click "<u><strong>Add &amp; configure button</strong></u>" in the next cofiguration window uncheck <strong><u>"Create a label</u></strong>" and <span style="color: rgb(255, 140, 0);"><strong><u>CHECK EXCLUDE FROM DISPLAY</u></strong></span>,<br /><strong>Formatter</strong>: Image (if you have installed Colorbox or lightbox you can choose them here!)<br /><strong>Image Style</strong>: Thumbnail (Choose the imagecache you have created in the above step)<br /><strong>Link image to</strong>: Nothing<br /><strong>Style Settings</strong>: Leave default settings<br /><strong>No result behaviour</strong>: Leave default settings<br /><strong>Rewrite Results</strong>: Check Output this field as a link<br /><strong>Link path: </strong>[view_node] (Note:Scroll dow a bit and you can see <strong><u>replacement patterns</u></strong> created by <strong><u>Core Token</u></strong> module, (if we didn't set the link field as first we can't see link field option here) copy only <span style="font-size: 16px;"><span style="color: rgb(255, 140, 0);">[view_node]</span></span> then scroll up and paste it in the <u><strong>link path field</strong></u>.)<br /> Click "<strong><u>Apply button</u></strong>"</p> <p><u><strong>Views Filters Settings</strong></u></p> <p><span style="text-decoration: underline;"><span style="font-weight: bold;">In views3 the filters are created in the beginning while we choose the content type and other settings! If you need any additional filetering you can create it here!</span></span></p> <p><u><strong>Views Style Settings</strong></u></p> <p>Click on the <strong><span style="text-decoration: underline;">Format</span></strong> Slideshow | settigs and on the next configuratioin window set as below;<br />   (1) <strong>List type</strong>: Unordered list<br />   (2) <strong>Wrapper class</strong>: Leave default settings<br />   (3) <strong>Style&gt; Skin</strong>: deafult<br />   (4) <strong>Slides&gt; Slideshow type</strong>: cycle<br />   (5)<strong><em><u> Cycle options</u></em></strong><br /><span style="color: rgb(255, 0, 0);">You need to download jQuery cycle plugin and copy jquery.cycle.all.min.js to sites/all/libraries/jquery.cycle You can find the plugin at</span> <a href="http://malsup.com/jquery/cycle" target="_blank">http://malsup.com/jquery/cycle</a>.</p> <p><u><strong>IN SIMPLE ENGLISH</strong></u><br /> Create a folder named "<strong>libraries</strong>" in the <strong>site/all</strong> directory and then create an another folder named "<strong>jquery.cycle</strong>" in that directory and finally copy and paste only the "<strong>jquery.cycle.all.min.js</strong>" into this directory.</p> <p>   (6) <strong>Transittion</strong>: Fade<br />   (7) <strong>Action</strong>: pause on hover<br />   (8)<strong> Internet Explorer Tweaks</strong>: default<br />   (9) <strong>Widgets</strong>: You can choose either or both Top and Bottom (I choose bottom here, and the advance settings as below;)<br />   (10) <strong>Bottom Widgets&gt;Pager&gt;Pager type</strong>: Fields<br />   (11) <strong>Pager field</strong>: Content: Image (<strong><u>Note:</u></strong> <u>last one we added for the thumb</u>, don't mistake since both field will be named same.)<br />   (12) <strong>Activate Slide and Pause on Pager Hove</strong>: checked, controls and slider counter leave unchecked.<br />   (13) Click <strong><span style="text-decoration: underline;">Apply</span></strong> button.</p> <p><u><strong>Format Show Field Settings</strong></u></p> <ol><li> <strong><u>Inline fields: </u></strong><span style="color: rgb(255, 140, 0);"><u>Choose the thumbnail field as<strong> inline.</strong> </u></span></li> <li> Click <strong><span style="text-decoration: underline;">Apply</span></strong> button. (<u><strong>Note:</strong></u> Well it actually doesn't change much in appearance but it does change in the code. Next step use the firebug and find the class and add some styles to display properly.)</li> </ol><h2> <strong>(8) Create a Custom Region </strong>(optional step)</h2> <p>(1) On your thems folder open the <strong><u>your_theme_name.info</u></strong> file and add a new region like this shown below;<br /><span style="color: rgb(255, 140, 0);">regions[featured_slider] = Featured Slider</span> and save the .info file.<br /> (2) Open your themes <strong><u>page.tpl.php</u></strong> file and add these code where you want your slide to be displayed as shown below;</p> <p><span style="color: rgb(255, 140, 0);">  &lt;?php if ($page['featured_slider']): ?&gt;<br />     &lt;div id="featured-slider"&gt;<br />       &lt;?php print render($page['featured_slider']); ?&gt;<br />     &lt;/div&gt; &lt;!-- End Featured Slider--&gt;<br />   &lt;?php endif; ?&gt;</span></p> <p>You can even create custom front page template like <strong>page--front.tpl.php</strong> so that you do't need to make any changes to the default page.tpl.php template.</p> <h2> <strong><strong>[9] Enable &amp; configure the Block</strong></strong></h2> <p>Now this block will be visible in the blocks disabled area, so from the Dashboard menu go to <strong><u>Structure&gt;Block</u></strong> and enable the block to a themes default region  or the custom region we created (featured_slider). (Regions varies depends on the theme you are using.)</p> <p><u><strong>Block Configuration Settings</strong></u><br /> After enabling the block you get a link to configure the block so click on the <strong><u>Configure</u></strong> link and on the settings section set as below;</p> <p>  (1) Block title (if you don't want blobk title to be displayed just type <span style="color: rgb(255, 140, 0);">&lt;none&gt;</span>)<br />   (2) Again you get all enabled theme specific <strong><u>Region settings.</u></strong><br />  <u><strong> On visibility setings</strong></u><br />   (3) Pages&gt;Show block on specific page: choose <span style="color: rgb(255, 140, 0);">Only the listed pages</span> and type <span style="color: rgb(255, 140, 0);"><u><strong>&lt;front&gt;</strong></u></span> so that this block will be displayed only on the front page.</p> <h2> CSS TIPS TO DISPLAY THUMBNAILS INLINE</h2> <p>Add these CSS codes to your themes style sheet to display the thumbnails inline.<br /> .views-slideshow-controls-bottom .views-slideshow-pager-field-item { float: left; margin: 20px 6px; } Make necessary adjustments.</p> <p>That's all now we have successfully created our new Views Slideshow on Drupal7. I hope yo could understand the tutorial I tried my best to explain as much as I can, if you still have doubt's comment below and I will try my best to help. The scren cast of this tutorial will be coming soon.</p> <p>Play around and find the best you can in Drupal7, Best wishes.</p> </div></div></div><div class="field field-name-field-tags field-type-taxonomy-term-reference field-label-above"><div class="field-label">Tags:&nbsp;</div><div class="field-items"><div class="field-item even" rel="dc:subject"><a href="/tags/drupal7" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Drupal7</a></div><div class="field-item odd" rel="dc:subject"><a href="/tags/drupal" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Drupal</a></div><div class="field-item even" rel="dc:subject"><a href="/tags/views-slideshow" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Views Slideshow</a></div><div class="field-item odd" rel="dc:subject"><a href="/tags/views3" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">views3</a></div></div></div><div class="easy_social_box clearfix vertical easy_social_lang_en"> <div class="easy_social-widget easy_social-widget-twitter first"><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://ibright.org/ how-to-install-views-slideshow-module-on-drupal7" data-count="vertical" data-lang = "en" data-via="" data-related=":Check it out!" data-text="HOW TO INSTALL & SETUP VIEWS SLIDESHOW MODULE ON DRUPAL7?">Tweet</a></div> <div class="easy_social-widget easy_social-widget-facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&amp;href=http%3A//ibright.org/ how-to-install-views-slideshow-module-on-drupal7&amp;send=false&amp;layout=box_count&amp;width=48&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=&amp;height=90&amp;appId=" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:48px; height:90px;" allowTransparency="true"></iframe></div> <div class="easy_social-widget easy_social-widget-googleplus"><div class="g-plusone" data-size="tall" data-annotation="bubble" data-href="http://ibright.org/ how-to-install-views-slideshow-module-on-drupal7"></div></div> <div class="easy_social-widget easy_social-widget-linkedin last"><script type="in/share" data-url="http://ibright.org/ how-to-install-views-slideshow-module-on-drupal7" data-counter="top"></script></div> </div> <!-- /.easy_social_box --> Mon, 16 May 2011 04:40:18 +0000 ciril 13 at http://ibright.org/s__www MULTI-PAGE FORM USING DRUPAL WEBFORM MODULE http://ibright.org/ multipage-form-using-drupal-webform-module <div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p><img alt="New webform" src="/sites/default/files/images/NewWebform copy.png" style="width: 565px; height: 316px; border: medium none;" /></p> <p>Hi Friends, Sorry for not writing many tutorials I am very busy with my new Job.</p> <p>However I will find few hours every saturday and Sunday to write some tutorial to help you all new Drupalers to know the power of Drupal.</p> <p>Today I gonna show you how to create multipage form using Drupal Webform module. You can use this method for creating a questionair, product registration, user registration or anything you want as a webform. OK let's get started.</p> <h2> [1] System Requirements</h2> <ul><li> <a href="http://drupal.org/">Drupal 6.19 or the latest one.</a></li> <li> <a href="http://drupal.org/project/cck">CCK</a></li> <li> <a href="http://drupal.org/project/webform">Webform</a></li> <li> <a href="http://drupal.org/project/options_element">Options Element</a></li> <li> <a href="http://drupal.org/project/select_or_other">Select or Other</a></li> <li> <a href="http://drupal.org/project/date">Date Popup (part of </a><a href="http://drupal.org/project/date">Date</a><a href="http://drupal.org/project/date">)</a></li> <li> <a href="http://drupal.org/project/webform_validation">Webform Validation</a></li> <li> <a href="http://drupal.org/project/mollom">Mollom</a> or <a href="http://drupal.org/project/captcha">CAPTCHA</a><br /><strong><span style="color: rgb(255, 0, 0);">(I strongly recommend you to protect your webform from spam bots)</span></strong></li> </ul><h2> [2] Install and Enable the modules</h2> <p>Install all the modules to your drupal site directory <strong>sites/all/modules</strong>. (<strong>Note:</strong> You have to create the <strong>modules</strong> folder).<br /> After installing the modules login to your site and then go to<strong>/admin/build/modules </strong>and enable the moules.  Now go to <strong>admin/settings/webform</strong><br /> and choose the content type you want to create the <strong>webform</strong>, by default <strong>webform</strong> creates a new content type called <strong>webform</strong> and selected this content type as the dafault <strong>webform</strong> content type.</p> <p>After that you get an option to select or deselect webform components such as date, email etc select everything if it is not selected by default.</p> <p>Below that type in your default email address where you want your form to be send, also from name and form subject. remember this only default you can chnge this option for each form individually. Below that you can see advanced area which I didn't touch because the defult option was fine for me.</p> <p><img alt="Webform-admin-settings" src="/sites/default/files/images/Webform settings.png" style="width: 565px; height: 1162px; border: medium none;" /></p> <h2> [3] Create the webform</h2> <p>Click create new content and create a new webform, now when you see the new webform content type yo will be surprized because it looks just like any other nodes where are the form components???? Don't worry you can see them soon however inorder to see those form components yo have write the node title and if you want body field too and click save. After saving the node you can see two new button called <strong>webform</strong> and <strong>results</strong> have been added next to the <strong>edit</strong> button. Click on the <strong>webform</strong> button and now you can see the webform components and other configuration settings.</p> <p><img alt="webform-buttons" src="/sites/default/files/images/wewbform-button.png" style="width: 565px; height: 142px; border: medium none;" /></p> <p>First let's add our form components I am creating creating this as just sample you can create however you like.</p> <p>1) I add a new <strong>Fieldset</strong> from the select option called <span style="font-weight: bold;">Personal Information</span></p> <p>2) Next I create <strong>textfield</strong> for <strong>Fullname</strong></p> <p>3) Next I create <strong>E-mail</strong> for <strong>E-mail</strong></p> <p>4) Next I create a <strong>Date</strong> field for <strong>Birthday</strong></p> <p>5) Next I create Page break field called page break</p> <p>6) Next again I create a new <strong>Fieldset</strong> from the select option called <strong>Questionair</strong></p> <p>7) Next I create a <span style="font-weight: bold;">S</span><strong>elect</strong> field for a question what's your favourite software?</p> <p>and then I set this field as <strong>mandatory</strong> and on the configuration window I deselect the <strong>listbox</strong> so that I can get the options as <strong>radio buttons</strong>.</p> <p><span style="color: rgb(255, 140, 0);"><strong>Please look at the sreen shot to learn how to write the select options</strong></span></p> <p><span style="color: rgb(255, 140, 0);"><strong><img alt="Edit Components" src="/sites/default/files/images/Edit component.png" style="width: 565px; height: 249px; border: medium none;" /></strong></span></p> <p><img alt="Webform-Components" src="/sites/default/files/images/webform-components.png" style="width: 565px; height: 517px; border: medium none;" /></p> <p>I have created many fields like this and then I click on the <strong>Form settings</strong> button and here you can set a <strong>confirmation message</strong> or <strong>redirect</strong> to a particular URL after the form submission, and then below you can set the form sumission limit per user and finally you can set the <strong>access permission</strong> and optionally if you want you can set the <strong>Advanced settings</strong> too and click <span style="font-weight: bold;">S</span><strong>ave configuration</strong> button.</p> <p><img alt="Webform-settings" src="/sites/default/files/images/webformsettings.png" style="width: 565px; height: 1139px; border: medium none;" /></p> <p>Next click on the <strong>Email</strong> button and add the email address you want the form data to be send.</p> <p>Next go to <strong>admin/build/themes</strong> and click on <strong>Configure</strong> button and at the right side column disable the <strong>Display post information on </strong>for <strong>Webform </strong>Content type so that users don't see the <strong>author information</strong> on the <strong>webform</strong> page. (You can do same for other content type for hiding the author info from users). and click the <strong>Save configuration</strong> button.</p> <p><img alt="webform-global-settings" src="/sites/default/files/images/global-theme-settings.png" style="width: 565px; height: 607px; border: medium none;" /></p> <p>Next go to <strong>admin/content/types </strong>and click on <strong>edit</strong> button of the <strong>Webform</strong> content type and on comment settings <strong>disable the commen</strong>t option so that users won't see a comment box below the <strong>webform</strong>. (<strong>Note: if you are disabling the comment settings after creating the webform you have to disable the comment settings from the existing webforms node too.</strong>)</p> <p><img alt="New webfrom" src="/sites/default/files/images/NewWebform copy.png" style="width: 565px; height: 316px; border: medium none;" /></p> <p><img alt="Webform-next-page" src="/sites/default/files/images/nextpage.png" style="width: 565px; height: 410px; border: medium none;" /></p> <p>Due to my busy shedule I havn't re-cheked this document throughly, if you find anything strange or anything not understanding please comment below so that I can fix the problems and help to give you a better solution.</p> <p>Have a great Drupal development.</p> </div></div></div><div class="field field-name-field-tags field-type-taxonomy-term-reference field-label-above"><div class="field-label">Tags:&nbsp;</div><div class="field-items"><div class="field-item even" rel="dc:subject"><a href="/tags/drupal6" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Drupal6</a></div><div class="field-item odd" rel="dc:subject"><a href="/tags/drupal" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Drupal</a></div><div class="field-item even" rel="dc:subject"><a href="/tags/webform" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Webform</a></div></div></div><div class="easy_social_box clearfix vertical easy_social_lang_en"> <div class="easy_social-widget easy_social-widget-twitter first"><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://ibright.org/ multipage-form-using-drupal-webform-module" data-count="vertical" data-lang = "en" data-via="" data-related=":Check it out!" data-text="MULTI-PAGE FORM USING DRUPAL WEBFORM MODULE">Tweet</a></div> <div class="easy_social-widget easy_social-widget-facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&amp;href=http%3A//ibright.org/ multipage-form-using-drupal-webform-module&amp;send=false&amp;layout=box_count&amp;width=48&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=&amp;height=90&amp;appId=" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:48px; height:90px;" allowTransparency="true"></iframe></div> <div class="easy_social-widget easy_social-widget-googleplus"><div class="g-plusone" data-size="tall" data-annotation="bubble" data-href="http://ibright.org/ multipage-form-using-drupal-webform-module"></div></div> <div class="easy_social-widget easy_social-widget-linkedin last"><script type="in/share" data-url="http://ibright.org/ multipage-form-using-drupal-webform-module" data-counter="top"></script></div> </div> <!-- /.easy_social_box --> Sat, 13 Nov 2010 05:20:51 +0000 ciril 12 at http://ibright.org/s__www HOW TO IMPROVE YOUR DRUPAL SITE PERFORMANCE? http://ibright.org/ how-to-improve-drupal-performance <div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p><img alt="website Optimization" src="/sites/default/files/images/optimize.png" style="width: 611px; height: 195px;" /></p> <p>Some of you may have aldready known this but some have not, such as new drupalers.</p> <p>Anyway lets's start talking about site performance. Have you ever checked your drupal site's source page? If not check it right now....<br />  <strong>Right Click on the web site</strong> and choose <strong>view page source</strong>.</p> <p>Don't be shocked by the number of external styles and script files in the headr tag, it's common in every drupal site, but you may have noticed that whenever you add a new module the scripts and styles are keep increasing, that's not good for our site and bandwidth, especially it will affect your SEO because google penalize slow site. Don't worry Drupal gives us an option to solve this issue. Go to <strong>Administer&gt;Site configuration&gt;Performance</strong> and configure it as below;</p> <p><strong>[1] Caching Mode: Normal</strong></p> <p><strong>[2] Minimum Cache Lifeime: none (Set it depends on your site traffic and content upadtes)</strong></p> <p><strong>[3] Page Compression: Enabled </strong></p> <p><strong>[4] Block Cache: Enabled</strong></p> <p><strong>[5] Optimize CSS files: Enabled</strong></p> <p><strong>[6] Optimize JavaScript Files: Enabled</strong></p> <p>Now you click the <strong>save configuration</strong> button and go to your site's front page and check the source code again...</p> <p>Did you notice a big difference there? all the CSS files are now in one css file and same for the javaScript files too.</p> <p>When you enabled this CSS and JavaScript files it automatically created two files named <strong>CSS</strong> and <strong>JS</strong> in your <strong>sites/all/deafult/files </strong>directory for separately saving the optimized CSS and JavaScript files from the themes folder.</p> <p>If you ever made a changes to your sites styles or any other settings <strong>after enabling the cache</strong> make sure that you <strong>clear the cache</strong> to see the result.</p> <p>By enabling the cache and optimizing the external styles and scripts you have done a big optimizaion to your drupal web site. Hope this small tip could help to improve your sites performance. If you have any questions regarding your sites performance comment below, I will try my best to reply as fast as I can.</p> </div></div></div><div class="field field-name-field-tags field-type-taxonomy-term-reference field-label-above"><div class="field-label">Tags:&nbsp;</div><div class="field-items"><div class="field-item even" rel="dc:subject"><a href="/tags/drupal" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Drupal</a></div><div class="field-item odd" rel="dc:subject"><a href="/tags/drupal6" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Drupal6</a></div><div class="field-item even" rel="dc:subject"><a href="/tags/performance" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Performance</a></div><div class="field-item odd" rel="dc:subject"><a href="/tags/optimizaion" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Optimizaion</a></div></div></div><div class="easy_social_box clearfix vertical easy_social_lang_en"> <div class="easy_social-widget easy_social-widget-twitter first"><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://ibright.org/ how-to-improve-drupal-performance" data-count="vertical" data-lang = "en" data-via="" data-related=":Check it out!" data-text="HOW TO IMPROVE YOUR DRUPAL SITE PERFORMANCE?">Tweet</a></div> <div class="easy_social-widget easy_social-widget-facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&amp;href=http%3A//ibright.org/ how-to-improve-drupal-performance&amp;send=false&amp;layout=box_count&amp;width=48&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=&amp;height=90&amp;appId=" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:48px; height:90px;" allowTransparency="true"></iframe></div> <div class="easy_social-widget easy_social-widget-googleplus"><div class="g-plusone" data-size="tall" data-annotation="bubble" data-href="http://ibright.org/ how-to-improve-drupal-performance"></div></div> <div class="easy_social-widget easy_social-widget-linkedin last"><script type="in/share" data-url="http://ibright.org/ how-to-improve-drupal-performance" data-counter="top"></script></div> </div> <!-- /.easy_social_box --> Fri, 24 Sep 2010 12:09:45 +0000 ciril 11 at http://ibright.org/s__www How to set up Drupal cron job using cPanel http://ibright.org/ how-to-set-up-drupal-cron-job-using-cpanel <div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>This tutorial is to show you how to set up your Drupal site to run the cron successfully.</p> <p>Cron is an important part of Drupal. Cron is used for retrieving syndicated RSS feeds from other sites and syndicate datas from your own site. Cron is also used by many other Drupal modules to handle required background processing.</p> <h2> System Requirements</h2> <ol><li> Latest version of Drupal</li> <li> Server OS: Linux</li> <li> Server: Apache</li> <li> Website Backend: Cpanel</li> </ol><h2> The Cron Script</h2> <p>Drupal comes with two version of the cron script, which we can find in the drupal directory.( /public_html/your-site-name.com/scripts)</p> <p>We are using <strong>cron-lynx.sh</strong> for this tutorial.</p> <ol><li> cron-curl.sh</li> <li> cron-lynx.sh</li> </ol><h2> Edit the script</h2> <p><img alt="cpanel-cron" src="/sites/default/files/images/cron.jpg" style="width: 501px; height: 174px;" /></p> <p>Go to Cpanel and set the permission of <span style="color: rgb(0, 0, 0);"><span style="background-color: rgb(255, 215, 0);"><strong>cron-lynx.sh</strong> to <strong>755</strong></span></span> ( /public_html/your-site-name.com/scripts/cron-lynx.sh). After changing the permission open the <strong>cron-lynx.sh </strong>and you can see the following line already exist in the <strong>cron-lynx.sh</strong></p> <p><strong>#!/bin/sh # $Id: cron-lynx.sh,v 1.3 2006/08/22 07:38:24 dries Exp $ /usr/bin/lynx -source </strong><strong><a href="http://yoursite.com/cron.php">http://yoursite.com/cron.php</a> &gt;</strong><strong> /dev/null 2&gt;&amp;1</strong></p> <p><span style="color: rgb(0, 0, 0);"><span style="background-color: rgb(255, 215, 0);">Change</span></span> <strong><a href="http://yoursite.com/cron.php">http://yoursite.com/cron.php</a> &gt; /dev/null 2&gt;&amp;1</strong> <span style="color: rgb(0, 0, 0);"><span style="background-color: rgb(255, 215, 0);">to</span></span> <strong><a href="http://yoursitename.com/cron.php">http://yoursitename.com/cron.php</a> &gt; /dev/null 2&gt;&amp;1 </strong></p> <h4> Note: You should write your real site name here.</h4> <p>Now copy the path to <strong>cron-lynx.sh</strong> (Which you can find on top left side of editing panel) and save the file after you have finished editing.</p> <h2> Cron Jobs</h2> <p><img alt="cron-tab-command" src="/sites/default/files/images/cronjob.jpg" style="width: 602px; height: 345px;" /></p> <p>On the Cpanel homepage click on the button Cron jobs and create a new cron job by setting the time interval for cron to run.</p> <p>You can set the time interval as often as every minute or every hour and so on.</p> <ol><li> * * * * * (Every minute)</li> <li> */5 * * * * (Every 5 minutes)</li> <li> 0,30 * * * * (Twice an hour)</li> <li> 0 * * * * (Once an hour)</li> <li> 0 0,12 * * * (Twice a day )</li> <li> 0 0 * * * (Once a day)</li> <li> 0 0 * * 0 (Once a week)</li> <li> 0 0 1,15 * * (1st and 15th)</li> <li> 0 0 1 * * (Once a month)</li> <li> 0 0 1 1 * (Once a year)</li> </ol><p>On command copy and paste the ull path to <strong>cron.php</strong> (<strong>/home/sitename/public_html/cron.php</strong>)</p> <p>Command should look like this;</p> <ol><li> <strong>For Primary (main) Domain</strong></li> </ol><p><strong><span style="font-size: 16px;">php /home/sitename/public_html/cron.php</span></strong></p> <p>2.  <strong>For Addon Domain/Sub Domain</strong></p> <p><span style="font-size: 16px;"><strong>php /home/sitename/public_html/sitename.com/cron.php</strong></span></p> <p><span style="font-size: 16px;"><strong>Note: Make sure that you have given a <span style="color: rgb(178, 34, 34);"><span style="background-color: rgb(255, 215, 0);">single space</span></span> after php.</strong></span></p> <p><span style="font-size: 16px;"><strong>1. </strong></span><span style="font-size: 16px;"><strong><span style="background-color: rgb(255, 215, 0);"><span style="color: rgb(0, 0, 0);">php /</span></span>home/sitename/public_html/sitename.com/cron.php [GOOD]</strong></span></p> <p><span style="font-size: 16px;"><strong>2. </strong></span><span style="font-size: 16px;"><strong><span style="background-color: rgb(255, 215, 0);"><span style="color: rgb(0, 0, 0);">php/</span></span>home/sitename/public_html/sitename.com/cron.php [BAD]</strong></span></p> <h2> Verify Cron job</h2> <p>We have to make sure that the crontab is working properly, inorder to check that let's set cron job to run every minute (* * * * *).</p> <p>Now go to your site admin&gt;logs and if you see a message somthing like Cron run completed everything is OK, if not double check the whole process again.</p> <p><img alt="drupal-status-report" src="/sites/default/files/images/drupal-status-report-thumb.jpg" style="width: 400px; height: 400px;" /></p> <p>Now go back and set the time interval rom every minute to every hour or the time interval you want cron to run.</p> <p>I hope you could find this tutorial helpul. If you have anysuggessions or comments please write it below.</p> </div></div></div><div class="field field-name-field-tags field-type-taxonomy-term-reference field-label-above"><div class="field-label">Tags:&nbsp;</div><div class="field-items"><div class="field-item even" rel="dc:subject"><a href="/tags/drupal" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Drupal</a></div><div class="field-item odd" rel="dc:subject"><a href="/tags/cron-job" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Cron Job</a></div></div></div><div class="easy_social_box clearfix vertical easy_social_lang_en"> <div class="easy_social-widget easy_social-widget-twitter first"><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://ibright.org/ how-to-set-up-drupal-cron-job-using-cpanel" data-count="vertical" data-lang = "en" data-via="" data-related=":Check it out!" data-text="How to set up Drupal cron job using cPanel">Tweet</a></div> <div class="easy_social-widget easy_social-widget-facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&amp;href=http%3A//ibright.org/ how-to-set-up-drupal-cron-job-using-cpanel&amp;send=false&amp;layout=box_count&amp;width=48&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=&amp;height=90&amp;appId=" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:48px; height:90px;" allowTransparency="true"></iframe></div> <div class="easy_social-widget easy_social-widget-googleplus"><div class="g-plusone" data-size="tall" data-annotation="bubble" data-href="http://ibright.org/ how-to-set-up-drupal-cron-job-using-cpanel"></div></div> <div class="easy_social-widget easy_social-widget-linkedin last"><script type="in/share" data-url="http://ibright.org/ how-to-set-up-drupal-cron-job-using-cpanel" data-counter="top"></script></div> </div> <!-- /.easy_social_box --> Sun, 09 May 2010 02:42:43 +0000 ciril 5 at http://ibright.org/s__www CKEditor and CKFinder Installation Video http://ibright.org/ ckeditor-and-ckfinder-installation-video <div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p><iframe class="youtube-player" frameborder="0" height="380" src="http://www.youtube.com/embed/2AtwgwUaYJ0" type="text/html" width="620"></iframe></p> </div></div></div><div class="field field-name-field-tags field-type-taxonomy-term-reference field-label-above"><div class="field-label">Tags:&nbsp;</div><div class="field-items"><div class="field-item even" rel="dc:subject"><a href="/tags/ckeditor" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">CKEditor</a></div><div class="field-item odd" rel="dc:subject"><a href="/tags/ckfinder" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">CKFinder</a></div><div class="field-item even" rel="dc:subject"><a href="/tags/drupal" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Drupal</a></div><div class="field-item odd" rel="dc:subject"><a href="/tags/drupal6" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Drupal6</a></div></div></div><div class="easy_social_box clearfix vertical easy_social_lang_en"> <div class="easy_social-widget easy_social-widget-twitter first"><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://ibright.org/ ckeditor-and-ckfinder-installation-video" data-count="vertical" data-lang = "en" data-via="" data-related=":Check it out!" data-text="CKEditor and CKFinder Installation Video">Tweet</a></div> <div class="easy_social-widget easy_social-widget-facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&amp;href=http%3A//ibright.org/ ckeditor-and-ckfinder-installation-video&amp;send=false&amp;layout=box_count&amp;width=48&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=&amp;height=90&amp;appId=" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:48px; height:90px;" allowTransparency="true"></iframe></div> <div class="easy_social-widget easy_social-widget-googleplus"><div class="g-plusone" data-size="tall" data-annotation="bubble" data-href="http://ibright.org/ ckeditor-and-ckfinder-installation-video"></div></div> <div class="easy_social-widget easy_social-widget-linkedin last"><script type="in/share" data-url="http://ibright.org/ ckeditor-and-ckfinder-installation-video" data-counter="top"></script></div> </div> <!-- /.easy_social_box --> Sun, 25 Apr 2010 04:42:27 +0000 ciril 4 at http://ibright.org/s__www How to install CKEditor and CKFinder on Drupal http://ibright.org/ how-to-install-ckeditor-and-ckfinder <div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p class="rtecenter"><img alt="CKEditor and CKFinder" src="/sites/default/files/images/ckeditor.jpg" style="width: 600px; height: 199px;" /></p> <p>Hi Everyone,</p> <p>As we all know there is no built-in rich text editor in default Drupal ike other CMS platforms, so what do we do? Well there is a solution in the form of Modules!!! those are CKEditor and CKFinder.</p> <p>Today I'm going to show you how to setup CKEditor and CKFinder modules successfully.</p> <h2> [1] Download the Modules</h2> <p>First of all let's download all the necessary modules to our Computer. Open your web browser and type the URL <a href="http://drupal.org/project/ckeditor">http://drupal.org/project/ckeditor</a></p> <p>and download the latest version of CKEditor module. Next open an another tab on your web browser and type the URL <a href="http://ckeditor.com/download">http://ckeditor.com/download</a> and download the main files of CKEditor. the last module we need is file browser module so open one more tab on your web browser and type the URL <a href="http://ckfinder.com/download">http://ckfinder.com/download</a> and download the PHP version of CKFinder. OK now we have all the necessary modules.</p> <h2> [2] Install the Modules</h2> <p>Now let's unzip (extract) the first downloaded CKEditor module from <a href="http://drupal.org/project/ckeditor">http://drupal.org/project/ckeditor</a> and then open the unzipped  CKEditor folder<br /> where you can see an another folder named same CKEditor which has only one text file in it (<span style="color: rgb(255, 140, 0);"><strong>CKEditor/CKEditor/COPY_HERE.txt</strong></span>), if you open and read this text file you will understand that this the place where we have to put the CKEditor file which we have downloaded from <a href="http://ckeditor.com/download">http://ckeditor.com/download</a>. So let's unzip the second CKEditor file and open the unzipped file then copy everything within this folder and paste into the CKEditor/CKEditor folder.</p> <p>Now we have one more file to unzip which is CKFinder so let's unzip the CKFinder module and drag and drop or copy and paste to CKEditor folder (<span style="color: rgb(255, 140, 0);"><strong>CKEditor/CKFinder</strong></span>). Now we have unzipped and arranged everything in order. Next we have to change some configurations to work CKFinder properly.</p> <h2> [3] CKFinder Configuration</h2> <p>So let's open config.php (<span style="color: rgb(255, 140, 0);"><strong>CKEditor/CKFinder/config.php</strong></span>) and then comment or delete the line from 21 to 34.</p> <p><span style="color: rgb(0, 153, 204);"><strong>function CheckAuthentication()<br /> {<br />     // WARNING : DO NOT simply return "true". By doing so, you are allowing<br />     // "anyone" to upload and list the files in your server. You must implement<br />     // some kind of session validation here. Even something very simple as...</strong></span></p> <p>     // return isset($_SESSION['IsAuthorized']) &amp;&amp; $_SESSION['IsAuthorized'];</p> <p>     // ... where $_SESSION['IsAuthorized'] is set to "true" as soon as the<br />     // user logs in your system.<br />     // To be able to use session variables don't forget to add session_start().</p> <p>     return false;<br /> }</p> <p><span style="color: rgb(255, 140, 0);">Note: To comment these codes just add /* at the beginning and */ at the end.(same as CSS comment)</span></p> <p>Next in the same config.php file on line 61 (<span style="color: rgb(0, 153, 204);"><strong>$baseUrl = '/ckfinder/userfiles/';</strong></span>)define the path to CKFinder userfiles.</p> <p>Something like this <strong><span style="color: rgb(0, 153, 204);">$baseUrl = '/public_html/yoursitename.com/sites/all/modules/ckeditor/ckfinder/userfiles/';</span></strong></p> <p>Next step is to add this code <span style="color: rgb(0, 153, 204);"><strong>require_once '../../../../includes/filemanager.config.php';</strong></span> below the line 78 (<span style="color: rgb(0, 153, 204);"><strong>$baseDir = resolveUrl($baseUrl);</strong></span>)</p> <p>OK that's all we have to do with CKFinder/config.php. </p> <h2> [4] Settings.php Configuration</h2> <p>The last step is to edit some sttings in settings.php, so go to drupal/sites/default/settings.php and on line 169 (<span style="color: rgb(0, 153, 204);"><strong># $cookie_domain = 'example.com';</strong></span>)</p> <p>un-comment this line by removing # mark and change example.com to your domain name. Like this <span style="color: rgb(0, 153, 204);"><strong>$cookie_domain = 'yourdomainname.com';</strong></span></p> <p><span style="color: rgb(255, 140, 0);">(Note: if you are on local computer add localhost $cookie_domain = 'localhost';)</span>.</p> <p>Now everything is configured and it's time to put the CKditor module to <span style="color: rgb(255, 140, 0);"><strong>drupal/sites/all/modules</strong></span></p> <p><span style="color: rgb(255, 140, 0);">(Note: There is no default directory named modules, you have to create a new folder called modules)</span></p> <p>Let's open our Drupal site and go to <span style="color: rgb(255, 140, 0);"><strong>/admin/build/modules</strong></span> and enable the CKEditor module.</p> <p>Next go to /<strong><span style="color: rgb(255, 140, 0);">admin/user/permissions</span></strong> and set CKEditor access permission to authenticated user and CKFinder file upload permission.</p> <p>Now go to <span style="color: rgb(255, 140, 0);"><strong>/admin/settings/ckeditor</strong></span> and edit the advanced profile and set the file browser as type as CKFinder and save the configurations.</p> <p>Now lets go and create a page or story and you can see instead of default plain text editor we have CKEditor and click on image button and you an see thast now you can browse for images and uploaded images and files to server from the site. Great!!!</p> <p>I hope I could help all those who had problem for setting up CKEditor and CKFinder on Drupal.</p> <p>If anybody got error while doing this please feel free to contact me I love to help you because <strong>I LOVE DRUPAL</strong>.</p> </div></div></div><div class="field field-name-field-tags field-type-taxonomy-term-reference field-label-above"><div class="field-label">Tags:&nbsp;</div><div class="field-items"><div class="field-item even" rel="dc:subject"><a href="/tags/ckeditor" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">CKEditor</a></div><div class="field-item odd" rel="dc:subject"><a href="/tags/ckfinder" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">CKFinder</a></div><div class="field-item even" rel="dc:subject"><a href="/tags/drupal6" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Drupal6</a></div><div class="field-item odd" rel="dc:subject"><a href="/tags/drupal" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Drupal</a></div></div></div><div class="easy_social_box clearfix vertical easy_social_lang_en"> <div class="easy_social-widget easy_social-widget-twitter first"><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://ibright.org/ how-to-install-ckeditor-and-ckfinder" data-count="vertical" data-lang = "en" data-via="" data-related=":Check it out!" data-text="How to install CKEditor and CKFinder on Drupal">Tweet</a></div> <div class="easy_social-widget easy_social-widget-facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&amp;href=http%3A//ibright.org/ how-to-install-ckeditor-and-ckfinder&amp;send=false&amp;layout=box_count&amp;width=48&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=&amp;height=90&amp;appId=" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:48px; height:90px;" allowTransparency="true"></iframe></div> <div class="easy_social-widget easy_social-widget-googleplus"><div class="g-plusone" data-size="tall" data-annotation="bubble" data-href="http://ibright.org/ how-to-install-ckeditor-and-ckfinder"></div></div> <div class="easy_social-widget easy_social-widget-linkedin last"><script type="in/share" data-url="http://ibright.org/ how-to-install-ckeditor-and-ckfinder" data-counter="top"></script></div> </div> <!-- /.easy_social_box --> Wed, 21 Apr 2010 08:23:18 +0000 ciril 3 at http://ibright.org/s__www