Showing posts with label Views. Show all posts
Showing posts with label Views. Show all posts

Dec 9, 2011

How to get your drupal questions answered in an IRC Channel

Would you like your drupal questions answered by community experts? Then read this post - it'll tell you the best way to get answers.

Firstly, if you really want good answers, learn how to ask good questions. I thought I knew how to ask good tech-related questions until I read this: http://bit.ly/s7o0mw Then I realised that I did know how to ask good questions, and now I knew how to ask much better questions. That's helped me on irc and on support forums. You basically want to ask your question like this:

"I'm trying to achieve [A]. I thought the best way to do this was to [B]. I read the documentation and it said to do [X]. I did it, I expected to see [Y] but actually saw [Z]. What am I doing wrong?"

Out there some drupal genius (like me! lol) reads this question. And immediately knows a few things:

The outcome that you're trying to achieve. Knowing this, we may have a better suggestion instead of [B] and thereby solve your problem.

You're already thinking - because of [B]. Whohoo! We know that you're someone who is thinking how to do something which will achieve your outcome. Tech geniuses would rather answer questions from people who are willing to do their own thinking.

You read documentation - double points. It means you're not asking someone else to do all the hard work. Plus you're learning new stuff. Both good pointers, and you're more likely to get helped.

When you did [X] you've told us what you expected to see when you tried [X]. That means you're thinking. Then you say that instead of [Y] you saw something else - [Z]. Awesome - that's valuable information.

Questions like, "Help, my website is broken!" or "Views isn't working" or "Taxonomy isn't linking properly" will get you ignored almost 100% of the time.

Read the documentation. Yes, RTFM applies - always. There's a reason documentation is written - and if it's out of date, update it yourself!

Maybe someone else has already asked your question. Search drupal.org via google (go to google.com and type "site:drupal.org terms related to your problem"). If nothing shows up, search the internet. If nothing shows up, time to ask your question!

Ask your question in the right channels, those would be the forums on drupal.org or the issue queue for the module you're having a problem with.

Or simply figure out how to join #drupal on IRC (for that you can use http://webchat.freenode.net its simple and easy too use and compatible with any browser, since I'm using it ;) ), you can also choose your preferable channel from here http://drupal.org/irc or http://drupal.org/node/679904.

Remember the BOT named 'Drupalicon' is there for you, if you wanna learn how to interrogate with 'Drupalicon' on IRC read this http://drupal.org/project/bot, if in case you're finding it difficult just type a message in the Drupal channel 'bot?' (without quotes) there will be a reply 'I'M UP! I'M UP!'.

