Artikel ini bukan tulisan saya, tapi saya dapatkan dari salah satu support forum nya Theme Fever (Gratis) di website
http://www.antsin.com/en/. Semoga bermanfaat untuk teman-teman yang banyak menanyakan soal membuat Image Slideshow.
Introduction
Thank you for using Antsin's Drupal theme -
Fever. In this user guide, we will show you how to put everything together to achieve the result as in
demo. By using this guide, we assume you have basic knowledge about Drupal and have Drupal 6.x installed on your system.
Installation
If you are new to Drupal, Please click
here for Installing Themes tutorial and
here for Installing Modules tutorial. Please install Fever theme and following Modules:
Basic Configuration
1. Fever Theme Setting
- Go to Administer › Site building › Themes and select Fever
- Check logo if you have logo ready.
- Check Site name & Site slogan if you want it display as text.
- Check User pictures in comments
- Check Primary links & Secondary links
- Save the change
2. Menus
- Go to Administer > Site building > Menus to configure menus
- Primary links will be display in navigation bar block. For droplist menu effect, please checkExpanded for Menu item in Primary links > List items section. Secondary links will be display on top edge area.
3. Read More Tweak
- Go to Home › Administer › Site configuration > Read More Tweak to configure this module.
- Enable Remove Read More link from links section
- Inline: Try to add the Read More link after the last word of the teaser. If this fails, add the link on a new line after the teaser.
- Link text: more »
- Click on Save button
4. Teaser with image
There are many different ways to create a node teaser with image. All Antsin's Drupal themes use very basic method.
To create a teaser with image simply include an image in your content body field then Insert Teaser Break after the image.
Feature Configuration
1. Showcase
To build a Showcase block, you need
Views Slideshow: Dynamic Display Block.
Make sure you installed & enabled all required modules before continue. If you are a return customer you might notice that we switch our Showcase module from
Dynamic Display Block to
Views Slideshow: Dynamic Display Block for a very simple reason. It is much easier to install and no configuration required since pre-configuration included within import file and that is all you need.
To set it up you need to do following four steps:
- First Add 2 new preset at Site building > ImageCache
- Add new preset > Preset Namespace: showcase_original (don't add any actions) simply save it
- Add new preset > Preset Namespace: showcase_scale then New Actions > Add Scale: 60% X 60%. Save Preset
- Back to ImageCache and make sure you have two Preset Name: showcase_original &showcase_scale
- Second you need to import a new content types:
- Go to Administer > Content management > Content types
- Click on Import tab. Content type as <Create> then copy and paste this code into Import data field.
- Click on Import button.
- Go to Content management > Showcase with image > Manage fields > Image > Configure and make sure Permitted upload file extensions as jpg jpeg png gif and not dot( , ) in between
- Create at least three new nodes by using this new content type Showcase with image. The prefect size of showcase image should be 660 width X 300 height.
- Third you need to import a view name showcase_with_image
- Go to Administer > Site building > Views > Import. Leave the View name field as blank and pastethis code into Paste view code here box. Note if you use CKeditor then you need to click on link Switch to plain text editor then paste the code.
- Click on Import button
- Click on Save button
- Final step, now you have Showcase ready and all you have to do is go to Administer > Site building > Blocks and find block name Showcase with image publish it into Showcase block region.
To configure Showcase with different setup, you can go to Home › Administer › Site building › Views and edit showcase_with_image. Click on Showcase tab on your left then click on icon beside Style link. See screenshot below:
You should see all default value and you can change it to different effect. Note: Fever theme only support one pager & slider text position.
Notes: If you are using content permission module please be sure you setup permission correctly otherwise anonymous user won't see the images
2. Blog Post
To create a blog post is very simple. First you need to enable Blog module at Site building > Modules section then click on Create content link and select Blog entry.
Fever theme has particular blog layout show as below image:
To achieve above style that all text content on the right including the title beside an image, we have special setup in node-blog.tpl.php. Now there are many way to do the same thing in Drupal, we simply select the below method:
At line 25 ~ 28, it find the image in the teaser content if there is one and bring it up to the <div class="blog-image">...</div> section.
<div class="blog-image">
<?php preg_match("/<img[^>]+>/i", $content, $matches);
print $matches[0]; ?>
</div>
To avoid the repeat image show in tease content, we simply strip the teaser content field and only allowed following tags: <p><a><div>. At line 47.
<?php print strip_tags($content, '<p><a></div>');?>
You don't have to understand above coding and all that. It just show to the users that want to modify the layout. For example, if you use Fivestar module in the teaser you might want to add on extra allowing tags besides <p><a><div>.
Extra
1. Image
Please click on following link for
work with images tutorial. The following CSS class available for image editing in Fever theme:
2. Read more link
Sometime you might need a read more link in the block.
<p><a href=""><strong>read more</strong></a></p>
(if you are using CKeditor, you need to switch to plain text editor) Fill in target link in between href="www.mysite.com/mylink.html"
3. Search Block
For search block, simply publish your Search form block to search region. And fill in block title as<none>
4. Content bottom Block Style
Some user might notice that when you don't publish any block content into
content bottom five then bottom edge will longer than normal. To fix that you can apply a CSS class
no-margin to each content bottom block by using
Block Class module. It will get ride of extra bottom space.
EmoticonEmoticon