iBright Web Design Studio - Views http://ibright.org/ tags/views en HOW TO CREATE A DYNAMIC PORTFOLIO PAGE USING ONLY VIEWS IN DRUPAL7? http://ibright.org/ how-create-dynamic-portfolio-page-using-only-views-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>Today I gonna show you how to link an image field with a link field exists in a same node using views dynamically. Sounds confusing, ok I will give a brief explanation about the situation.</p> <p>Lets say that you have a content type called "Portfolio" which has a "title field", "taxonomy field", "image field", "link field" and a body field which shows all your latest works. Now whenever you add your latest works in the site it only displays as full node view or teaser view. But you want few custom displays like a block with image and title only which links to the full node or the external URL (using custom link field). Can you do that without writing complex codes, YES, YOU CAN! use VIEWS module.</p> <p><a class="colorbox" href="/sites/default/files/images/porfolio-content-type-fields.png" rel="gallery"><img alt="Content type fieds" src="/sites/default/files/images/porfolio-content-type-fields.png" style="width: 690px; height: 489px;" /></a></p> <h3> CREATE VIEWS</h3> <ul style=""><li> Go to /admin/structure/views and create a new view</li> <li> Select your content type (in my case "Portfolio")</li> <li> Uncheck the page display &amp; block display and click the "Continue &amp; edit" button" which will take you to the master display of the views</li> </ul><p><a class="colorbox" href="/sites/default/files/images/create-new-view.png" rel="gallery"><img alt="Create new view" src="/sites/default/files/images/create-new-view.png" style="width: 690px; height: 319px;" /></a></p> <p>At the Master display you can give a title name for the view and format style</p> <p>In the field sections you can see already "title" field is added by the views module so we just need to add "Link field" and "Image Field" only.</p> <p>Now here comes the tricky part first lets add "link field" in the configurations "uncheck the label" so that the label is hidden and select the "Exclude from display" check box, so that the output of the field is hidden</p> <p><a class="colorbox" href="/sites/default/files/images/link-field-views-settings.png" rel="gallery"><img alt="Link field views configuration" src="/sites/default/files/images/link-field-views-settings.png" style="width: 690px; height: 267px;" /></a></p> <p>Next lets add image field and at the configurations section "uncheck the label"  so that the label is hidden and make sure that the image link is set to nothing. Next click "REWRITE RESULTS" and select the check box "output this field as a link.  And in the link path field add the url field we have hidden just before. (if you scroll down little more you can see the replacebale patterns (if you have installed "TOKEN" module just click on the link pattern to enable.) That's it, now our image is linked to the custom URL we have created. <strong>NOTE: MAKE SURE THAT THE LINK FIELD IS ABOVE THE IMAGE FIELD"</strong></p> <p><a class="colorbox" href="/sites/default/files/images/image-field-views-settings.png" rel="gallery"><strong><img alt="Image field views configuration" src="/sites/default/files/images/image-field-views-settings.png" style="width: 690px; height: 618px;" /></strong></a></p> <p><a class="colorbox" href="/sites/default/files/images/portfolio-views-configuration-screen.png" rel="gallery"><img alt="Dynamic portfolio configuration using only drupal views module." src="/sites/default/files/images/portfolio-views-configuration-screen.png" style="width: 690px; height: 348px;" /></a></p> <p>Now we can create a block view or page view.</p> <p><a class="colorbox" href="/sites/default/files/images/page-display.png" rel="gallery"><img alt="Views Page Display" src="/sites/default/files/images/page-display.png" style="width: 700px; height: 400px;" /></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/views" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Views</a></div><div class="field-item odd" rel="dc:subject"><a href="/tags/link-field" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Link Field</a></div><div class="field-item even" rel="dc:subject"><a href="/tags/image-field" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Image Field</a></div><div class="field-item odd" rel="dc:subject"><a href="/tags/drupal7" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Drupal7</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-create-dynamic-portfolio-page-using-only-views-drupal7" data-count="vertical" data-lang = "en" data-via="" data-related=":Check it out!" data-text="HOW TO CREATE A DYNAMIC PORTFOLIO PAGE USING ONLY VIEWS IN 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-create-dynamic-portfolio-page-using-only-views-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-create-dynamic-portfolio-page-using-only-views-drupal7"></div></div> <div class="easy_social-widget easy_social-widget-linkedin last"><script type="in/share" data-url="http://ibright.org/ how-create-dynamic-portfolio-page-using-only-views-drupal7" data-counter="top"></script></div> </div> <!-- /.easy_social_box --> Wed, 23 Jan 2013 08:43:52 +0000 ciril 21 at http://ibright.org/s__www HOW TO CREATE TAXONOMY TERM COUNT BLOCK USING VIEWS AGGREGATION? http://ibright.org/ how-create-taxonomy-term-count-block-using-views-aggregation <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"><div class="video-container"> <iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/w22Utjm-chs?rel=0" width="560"></iframe></div> </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/views" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Views</a></div><div class="field-item even" rel="dc:subject"><a href="/tags/ctools" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">ctools</a></div><div class="field-item odd" rel="dc:subject"><a href="/tags/aggregation" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Aggregation</a></div><div class="field-item even" rel="dc:subject"><a href="/tags/taxonomy" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Taxonomy</a></div><div class="field-item odd" rel="dc:subject"><a href="/tags/tag-count" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Tag Count</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-create-taxonomy-term-count-block-using-views-aggregation" data-count="vertical" data-lang = "en" data-via="" data-related=":Check it out!" data-text="HOW TO CREATE TAXONOMY TERM COUNT BLOCK USING VIEWS AGGREGATION?">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-create-taxonomy-term-count-block-using-views-aggregation&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-create-taxonomy-term-count-block-using-views-aggregation"></div></div> <div class="easy_social-widget easy_social-widget-linkedin last"><script type="in/share" data-url="http://ibright.org/ how-create-taxonomy-term-count-block-using-views-aggregation" data-counter="top"></script></div> </div> <!-- /.easy_social_box --> Fri, 18 Jan 2013 06:17:33 +0000 ciril 20 at http://ibright.org/s__www HOW TO USE VIEWS AGGREGATOR TO CREATE TAXONOMY TERM COUNT BLOCK? http://ibright.org/ how-to-use-views-aggregator-to-create-taxonomy-term-count-block <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/4.png"><a href="http://ibright.org/ sites/default/files/field/image/4.png" title="VIEWS AGGREGATOR" class="colorbox" rel="gallery-node-19-hqzd6Zrirpk"><img typeof="foaf:Image" src="http://ibright.org/ sites/default/files/styles/large/public/field/image/4.png?itok=Y_BWzC3D" width="308" height="237" alt="VIEWS AGGREGATOR" 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 going to show you how to create a taxonomy term count block using views in drupal7. You don't need to have any aditional modules for this other than views and ctools. I write this post becasue I found many people are asking how to setup this and is there any module available? (<a href="http://drupal.org/node/603868#comment-4421144">http://drupal.org/node/603868#comment-4421144</a>) And the answer is simple and just follow the below steps.</p> <h2> Required Modules</h2> <ol><li> <a href="http://drupal.org/project/views" target="_blank">Views3</a></li> <li> <a href="http://drupal.org/project/ctools" target="_blank">ctools</a></li> </ol><h2> Modules Installation</h2> <p>Download all the modules and install in the directory <strong>yoursitename/sites/all/modules</strong>. Next go to admin/modules and enable the Chaos tools, Views &amp; Views UI modules.</p> <h2> Create your Content &amp; Taxonomy Term</h2> <p>Create a vocabulary and add the vocabulary term field to any of your content type such as blog, artice etc.</p> <h2> Create View &amp; Block</h2> <p>Go to /admin/structure/views and create a new Taxonomy term view. (<strong>Note:</strong> Make sure you don't create page or block view from beginning.)</p> <p><a class="colorbox-inline" href="/sites/default/files/images/1.png"><img alt="Taxonomy Term View" src="/sites/default/files/images/1.png" style="width: 690px; height: 282px;" /></a></p> <h3> Views Other</h3> <p>Enbale Views <strong>aggregation to Yes</strong></p> <h3> Views Field</h3> <p>Add taxonomy term field and set aggregation as <strong>Gorup results together</strong> next add one more taxonomy term field and this time set the aggregation as <strong>Count</strong> (Note: You can also set prefix "(" and suffix")" for taxonomy term count field. So that it will be looking like this ⇒ <strong><span style="color:#ffa500;">Drupal</span> (6)</strong></p> <h3> Views Field Formatting</h3> <p>Under the views field settigs check the fields you want to show as inline. So that taxonomy term and the count field will be displayed as inline.</p> <p><a class="colorbox-inline" href="/sites/default/files/images/3.png"><img alt="Field Row Style -Inline" src="/sites/default/files/images/3.png" style="width: 690px; height: 388px;" /></a></p> <h3> View Pager</h3> <p>Set the pager to Display specified items and add the number of terms ou want to show (I set it as 5 terms)</p> <h3> Views Sorting</h3> <p>Next let's sort the list of the term by most used. So add a <strong>Taxonomy term name</strong> sort field and sort it as <strong>descending</strong> now set the Aggrergation as <strong>count</strong> now you see the top 5 most used taxonomy term in the preview area.</p> <h3> Create Block View</h3> <p>Now just add a new block view and go to /admin/structure/block and enable the block we just creted using views!</p> <p><strong>See the views setings screen shot for refernce.</strong></p> <p><a class="colorbox-inline" href="/sites/default/files/images/2.png"><img alt="Taxonomy Count Block - Views Aggregation settings" src="/sites/default/files/images/2.png" style="width: 690px; height: 537px;" /></a></p> <p>That is the end of this tutorial. Please feel free to ask me if you have any quesetions, doubts or having any difficult to setup.</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/views" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Views</a></div><div class="field-item odd" rel="dc:subject"><a href="/tags/taxonomy" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Taxonomy</a></div><div class="field-item even" rel="dc:subject"><a href="/tags/aggregator" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Aggregator</a></div><div class="field-item odd" rel="dc:subject"><a href="/tags/drupal7" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Drupal7</a></div><div class="field-item even" rel="dc:subject"><a href="/tags/count" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Count</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-use-views-aggregator-to-create-taxonomy-term-count-block" data-count="vertical" data-lang = "en" data-via="" data-related=":Check it out!" data-text="HOW TO USE VIEWS AGGREGATOR TO CREATE TAXONOMY TERM COUNT BLOCK?">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-use-views-aggregator-to-create-taxonomy-term-count-block&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-use-views-aggregator-to-create-taxonomy-term-count-block"></div></div> <div class="easy_social-widget easy_social-widget-linkedin last"><script type="in/share" data-url="http://ibright.org/ how-to-use-views-aggregator-to-create-taxonomy-term-count-block" data-counter="top"></script></div> </div> <!-- /.easy_social_box --> Fri, 04 Jan 2013 08:13:21 +0000 ciril 19 at http://ibright.org/s__www HOW TO INSTALL & SETUP VIEWS NIVO SLIDER ON DRUPAL7 http://ibright.org/ how-install-setup-views-nivo-slider-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"><div class="video-container"> <iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/ITor-ptI9aA?rel=0" width="560"></iframe></div> </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/views-nivo-slider" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Views Nivo Slider</a></div><div class="field-item odd" rel="dc:subject"><a href="/tags/views" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Views</a></div><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/image-slider" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Image Slider</a></div><div class="field-item even" rel="dc:subject"><a href="/tags/nivo-slider" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Nivo Slider</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-install-setup-views-nivo-slider-drupal7" data-count="vertical" data-lang = "en" data-via="" data-related=":Check it out!" data-text="HOW TO INSTALL & SETUP VIEWS NIVO SLIDER 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-install-setup-views-nivo-slider-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-install-setup-views-nivo-slider-drupal7"></div></div> <div class="easy_social-widget easy_social-widget-linkedin last"><script type="in/share" data-url="http://ibright.org/ how-install-setup-views-nivo-slider-drupal7" data-counter="top"></script></div> </div> <!-- /.easy_social_box --> Sun, 20 May 2012 02:05:09 +0000 ciril 18 at http://ibright.org/s__www HOW TO INSTALL & SETUP VIEWS SLIDESHOW MODULE ON DRUPAL7 (Sreencast) http://ibright.org/ how-to-install-and-setup-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"><div class="video-container"> <iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/8B6TcaedMzk?rel=0" width="560"></iframe></div> </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/views-slideshow" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Views Slideshow</a></div><div class="field-item even" rel="dc:subject"><a href="/tags/views" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Views</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-and-setup-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 (Sreencast)">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-and-setup-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-and-setup-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-and-setup-views-slideshow-module-on-drupal7" data-counter="top"></script></div> </div> <!-- /.easy_social_box --> Sat, 21 May 2011 05:38:24 +0000 ciril 15 at http://ibright.org/s__www LATEST NEWS BLOCK BY DRUPAL VIEWS, CCK AND QUICK TABS http://ibright.org/ content/latest-news-block-drupal-views-cck-and-quick-tabs <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 shows you how to create a latest news block as tabs and a latest news page by using Drupal Views, CCK and Quick tabs modules. Drupal quick tabs module can be used to create any type of content as tabs.</p> <p><iframe class="youtube-player" frameborder="0" height="380" src="http://www.youtube.com/embed/KjJn4bvsCIs" type="text/html" width="620"></iframe></p> <p>Watch Part One here <a href="http://www.youtube.com/watch?v=KjJn4bvsCIs">http://www.youtube.com/watch?v=KjJn4bvsCIs</a></p> <p><iframe class="youtube-player" frameborder="0" height="380" src="http://www.youtube.com/embed/xoJbPiJcgvY" type="text/html" width="620"></iframe></p> <p>Watch Part Two here <a href="http://www.youtube.com/watch?v=xoJbPiJcgvY&amp;feature=related">http://www.youtube.com/watch?v=xoJbPiJcgvY&amp;feature=related</a></p> <p><iframe class="youtube-player" frameborder="0" height="380" src="http://www.youtube.com/embed/8IYdNJ5heJY" type="text/html" width="620"></iframe></p> <p>Watch Part Three here <a href="http://www.youtube.com/watch?v=8IYdNJ5heJY&amp;feature=related">http://www.youtube.com/watch?v=8IYdNJ5heJY&amp;feature=related</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/drupal6" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Drupal6</a></div><div class="field-item odd" rel="dc:subject"><a href="/tags/views" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Views</a></div><div class="field-item even" rel="dc:subject"><a href="/tags/quick-tabs" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Quick Tabs</a></div><div class="field-item odd" rel="dc:subject"><a href="/tags/cck" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">CCK</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/ content/latest-news-block-drupal-views-cck-and-quick-tabs" data-count="vertical" data-lang = "en" data-via="" data-related=":Check it out!" data-text="LATEST NEWS BLOCK BY DRUPAL VIEWS, CCK AND QUICK TABS">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/ content/latest-news-block-drupal-views-cck-and-quick-tabs&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/ content/latest-news-block-drupal-views-cck-and-quick-tabs"></div></div> <div class="easy_social-widget easy_social-widget-linkedin last"><script type="in/share" data-url="http://ibright.org/ content/latest-news-block-drupal-views-cck-and-quick-tabs" data-counter="top"></script></div> </div> <!-- /.easy_social_box --> Tue, 21 Sep 2010 06:48:21 +0000 ciril 10 at http://ibright.org/s__www How to install and set-up Nivo Slider on Drupal http://ibright.org/ how-to-install-and-set-up-nivo-slider-on-drupal <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 is tutorial based on the <strong>Views Nivo Slider. </strong>I gave the credit to <a href="http://drupal.org/user/397884" title="View user&lt;br /&gt;&#10;profile.">mcdazz</a> who helped me to setup views. Nivo Slider is the Most Awesome jQuery Image Slider out integrated with Views and Imagecache modules.</p> <h2> <strong>(1) System Requirements (Drupal6 Modules)</strong></h2> <ol><li> <a href="http://drupal.org/project/cck"><strong>CCK (Content Construction Kit)</strong></a></li> <li> <a href="http://drupal.org/project/views"><strong>Views</strong></a></li> <li> <a href="http://drupal.org/project/views_nivo_slider"><strong>Views Nivo Slider</strong></a></li> <li> <a href="http://drupal.org/project/jquery_update"><strong>jQuery Update</strong></a></li> <li> <a href="http://drupal.org/project/imagecache"><strong>Image Cache</strong></a></li> <li> <a href="http://drupal.org/project/imageapi/"><strong>Image API</strong></a></li> <li> <a href="http://drupal.org/project/imagefield"><strong>Image Field</strong></a></li> <li> <a href="http://drupal.org/project/filefield"><strong>File Field</strong></a></li> <li> <a href="http://drupal.org/project/link"><strong>Link Field</strong></a></li> <li> <strong><a href="http://drupal.org/project/token"><strong>Token (optional)</strong></a></strong></li> </ol><h2> <strong>(2) Modules Installation</strong></h2> <p>Download all the modules from <a href="http://drupal.org/project/Modules">Drupal Modules</a> and install in the directory <strong>yoursitename/sites/all/modules</strong>.</p> <p>Go to administer&gt;site building&gt;modules and enable the modules listed below.</p> <p>       <strong>1) On CCK module enable:-</strong>Content, Content Copy, Content Permissions, Field Group, File Filed, File Field Meta, Image Field, Image Field Extended Fields, Link, Node Reference, Number, Option Widgets, Text and user Reference.</p> <p><img alt="CCK" src="/sites/default/files/images/cck.png" style="width: 600px; height: 494px; border: medium none;" /></p> <p>      <strong>2) On Image Cache module enable:-</strong>Image API, Image API GD2, Image API Image Magic, Image Cache and Image Cache UI.</p> <p><img alt="Image Cache" src="/sites/default/files/images/image-api.png" style="width: 600px; height: 206px; border: medium none;" /></p> <p>      <strong>3) On User Interface enable:- </strong>jQuery Update.</p> <p><img alt="Jquery Update" src="/sites/default/files/images/jquery-update.png" style="width: 600px; height: 90px; border: medium none;" /></p> <p>      <strong>4) On Views Module enable:-</strong> Views, Views Exporter, Views Nivo Slider and Views UI.</p> <p><img alt="Drupal Views" src="/sites/default/files/images/views.png" style="width: 600px; height: 185px; border: medium none;" /></p> <p>      <strong>4) On Token Module enable:-</strong> Token (This step is optional but it helps a lot in many situations.)</p> <h2> <strong>(3) New Content Type</strong></h2> <p>Now lets create a new content type. <strong>administer&gt;Content management&gt;Content types</strong>.(You can give any name and can create as many content types as you want).</p> <p><img alt="Drupal Content Types" src="/sites/default/files/images/Content types.png" style="width: 600px; height: 266px; border: medium none;" /></p> <p>[1] Create a new content type</p> <p>[2] Give a human-readable name (eg: Featured Slider)</p> <p>[3] Give a machiene-readable name (eg: featured_slider)</p> <p>[4] A brief description of this content type. (eg: Home Page Slider)</p> <p>[5] Save Content Type (Note: If you want you can setup additional Settings here.</p> <p><img alt="Featured Slider Content Type" src="/sites/default/files/images/Featured Slider.png" style="width: 600px; height: 461px; border: medium none;" /></p> <p>Now we have created a new content type name (Featured Slider) next let's add some fields to our new content.</p> <h2> <strong>(4) Field Settings</strong></h2> <p>Click on manage Field and add new field as shown below</p> <p><img alt="Add fields" src="/sites/default/files/images/addfields.png" style="width: 600px; height: 291px; border: medium none;" /><br /> [1] <u><strong>Image Field</strong></u><br /> New Field&gt; Label: Image, Field Name: field_image, Type of data to store: File, Form element to edit the data: Image.<br /> [2] <u><strong>Link Field</strong></u><br /> New Field&gt; Label: Link, Field Name: field_link, Type of data to store: Link, Form element to edit the data: Link.</p> <p><img alt="Add cck fields" src="/sites/default/files/images/addfield.png" style="width: 600px; height: 152px; border: medium none;" /></p> <h2> <strong>(5) Image Cache Preset Settings</strong></h2> <p>Now let's go and create two image presets. <strong>Administer&gt;Site building&gt;ImageCache.</strong></p> <p><strong><img alt="Drupal Image Cache" src="/sites/default/files/images/admin-image-cache.png" style="width: 600px; height: 256px; border: medium none;" /></strong></p> <p>[1] Preset Namespace: Give a machiene readable name (eg: original-image)</p> <p>[2] Preset Namespace: Give a machiene readable name (eg: thumb-images)</p> <p><img alt="Image Cache" src="/sites/default/files/images/ImageCache.png" style="width: 600px; height: 119px; border: medium none;" /><br /><strong>Note: You can resize the image size settings for original and thumb images.</strong></p> <p> </p> <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.</p> <h2> <strong>(7) View Configurations</strong></h2> <p>Now ler's go and create a new view. <strong>Administe&gt;Site building&gt;Views.</strong></p> <p><strong>If anybody finds it difficult to setup views can dowload this views configuration settings. Copy the data from the text file and go to administer views click import and paste the data on the textarea and click import easy.... <a href="http://ibright.org/ downloads/view.txt.zip"><span style="color: rgb(255, 102, 0);"><span style="font-size: 18px;">DOWNLOAD </span></span></a></strong><strong><a href="../../downloads/view.txt"><span style="color: rgb(255, 102, 0);"><span style="font-size: 18px;">(.txt format)</span></span></a></strong></p> <ol><li> <p><strong>Click Add.</strong><br /><u><strong>View name: featured_slider<br /> View description: Slider Views<br /> View tag: Slider<br /> View type: Node</strong></u><br /> Click <strong><u>Next</u></strong></p> <p><img alt="Create Drupal View" src="../../sites/default/files/images/AddViews.png" style="width: 600px; height: 461px; border: medium none;" /></p> </li> <li> <p>AgainCreate new filed by clicking on "<span style="color: rgb(178, 34, 34);"><span style="background-color: rgb(255, 215, 0);">+</span></span>" button next to <u><strong>Fields</strong></u><br /> From the Groups drop down menu, select <u><strong>Content</strong></u> and then select <strong><u>Content: link</u></strong><br /><strong>click add</strong> then on the next sreen setup as below<br /><strong><u>Exclude from display: Enabled</u></strong><br /><strong><u>Label: None</u></strong><br /><strong><u>Link this field to its node: Disabled<br /> Format: URL, as link</u><br /> Click Update.</strong></p> </li> <li> <p>Create new filed by clicking on "<span style="color: rgb(178, 34, 34);"><span style="background-color: rgb(255, 215, 0);">+</span></span>" button next to <u><strong>Fields</strong></u><br /> From the Groups drop down menu, select <u><strong>Node</strong></u> and then select <strong><u>Node: Title</u><br /> click add </strong>and then on the next screen just delete "<u><strong>Title</strong></u>" from the <strong>Label</strong> section.<br /><strong><u>Link this field to its node: Enabled</u> <span style="color: rgb(255, 140, 0);">(</span></strong><span style="color: rgb(255, 140, 0);"><strong>only if you want title as a link to it's node.</strong>)</span><br /><strong><span style="font-size: 16px;">OR</span></strong><br /><strong>If you want the image to be linked with the link field you specified then do as below;<br /> Click on the title field and on the title field settings;<br /><u>Out put this field as link: Enabled</u> </strong><strong>and then on the <u>link path</u> copy and paste the link field pattern generated by token below.</strong><br /><strong><u>Link this field to it's node: Disabled</u></strong></p> </li> <li> <p>Again<br /> Create new filed by clicking on "<span style="color: rgb(178, 34, 34);"><span style="background-color: rgb(255, 215, 0);">+</span></span>" button next to <u><strong>Fields</strong></u><br /> From the Groups drop down menu, select <u><strong>Content</strong></u> and then select <strong><u>Image (field_image)</u>.</strong><br /><strong>click add</strong> then on the next sreen setup as below<br /><strong>Label: None<br /> Format: Image</strong><br /><strong><u>Link this field to its node: Enabled</u> <span style="color: rgb(255, 140, 0);">(only if you want the image as a link to it's node)</span><br /><span style="font-size: 16px;">OR</span><br /> If you want the image to be linked with the link field you specified then do as below;<br /> Click on the image field and on the image field settings <span style="color: rgb(255, 140, 0);"><u>check</u></span> <u>out put this field as link</u><br /> and then on the link path copy and paste the link field pattern generated by token below.<br /> make sure the image field is not enabled the Link this field to it's node.</strong></p> </li> </ol><p><span style="color: rgb(255, 140, 0);"><u><strong>(NOTE: If you want to use the Token Patterns for replacing the link, please keep this order in the fields First link field, then title, then image and so on, because if you kep the link field last then it won't show up as a Token pattern for replacing)</strong></u></span></p> <p>Now lets create filters;</p> <ol><li> Click on "<span style="color: rgb(178, 34, 34);"><span style="background-color: rgb(255, 215, 0);">+</span></span>" button next to<strong> <u>Filters</u></strong> <p> From the Groups drop down menu, select <strong>Node</strong>, and then select <u><strong>Node: Published.</strong></u><br /><strong>Click Add. </strong>On next sreen Set the following: <u><strong>Published: Yes</strong></u> and Click <strong>Update.</strong></p> </li> <li> <p>Click on "<span style="color: rgb(178, 34, 34);"><span style="background-color: rgb(255, 215, 0);">+</span></span>" button next to<strong> <u>Filters</u></strong><br /> From the Groups drop down menu, select <u><strong>Node</strong></u>, and then select <strong><u>Node: Type.</u><br /> Click Add.</strong> Set the following:<br /><u><strong>Operator: Is one of<br /> Node type: Featured Slider</strong></u><br /><strong>Click Update.</strong></p> </li> <li> <p>Next we need to set the <strong>Style</strong> (<strong><u>under Basic settings</u></strong>).<br /> Click on Style and on the sreen below choose <u><strong>Views Niv</strong></u><u><strong>o Slider</strong></u><u><strong>.</strong></u><br /> Click on the <strong><u>Unformatted link</u></strong> (next to Style).<br /> Select <strong><u>Views Nivo Slider</u></strong> from the options.<br /><strong>Click Update.</strong><br /> At the next screen, you can configure the various options for Views Nivo Slider. I set it as default.except for the following:<br /><u><strong>Image field Preset: original<br /> ImageCache presets for use in thumbs: thumbs</strong></u><br /><strong>Click Update.</strong></p> </li> <li> <p>Next we need to set the <u><strong>Row style</strong></u> .<br /> Click on the Fields link next to Row style.<br /> Select <u><strong>Views Nivo Slider</strong></u>.<br /> Click <u><strong>Update</strong></u>. Set the following options:<br /><u><strong>Image field: Content: Image (field_image)<br /> Title field: Title<br /> Link field: Content: Link (field_link)</strong></u><br /> Click <strong>Update</strong>. and Click <strong>Save</strong>.</p> </li> <li> <p>Next we need to configure the newly created View to show up as a Block. Select Block from the drop down menu (above the Add display button).<br /> Click <u><strong>Add display</strong></u>. and Click <u><strong>Save</strong></u>.</p> </li> </ol><p><img alt="Drupal Views Configuration" src="/sites/default/files/images/Edit view featured_slider.png" style="width: 600px; height: 464px; margin: 0px; border: medium none;" /></p> <h2> <strong>[8] Finally Enable the Block</strong></h2> <p>Now go to <strong>Administer&gt;Blocks</strong> and you can see a new block has been created by view. Enable the block on to the desired region and create a new featured content. In my case I have created a new region called <strong>featured content</strong>.</p> <p><img alt="featured_slider" src="/sites/default/files/images/featured_slider_block.png" style="width: 572px; height: 39px; margin: 0px; border: medium none;" /></p> <p>Note: If you want this slider to show on a particular page or front page only, just click on the <strong>configure</strong> link next to the block and then scroll down till you see <strong>page specific visibility settings </strong>then select <strong>Show on only the listed pages.</strong> then type <strong>&lt;front&gt;</strong> to display this block only in the front page. If you want to display any othere pages just type in the URL of the page. For details read the help text in the configuration section.</p> <p><img alt="Drupal Page Specific Settings" src="/sites/default/files/images/drupal_page_specific_settings.png" style="width: 600px; height: 292px; border: medium none; margin: 0px;" /></p> <p>You can see a live action on my site. <a href="http://ibright.org/ ">http://ibright.org/ </a>.</p> <p>I hope this tutorial was helpful to you. Please write comments and suggessions below.<br />  </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/nivo-slider" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Nivo Slider</a></div><div class="field-item even" rel="dc:subject"><a href="/tags/views" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Views</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-and-set-up-nivo-slider-on-drupal" data-count="vertical" data-lang = "en" data-via="" data-related=":Check it out!" data-text="How to install and set-up Nivo Slider 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-and-set-up-nivo-slider-on-drupal&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-and-set-up-nivo-slider-on-drupal"></div></div> <div class="easy_social-widget easy_social-widget-linkedin last"><script type="in/share" data-url="http://ibright.org/ how-to-install-and-set-up-nivo-slider-on-drupal" data-counter="top"></script></div> </div> <!-- /.easy_social_box --> Tue, 13 Jul 2010 06:04:48 +0000 ciril 8 at http://ibright.org/s__www