Please don't ask your question in http://groups.drupal.org/india because this is for location-specific activities, and there may be other people on drupal.org who'd also like to know the answer to your question (plus, your question on the drupal forums is searchable, so in a month someone else may have the same problem you're having and also wants to know the solution - be kind and place your question somewhere they can find it!).

If you're going to post a question in the issue queue, first read the Troubleshooting FAQ. If you're having a problem with your Drupal site, you're almost certainly not alone. Your questions may already have been asked and answered many times. Save yourself some time and start with this list of Frequently Asked Questions (FAQs) before you post an issue in the queue.

Don't be a support leech. Play nicely! And learn how to be part of a community, particularly a self-organising one.

Lastly, read this post and follow all of this advice! It will transform you into the kind of person whom other people enjoy helping, and take you one step closer to being Certified to Rock! And if someone does something which violates any of these guidelines, gently point them to this post.

Oct 25, 2011

How to use Views Slideshow in Drupal 7

1. Required Modules (Version: Drupal 7.8)

  1. Views (7.x-3.0-rc1)
  2. Views Slideshow (7.x-3.x-dev)
  3. Chaos tool suite (7.x-1.0-rc1)
  4. Libraries (7.x-1.0)
  5. Link (7.x-1.0)
  6. Token (7.x-1.0-beta6)

2. Install the Modules

In Drupal 7 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 Drupal site and then copy paste into the admin module installation area, it would have been so good if they would have made it something like WordPress a small search feature. Anyway I just gonna download and install it in the old way (I still recommend this old way).
Download all the above listed modules from http://drupal.org/project and install in the directory examplesite.com/sites/all/modules

Go to http://www.examplesite.com/admin/modules and enable these modules as below:

Modules - Drupal
Enable Modules
  1. Views
  2. Views UI
  3. Views Slideshow
  4. Views Slideshow: Cycle
  5. Chaos tools
  6. Libraries
  7. Link
  8. Token

3. Create Image Cache

In Drupal 7 imagecache is part of core module and is named as Image styles. 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 640x480 (pixels) dimension for the full size slider image and 320x240 (pixels) dimension for the thumbnail image. Note: These configurations can be defered depends on your needs.

Fullsize Slider image settings

Go to http://www.examplesite.com/admin/config/media/image-styles and click on the add new style link

  1. Give an Image style name and click on create new style button.
  2. On the next configuration screen select new style you want and then click add button (In this tutorial I choose re-size style).
  3. On the next screen set the width and height and click on the add effect button. (The settings may vary depend on the style you choose). I set width as 640 and height as 480 pixels.
  4. Do this same process for the thumbnail image too. (for the thumbnail image dimension, I set width as 320 and height as 240 pixels.)

4. Create New Content Type

Let's create a new content type, from the dashboard menu bar cick on Structure and then Content types then click on the add new content type link.

  1. Give a human-readable name, I named it as Featured Slider (machine name will be auto generated based on the human readable name)
  2. Give a brief and relevant description
  3. Submission form settings, I leave as the default settings
  4. Publishing options, I checked only published (all other settings unchecked)
  5. Display settings, I have unchecked the authour and date info.
  6. Comment settings, I set hidden (disabled)
  7. Menu settings, I leave as default settings.
  8. Click Save and add fields Button

5. Create New Fields

Here in this example I'll create only two fileds, and they are image field and link field. 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.

  1. Image Field Settings
  2. Label: Slider Image
  3. Field: slider_image
  4. Field type: image
  5. Widget (form element): image
  6. Click Save button, and on the field settings page leave default settings and click on Save field settings button.
  7. On the image field configuration settings page you can configure as you wish.
  • I set this field as required, I added a file director name called slider-image so that this images will be arranged separately from other images.
  • You can set the maximum upload size and resolution here, I have enabled alt and title field and finally click Save settings button.

By using same method create the link field too.

Link Field Settings:

  1. Label: Slider Link
  2. Field: slider_link
  3. Field type: link
  4. Widget (form element): link
  5. Click "Save" button

Note: For the link field configurations leave everything to default settings.

I have re arranged the field like shown below:

  • Title field
  • Image field
  • Link field
  • Body field (you can even remove this field if not necessary)

Manage Display

On the manage display tab you can conigure how the out put of the field to be diplayed, I have set the image label as hidden.

6. Create Feature Slider Content

I have created four featured slider content for this tutorial.

  1. Click on add content link
  2. Create Featured Slider content
  3. Give a proper title name
  4. Upload slider image
  5. Give alt and title field names
  6. Give a link title and url where you want the slider to be linked
  7. Leave all othe settings as default except for the path field if you want you can give an SEO friendly URL alias.
  8. Save the content.

Repeat the steps twice or thrice to create some more featured slider contents for your slide (I have created four contents)

7. Create a New View

Now it's time to create our new Slideshow view. From the Dashboard menu click on the Structure and then click on the Views.

  1. Click add new view link
  2. Give view name, I have named as Featured Slider (machiine name will be auto generated)
  3. Give an apropriate view description
  4. Choose Show Content of type Featured Slider (your content type name).
  5. Uncheck Create a Pge and check Create a block
  6. Type in Block title and choose display format as "Slideshow" of "fields" items per page 5 (you can enter the number of items you want to display)
  7. Click the button "Continue & edit"

Views Field Settings

  • Add "Link" Field
  1. "Link" must be the first field in order to work everything properly, so click on the add icon and from the filter Groups select "Content"
  2. Add Content: "Link" "Appears in: node:featured_slider."
  3. Click: "Add & configure button"
  4. In the next cofiguration window uncheck "Create a label" and check "Exclude from display"
  5. Click "Apply button".
  • Add "Image" Field
  1. Click on the add icon and from the filter Groups select "Content"
  2. Add Content: "Image" "Appears in: node:featured_slider." (Note: Make sure you choose the "Image" field which we created for this slider content type only.)
  3. Click "Add & configure button"
  4. In the next cofiguration window uncheck "Create a label"
  5. Formatter: "Image" (If you have installed "Colorbox" or "Lightbox2" you can choose them here.)
  6. Image Style: "Fullsize" (Choose the imagecache you have created in the above step "3. Create Image Cache")
  7. Link image to: "Nothing"
  8. Style Settings: "Leave default settings"
  9. No result behaviour: "Leave default settings"
  10. Rewrite Results: Check "Output this field as a link"
  11. Link path: [view_node] (Note: Scroll dow a bit and you can see replacement patterns created by Token module, (If we didn't set the link field as first we can't see link field option here) copy only [view_node] then scroll up and paste it in the link path field.)
  12. Click "Apply button".
  • Add "Thumbnail" Field
  1. Click on the add icon and from the filter Groups select "Content"
  2. Add Content: "Image" "Appears in: node:featured_slider." (Note: Make sure you choose the "Image" field which we created for this slider content type only.)
  3. Click "Add & configure button"
  4. In the next cofiguration window uncheck "Create a label" and check "Exclude from display"
  5. Formatter: "Image" (If you have installed "Colorbox" or "Lightbox2" you can choose them here.)
  6. Image Style: "Thumbnail" (Choose the imagecache you have created in the above step "3. Create Image Cache")
  7. Link image to: "Nothing"
  8. Style Settings: "Leave default settings"
  9. No result behaviour: "Leave default settings"
  10. Rewrite Results: Check "Output this field as a link"
  11. Link path: [view_node] (Note: Scroll dow a bit and you can see replacement patterns created by Token module, (If we didn't set the link field as first we can't see link field option here) copy only [view_node] then scroll up and paste it in the link path field.)
  12. Click "Apply button".

Views Filters Settings

In Views 3.x the filters are created in the beginning while we choose the content type and other settings. If you need any additional filtering you can create it here.

Views Style Settings

Click on the "Format Slideshow Settings" and on the next configuration window set as below:

  • List type: "Unordered list"
  • Wrapper class: "Leave default settings"
  • Style » Skin: "Deafult"
  • Slides » Slideshow type: "Cycle"

"Cycle Options"

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 http://malsup.com/jquery/cycle.

In a Simpler Manner

Create a folder named "libraries" in your "examplesite.com/sites/all/" directory and then create an another folder named "jquery.cycle" in that directory and finally copy and paste only the "jquery.cycle.all.min.js" into this directory. For e.g. examplesite.com/sites/all/libraries/jquery.cycle/jquery.cycle.all.min.js

  • Transittion: "Fade"
  • Action: "Pause on Hover"
  • Internet Explorer Tweaks: "Default"
  • Widgets: You can choose either or both Top and Bottom (I choose bottom here, and the advance settings as below:)
  • Bottom Widgets » Pager » Pager type: "Fields"
  • Pager field » Content: "Image" (Note: Last one we added for the thumb, don't mistake since both field will be named same.)
  • Activate Slide and Pause on Pager Hove: Checked » "Controls" and Unchecked » "Slider Counter"
  • Click on "Apply button".

Format Show Field Settings

  • Inline fields: "Choose the thumbnail field as inline."
  • Click on "Apply button." (Note: Well it actually doesn't change much in appearance but it does change in the code.)

8. Enable & Configure the Block

Now this block will be visible in the blocks disabled area, so from the Dashboard menu go to Structure » Block and "Enable" the block to a themes default region or any of the custom region you've created. (Regions varies depends on the theme you are using.)

Block Configuration Settings

After enabling the block you get a link to configure the block so click on the "Configure" link and on the settings section set as below;

  • Block title (If you don't want block title to be displayed just type <none>)
  • Again you get all enabled theme specific Region settings.

On Visibility Setings

  • Pages » Show block on specific page: choose Only the listed pages and typeso that this block will be displayed only on the front page.