Create a Showcase block with text and images

32 replies [Last post]
Administrator
Administrator's picture
User offline. Last seen 1 hour 26 min ago. Offline
Joined: 03/16/2010

Installation

If you are new to Drupal, Please click here for Installing Modules tutorial. Please install Dynamic display block and following Modules:

After installation, please enable the module in administer > site building > modules. Note: Enable the (sub)modules in the following order:

1. First enable the following (sub)modules.

  • CCK - content
  • ImageCache - ImageAPI
  • ImageCache - ImageCache (optional)
  • ImageCache - ImageAPI GD2 (optional, only if you enabled Imagecache - Imagecache.)
  • Imagecache - ImageCache UI (optional, only if you enabled Imagecache - Imagecache.)
  • User Interface - jQuery Update
  • Views - Views

2. Click Save configuration button.

3. Second enable (sub)modules which require the (sub)modules from step 1.

  • CCK - content copy
  • CCK - file field
  • CCK - Text
  • Others - Dynamic display block
  • Views - Views exporter
  • Views - Views UI
  • Click Save configuration button.
  • Third enable (sub)modules which require the (sub)modules from step 2.
  • CCK - Image Field
  • Click Save configuration button

Note: Don't forget to run update.php, if you update one of your modules to a later version.

Set permissions

Configure the following permissions at Administer > User management > Permissions, for the anonymous users and/or authenticated users of your site:

  • ddblock module: view dynamic display blocks
  • Click Save permission button at the bottom of the page.

Configuration

We are going to create a Showcase block with text and images by following three major steps.

  1. We need to create a simple new content type and some sample documents
  2. We will create a new view to display those sample documents
  3. We will use DDB (Dynamic display block) and the new View to display those sample documents dynamically

1. Create a new content type and some sample documents

Go to Administer > Content management > Content types

  • Click on Import tab. Content type as <Create> then download this file, copy and paste to Import data field.
Notes: you need to have Antsin theme installed to use this import file.
File Attachment:
File Name: content_type-showcase_with_image.txt
File Size: 4508
  • Click on Import button.

Now you should have a new content type call Showcase with image. Please go to user menu then click on Create content and create at least three new documents ( with long Title/Slide Text - one line text might result image shift ) use this new content type Showcase with image.

2. Create a new view

  • Go to Administer > Site building > Views.
  • Click on Import tab. Keep View name as blank then download this file, copy and paste to Paste view code here field.
Notes: you need to have Antsin theme installed to use this import file.
File Attachment:
File Name: view-showcase_with_image.txt
File Size: 3408
  • Click on Import button.
  • Click on Save button.

Now you should have a new view call showcase_with_image.

3. Create a DDB Instances

  • Go to Administer > Site configuration > Dynamic display block
  • Click on Settings and tick Showcase with image under the Content types, tick views - Showcase with image under the Blocks
  • Click on Save configuration button
  • Now go to Instances tab fill in Showcase with image at Instance Title, select views - Showcase with image as block type.
  • Click on Add Instance button
  • Now go to List tab and you should see an instance name as Showcase with image. Click on Configure Block link.

It should bring you to a new window with Showcase with image block form. Fill in the detail as following:

Notes: Antsin theme DO NOT support all DDB setting, please see theme user guide for support setting.

Block specific settings

  • Block title: <none>
  • Display Method: Cycleblock
  • Tick Use advanced setting
  • Template: Custom
  • Custom template: you should fill in your theme's name as lowercase. For example, if you use Gemstone theme then fill in as gemstone, if you use Blogbuzz theme then fill in as blogbuzz etc.

Content container settings

  • Content container: div.slide

Dynamic display block settings

  • Transition Effect: Fade
  • Speed: 1000
  • Timeout: 10000
  • Sort Order: Random
  • Tick Pause
  • Tick User Pager

Pager settings

  • Pager: Number pager (select depend on theme you are using)
  • Pager container: .custom-pager-item
  • Pager position: bottom
  • Pager event: Click

Dynamic display block advanced settings

  • Tick Use jQuery effects for text of a slide
  • Slide text container: div.slide-text
  • Slide text position: Bottom
  • Before effect: Fading - Fade Out
  • Speed before effect: 1000
  • After effect: Fading - Fade In
  • Speed after effect: 1000

Click Submit button and we have finished

Very last step, we need to publish the Block

  • Go to Site building > Blocks
  • Find Showcase Text Only and publish it in showcase left position
  • Press Save Blocks button
     

HOME | FORUMS | CONTACT US | TERMS & CONDITIONS | COPYRIGHT © 2010 ANTSIN - DRUPAL THEME MAKER. ALL RIGHTS RESERVED.