Oct 28 2019
Oct 28

Lazy load images in Drupal with BLazy

Recently, we involved in a local project with Ecoparker.com. It is a directory of restaurants, cafes, entertainments, services, real properties ... in Ecopark Hanoi, Vietnam. This site is based on our best selling directory theme BizReview.

On this site, there is a page which lists all kindergartens around the area. It has 20 listings and will continue to grow. It is a very typical page built with Drupal views.

Kindergartens at Ecopark

By curious, we ran a PageSpeed Insight test, a Goolge provided test for accessing how fast your page is loading, to see how it performs.

The score on Desktop was 75, which is quite good. But let's see how we can improve it.

Page speed test - before

Scroll down to the Opportunities section which suggests how to help your page load faster, we see an interesting point "Defer offscreen images" with the suggestion:

"Consider lazy-loading offscreen and hidden images after critical resources have finished loading to lower time to interative

Page speed test - suggestions

Lazy loading is a technique that only serve content when it becomes visible to users, ie, when users scroll to it. If it is off screen, we don't load it to save bandwidth. It will be much useful when your sites contain a lot of images, so we don't have to load them all everytime an user browse the page. Only when the user scroll, images load and become visible.

It brought me to a question that how to lazy load on Drupal.

We had a look a the Blazy module, because it was a prerequisite of another module on our site. Previously we haven't been curious to know what it does. It turns out to be a very popular module with 30K+ sites reporting using this module.

Looking in more details, this module is very promising:

On private benchmarks, Blazy saves a page with lots of images from 14MB to 3MB, 200 http requests to 20, loading time 30s to 3s. Elevating performance grade from F/E to A/B via gtmetrix. Overall ~5-10x better.

On the description page, Blazy offers:

  1. Blazy as field formatter
  2. Blazy filter as HTML filter (on your CKEditor)
  3. Blazy Grid as Views style

That's all we need, so we started to get our hands dirty.

1. Install module:

Install and enable the module as usual, via the admin interface or composer: https://www.drupal.org/docs/8/extending-drupal-8/installing-drupal-8-mod...

Note: if you use Slick module for slideshows, it requires Blazy 1.0. But to get Blazy as a HTML filter, you need the 2.0 version.

2. Blazy configuration:

Blazy configuration is available at /admin/config/media/blazy. There are a bunch of options, like custom placeholder image, offscreen view port etc ... You are good to go with default settings.

Drupal Blazy UI configuration

3. HTML filter

Just go to /admin/config/content/formats, edit the Full HTML format, and enable the Blazy filter.

Drupal Blazy filter as HTML filter

Your HTML content will be automatically applied Blazy filter, ie, images and iframes will be lazy loaded. On our project, we found that images lazy loading works properly, but iframes do not. Not sure why, but we will come back for it at a later time.

4. Views

We editted the view page, on the Image field, there is a new Image format. Choose Blazy and set the image style, Save it.

Drupal Blazy on Views

All images on this view based page are now lazy loaded. If you scroll fast enough, you will see the placeholder are blinking first, then your images will show. Awesome!

After that, we ran the PageSpeed Insight test again.

Page Speed test - after

As you can see, the issue with "Defer offscreen images" is gone. The point have raised to 81, which is slightly better. That's what we need.

In conclusion, please consider to apply the lazy load technique to all of your Drupal sites, as it is highly recommended for a high performance site.

Aug 29 2017
Aug 29

In a recent Drupal 8 project, we dealed with a multilingual translation issue: we need to translate the usual "View more" text on the Content: Link to Content field in Views.

After doing some research, we found a workaround like this:

1. Instead of using Content: Link to content, let's add two fields: Content: Path and Global: Custom text.

Note: the Content: Path field provides us a corresponding URL alias for each language.

2. On Global: Custom text, please enter:

<a href="https://www.symphonythemes.com/drupal-blog/translate-content-link-conten...{{ path }}">{% trans %} View more {% endtrans %}</a>

3. Now the text "View more" will be available in User interface translation tool under Configuration - Regional and Languages

Note: to translate that text into a given language, you must browse the User interface translation in that given language.

Jan 26 2016
Jan 26

You may already be familiar with Amazon S3, the most popular solution for cost effective storage services nowadays. You will need it when you are looking for:

  • Low cost storage: it happens to be my case, when I implemented a Drupal based web app for a local governmental authority. The app is used by branches from all provinces of the country, and they usually upload a large amount of data (documents, photos, scans etc ...) regularly. Using the app server's storage is too expensive. So I converted the Drupal file system to Amazon S3, leaving only the core and modules on the app server.
  • Fast loading: many bloggers have used S3 to store their photos, videos, audios and files, for better serving their readers. As customers are from all over the world, saving the multimedia content to S3 will let them access them much faster.
  • And many more benefits

In this tutorial, we will show you how to convert the Drupal 7 & 8 file system to Amazon S3 and sync all existing files to S3 Storage.

1. Preparation

You will need to run several client programs like drush and awscli. So if your site is on a shared hosting, you are not able to install and execute them. Pls download it to your local host and configure it there. After that you can upload to your shared hosting.

The techniques that I use in this tutorial are:

  • Amazon S3 ofcourse.
  • Drush:  command line shell and Unix scripting interface for Drupal, very convenient and useful.
  • AWSCLI: the Amazon Web service client tool, I use it to sync data to S3.
  • S3FS: the Drupal module for connecting to Amazon S3

2. Install Drush:

Pls follow this guide to install Drush: http://docs.drush.org/en/master/install/

3. Install S3FS:

For Drupal 7, on the shell script, go to the web project folder and execute the following commands:

drush dl s3fs
drush en s3fs
drush make --no-core sites/all/modules/s3fs/s3fs.make

The first command is to download the S3FS module. The second one enables it. And the third one is to automatically download the required library AWSSDK to /sites/all/libraries/awssdk2. This command is very useful because there are many versions of AWSSDK and only the chosen version (in my case, 2.7.5) is able to work with this module.

If you have no drush, you can install the S3FS module manually and go to GitHub to download the AWSSDK for PHP library and place it under /sites/all/libraries/awssdk2 . Remember to choose the right version, which is written on the /sites/all/modules/s3fs/s3fs.make file.

On Drupal 8, please use composer to install this module. Composer will automatically install required libraries. So on the terminal and under your root project folder, run:

composer require drupal/s3fs

4. Get a key pair to access Amazon S3:

Pls go to Amazon IAM to create an user with Access Key. Pls follow this guide for more details: http://docs.aws.amazon.com/gettingstarted/latest/wah/getting-started-pre...

Then create a bucket on Amazon S3.

5. Configure S3FS access to Amazon S3

Browse Configuration - Media - S3 File System and enter your key pair and bucket name.

Hit Save. If there is no error, then the S3 connection is perfect. Otherwise, pls check your keys and bucket name, according to the error messages.

If you want the credentials and bucket name are not removed by mistakes, pls write them to the /sites/default/settings.php file

$conf['awssdk2_access_key'] = 'YOUR ACCESS KEY';
$conf['awssdk2_secret_key'] = 'YOUR SECRET KEY';
$conf['s3fs_bucket'] = 'YOUR BUCKET NAME';
$conf['s3fs_region'] = 'YOUR REGION'';

Update for Drupal 8: adding keys via the admin interface will be soon deprecated. Instead, add the configurations to the settings.php file like:

# S3FS setting
$settings['s3fs.access_key'] = 'yourkey';
$settings['s3fs.secret_key'] = 'yourkey';
$config['s3fs.settings']['bucket'] = 'yourbucketname';
$settings['s3fs.use_s3_for_public'] = TRUE;

# if you want to use S3 for private files, uncomment the line below:
#$settings['s3fs.use_s3_for_private'] = TRUE;

6. Configure S3FS to take over file system:

Now you may want this S3FS module to take over the public file system. Just open the Avanced Configuration Options section and select Use S3 for public:// files . Just tick and save and the module will take care of the rest.

Return to Amazon S3 and browse your S3 bucket, you should see a new folder named s3fs-public there (or s3fs-private if you choose Private files).

6. Clear the cache and try the first file upload

Now turn into the Actions tab and hit Refresh file metadata cache.

Then upload your first file via the node creation form, such as upload an image of an article. Save it and check the image path, it should look like http://your-bucket-name.s3-us-west-2.amazonaws.com/s3fs-public/... Your file are succesfully uploaded to Amazon S3.

If you don't see the uploaded file, it is because your bucket is not made public. Pls browse your bucket, select the s3fs-public folder and choose Actions - Make Public.

7. Sync existing files to S3

Also on the Actions tab, there is a button to Copy local public files to S3 . Just hit it and the uploading process will run in batch. If you have not many existing files, just wait for a few hours and it will be ok.

In case you have a rather large bunch of existing files, like I had 10GB of public files, the above method is just too slow. With the help of AWSCLI, it will be just a piece of cake.

To install AWSCLI, follow the guide here: http://aws.amazon.com/cli/

On your shell terminal, enter:

sudo apt-get install python-pip
pip install awscli

Then configure AWSCLI:

aws configure

AWS Access Key ID [None]: ENTER
AWS Secret Access Key [None]: ENTER
Default region name [None]: us-west-2
Default output format [None]: json

After that execute this command to sync the sites/default/files folder to your S3 bucket.

aws s3 sync sites/default/files s3://mybucket/s3fs-public --exclude *.tmp

Allow the sync process to complete and check the S3 bucket, you should see your files there.

Wrap up

Before using the S3FS module, I had a failed experiment with Amazon S3 module. The process was more complicated and I hit a deadend.

The S3FS module, in my experience, is much easier to configure and deal with. And I hope you will get the same results as mine. Good luck.

Jul 16 2015
Jul 16

When you share a post of your Drupal site via Facebook, it will automatically detect the images of your node for you to choose. But sometimes, it does not detect any images, or the detected images are not what you want. How can you deal with that?

An easy method is uploading the main image manually. That's fine, because you are the owner of the site, you know which ones to choose. However, if your readers share that piece of content and it has an ugly image, it does not look attracting at all.

In this tutorial, we show you how to set meta data for your Drupal nodes so the correct images will be chosen, when you share them via Facebook.

How Facebook detects images

According to this thread by bkaid on Stack Overflow, Facebook relies on these following open-graph meta tags to decide which image to show.

<meta property="og:image" content="http://yourwebsite.com/yourimage.jpg"/>
<meta property="og:image:secure_url" content="https://secure.yourwebsite.com/yourimage.jpg" />

When these tags are not present, Facebook tries to look for the <link rel="image_src" href="https://www.symphonythemes.com/myimage.jpg"/> tag.

When none of those tags are available, it will choose the images on your page which have the following criteria: Image must be at least 200px by 200px, have a maximum aspect ratio of 3:1, and in PNG, JPEG or GIF format.

Configure image tags on Drupal with Metatags

Using the Metatag module, a single must-have SEO module for Drupal, we will show you how to configure the tags for Facebook sharing.

Step1: Edit your content type, add an image field which you specify it to be the main image to be shared.

Step 2: Download and install the Metatag module on https://www.drupal.org/project/metatag

Step 3: Enable Metatag core module and Metatag:Open Graph submodule

Step 4: Go to Configuration - Search and metadata - Metatags, and choose "Add a metatag default". On the next screen, pls choose your node type that you want to configure, Article for example, then click Add and Configure.

Step 5: Pls click on the link Browse available tokens, open the Nodes section and look for the field image token that you create on Step 1. On my case, it is named [node:field_image]

Step 6: On the metatag form, open the Open Graph section. On the Image field, pls enter [node:field_image]

Save the form, your article node now will have the Open Graph meta tag which is good for Facebook image detection.

Jan 21 2015
Jan 21

The default contact form in Drupal has quite basic settings. You may only create categories and receiving emails with the default UI admin. To change other preferences such as form title or form destination, we may have to implement override hooks.

In this article, we present some tricks to customize the contact form in Drupal. More tricks will be added regularly.

1. Edit the contact form title

To change the title, add this function to template.php on your theme folder (/sites/all/themes/your-theme/template.php)


<?php
function mytheme_form_contact_site_form_alter (&$form, &$form_state) {
drupal_set_title ('Contact ABC Media');
}

2. Redirect form result

By default, users will be redirected to front pages after submitting the form. It has a strange behavior for users because they may confuse what is going on, whether the message has been sent.

To redirect the contact form to a page of your choice, please add these two functions to your template.php file of your theme, as in section 1 above. I learnt it from a tip of Postrational.


<?php
function my_theme_form_alter(&$form, &$form_state, $form_id) {
if ($form_id == 'contact_site_form') {
$form['#submit'][] = 'contact_form_submit_handler';
}
}
function contact_form_submit_handler(&$form, &$form_state) {
$form_state['redirect'] = 'thank-you-page-alias';
}

Do you have other tricks with contact forms in Drupal? Pls share and we will post them here with acknowledgement to you.

Dec 03 2014
Dec 03

We had a Drupal project, implementing a commerce site for a local store. We use Drupal Commerce, as always, for this type of websites. You may see that we have alot of Drupal Commerce themes on our portfolio.

During the project, there was a minor request from our customer: add the Continue Shopping button to the cart. This feature is available on Ubercart, especially for Drupal 6 Ubercart users. Most of ecommerce sites have this feature as well. But it is not built-in with Drupal Commerce.

As I searched on the Drupal.org issues, I found a very helpful thread: Continue shopping in cart. Zorroposada presented a custom code to achieve it:


<?php
/**
* Implements hook_form_FORM_ID_alter(&$form, &$form_state, $form_id)
*/
function MYMODULE_form_views_form_commerce_cart_form_default_alter(&$form, &$form_state, $form_id) {
$form['actions']['continue_shopping'] = array(
'#type' => 'button',
'#value' => t('Continue Shopping'),
'#weight' => -999,
);
if (isset($_SERVER['HTTP_REFERER']) && strlen($_SERVER['HTTP_REFERER'])) {
// if user comes from product detail page, redirect user to previous page
$form['actions']['continue_shopping']['#attributes'] = array('ONCLICK' => "history.go(-1); return false;");
} else {
// redirect user to product list page 'store' by default
$form['actions']['continue_shopping']['#attributes'] = array('ONCLICK' => "window.location.href='" . url('store') . "'; return false;");
}
}
?>

I do nothing better here. I just wrap this code on a custom module, so any lazy users can just download and install it.

The module is called "Commerce Continue Shopping", and you will find it in the Other section of the Drupal module page when unzip it to /sites/all/modules. Enable it and you will see the Continue Shopping button on your cart.

Pls download the module here: commerce_continue_shopping_7.x-1.0.zip

Aug 06 2014
Aug 06

We had been always using FAQ module to create Frequently Asked Questions for any of our projects. But on our latest theme, BizReview, we switch to a new module, FAQ Field.

FAQ is a classic module, it is there since Drupal 6. So when we have to build a FAQ section, using this module is a no brainer. This is the FAQ module in action on our Velocity theme.

Velocity FAQ section

Recently, when I wanted to download that module again for my new project, I was too lazy to type the full URL, so I google "drupal faq". It happened to display another new module, called FAQ field. I looked at the description and found it very promising. So I gave it a try. After using it, I have the following comparisions between the two modules.

FAQ Field
  • Older, since Drupal 6. 34K+ usages
  • Uses Views to display FAQ nodes
  • Create new question by adding new FAQ node
  • Needs to use Weight to control the question orders.
  • 4 diplay options on configuration
  • Allow subcategories
  • Newer, only since Drupal 7. 1,700+ usages
  • Integrate as a field of a node
  • Create new question by adding a field value
  • Drag and drop to control the question orders.
  • 4 display options on fied display configuration
  • No subcategories

I found the FAQ Field module is more light weight and easier to use. I just need to create a new content type with the FAQ field, then add a new node with any number of questions, instead of creating a separate node for each question. Ordering is much simpler, just drag and drop, instead of typing weight numbers.

Installation and tutorial

Here are the steps to use the FAQ field module:

  1. Install FAQ field (no dependancies)
  2. Create a new content type, FAQ for example. Add the FAQ field

    FAQ field on new content type

  3. Create a FAQ node

    FAQ field on node

  4. The result

FAQ field in action

Mar 26 2014
Mar 26

When you download and install the Drupal core, it is by default English, as you may know. Our Drupal themes on Symphony Themes are also in English by default. In many cases, I receive requests from customers on how to quickly translate Drupal to their languages (not English, ofcourse).

Here is the guide. It applies to translate Drupal in a non-multilanguage site. If you need more than one language in the same site, you will need to do a lot more stuffs, which can be found on another article.

1. Enable neccessary modules

Please go to admin/modules and enable Locale and Content translation.

2. Add your language

Go to admin/config/regional/language to add your language, please choose it as default language

3. Download the translation manually

Go to http://localize.drupal.org/translate/downloads?project=drupal to download translation package for your language.

Then import the translation. Go to admin/config/regional/translate/import to import the package you have just downloaded.

4. Automate the process with Localize Update

You can automate the translation update process for the Drupal core and all of your installed modules as well by using the Localize Update module.

It is very useful. When you install new modules, this Localize Update module automatically pulls the translations for the new modules from localize.drupal.org.

5. Translate manually

The site is now translated to your language. If you find any untranslated strings, please go to admin/config/regional/translate/translate to search and translate them

That's quite simple, isn't it? If you find this article helpful, please subsrcibe to our mailing list to get notified on latest news and tutorials.

Nov 17 2013
Nov 17

Are you turned off with table content, especially a long table of over 100 rows? It is a nightmare to create a HTML table, look for each tag to enter data.

Recently, I was working on a local project which has a member directory on 63 provinces over the country. Each province has 5 lists of different types of members to keep track with. Each list has an average of 50-100 members. It is not hard to imagine inputing them by HTML is a nightmare.

That's when Table Field comes in handy.

What it does?

Basically, this Table Field module allows you to create a field in your content type with tabular data. You can either enter cell data manually by specifying the number of rows/columns; or you can import from a CSV file.

Using CSV import is the most amazing feature that I need for my project. Just turn Excel files to CSV, upload to each node and it is done. 

How to use?

  1. Install the module from: https://drupal.org/project/tablefield
  2. Add a field to a content type

  3. Create a node, enter table data or import from CSV

With the help of this module, my job on that project becomes much easier. This cool Drupal module saves me a day.

May 23 2013
May 23

This organization theme was inspired by my talk with Kim McCluskey, the founder of SunInMyHeart.com, a charity fund. During his trip to Halong Bay, I have heard about what he did for SunInMyHeart to help orphanage children. So after the trip, I created this theme for organization and non profit purposes. 

If you are interested in using this theme for your charity funds, please feel free to ask me and I will send you the package free-of-charge.

We have received many requests to download this theme. As we believe the use of this theme for your websites will bring alot of benefits to other people, especially for charity purposes, we have converted this theme to Drupal 7 and provide it free of charge. No more asking, just go to the theme page and click on the Download tab, you will be able to get it.

This theme is now hosted on Drupal.org: http://drupal.org/project/fiddle

You can preview and download Fiddle. We will support all problems with Fiddle at our Support Forum.

Apr 25 2013
Apr 25

Slideshow is one of the most essential part of a website. It is basically the first thing that attracts your eyes when you visit a website. It is large enough and it has many cool transition effects that you can't help take a look at it. Having a long time working with Drupal, I collect and present in this article some of the best Drupal slideshow modules.

There are alot of Drupal slideshow modules, however, I only pick the modules which are in high usage, under active development and support Drupal 7. I downloaded and tested them all to see what are pros and cons of each module.

Now these are 12 best Drupal slideshow modules in my opinion: 

1. Flex Slider

flex slider drupal

Flex Slide becomes my "no brainer" choice for the slideshow module that I installed defaultly on all themes and web projects. It looks similar to Views slideshow, but it is far more advanced, it supports finger touch in mobile displays. Using this module, you can swift to change slides by your fingers when you see it on a mobile phone.

Although it has only two type of transitions: fade and slide, but I can sacrify the lack of transition effects for better mobile experiences.

Demo: http://demo.symphonythemes.com/erhu

Download: http://drupal.org/project/flexslider

Installs: 15'000+

2. Mega Slider

mega slider drupal

Mega Slider is a premium Drupal slideshow module, ie, it is not free. Although I was reluctant to purchase a Drupal module, I found this module worths any penny. With this slider, you can define any elements to pop in and pop out with over 20+ effects. The admin panel is so easy to use that you can make slides by just seleting, dragging and dropping. I apply this module on our lastest Drupal theme Velocity and the result is incredible.

Demo: http://demo.symphonythemes.com/drupal7/velocity

Purchase: Mega Slider

Installs: N/A

3. View slideshow

view slideshow drupal

This is the most popular slideshow module in Drupal. I uses to install Views Slideshow in most of our Drupal themes. With Views Slideshow, you can have a slideshow of any content (not just images) that can appear in a View. Powered by jQuery, it is heavily customizable: you may choose slideshow settings for each View. However, when responsiveness is a must for any websites nowadays, I opt it out and choose Flex Slider.

Demo: http://demo.symphonythemes.com/drupal7/yali

Download: http://drupal.org/project/views_slideshow

Installs: 170'000+

4. Vegas Background Slideshow

flex slider drupal

We used to envy other CMSes with their beautiful fullscreen slideshow, but no more. Vegas is a jQuery plugin to add beautiful fullscreen backgrounds and slideshows to your webpages.

Demo: http://vegas.jaysalvat.com/

Downloads: https://www.drupal.org/project/vegas

Installs: 5,000-

5. Nivo Slider

flex slider drupal

An implementation of the great Nivo Slider in Drupal with 16 amazing transition effects. So if you like a more fashionable slideshow, this one is a great choice.

There are two modules: Nivo Slider and Views Nivo Slider. I recommend Views Nivo Slider since it works with Views, as we always do to configure slideshow in Drupal.

Demo: http://dev7studios.com/nivo-slider/

Downloads: http://drupal.org/project/views_nivo_slider

Installs: 15'000+

6. Slick Carousel

flex slider drupal

We applied this module on a recent local project and the quality is just amazing. It is responsive, CSS3, swift enabled ... all that can not be performed on the legacy JCarousel module (which I mentioned on the #16 of this list).

With the submodule Slick Views, you can create a slider from views as well. If your website has both slideshow and carousel, you can just use this single module (and its submodule).

Demo: https://www.drupal.org/project/slick/

Downloads: https://www.drupal.org/project/slick

Installs: 15'000+

7. Field Slideshow:

If you want a Drupal slideshow in content, Field Slideshow is the one. Instead of displaying slideshow nodes in a block, this module allows you to display multiple images as a slideshow within a single node, an article for example. It gives you a field in your chosen content type so you can add many images and hit Save: Voila! The slideshow appears within other text content.

Updated Dec 2014: since I adopt Flex Slider which has its sub module Flex Slider field, I no longer this Field Slideshow any more.

Download: http://drupal.org/project/field_slideshow

Installs: 16'000+

8. JuiceBox HTML5 Image Galleries

flex slider drupal

Using the JuiceBox Javascript, this module offers a powerful cross-device solution for image galleries, sliders and more. JuiceBox has two versions: the Lite (free) and Pro (paid). You can do alot of cool stuffs with just the Lite version.

Demo: http://www.juicebox.net/demos/

Download: https://www.drupal.org/project/juicebox

Installs: 8,000+

9. Bootstrap Photo Gallery

flex slider drupal

Bootstrap Image Gallery is an extension to blueimp Gallery, a touch-enabled, responsive and customizable image and video gallery. It displays images and videos in the modal dialog of the Bootstrap framework, features swipe, mouse and keyboard navigation, transition effects, fullscreen support and on-demand content loading. This module requires a Bootstrap base theme to work.

Demo: https://blueimp.github.io/Bootstrap-Image-Gallery/

Download:

Install: ~1000

10. Dynamic display block

DDBlock slideshow drupal

Dynamic display block slideshows are mainly used to showcase featured content at a prominent place on the frontpage in an attractive way. Basically, it has two main features:

  1. Displays images in a chosen folder as a slideshow
  2. Displays nodes of a specific content type as a slideshow (this is similar to Views Slideshow). A featured content slideshow can contain e.g.: New articles, Most popular content, New products, Portfolios, Videos etc

Demo: http://ddblock.myalbums.biz/

Download: http://drupal.org/project/ddblock

Installs: 18'000+

11. Slideshow Creator

Slideshow Creator is very similar to Dynamic Display Blocks and Field Slideshow, except:

Pros:

  • more features as it can display images on directory, by URLs.
  • place it anywhere in the document (in comparison with DDB only diplays on top or bottom of the node).

Cons: User needs to remember the embed code syntax.

This module creates slideshows anywhere in the document using any image on the internet with many other features. If the user does not have JavaScript enabled, it displays all images sequentially.

Download: http://drupal.org/project/slideshow_creator

Installs: 2'400+

12. Galleria

flex slider drupal

I use the Galleria module in most of our photography themes. It displays a gallery of images and thumbnails with eye catching look and feel.

Demo: http://demo.symphonythemes.com/drupal7/viola

Download: http://drupal.org/project/galleria

Installs: 10'000+

13. Gallerific

flex slider drupal

Galleriffic is similar to Galleria, both of them are particular useful in handling high volumes of photos while conserving bandwidth. Galleriffic has more flexible thumbnails as they can sit on the top, the side or the bottom of displaying images.

Demo: http://demo.symphonythemes.com/lirone

Download: http://drupal.org/project/views_galleriffic

Installs: 4600+

14. Image Flow

flex slider drupal

This module turns a group of images into a rotating circular gallery similar to Apple's coverflow effect. There are a few modules supporting this effect: Image Flow, Views Slideshow Image Flow and Views JQFX Image Flow. I recommend Views JQFX Image Flow as it has higher usage and it supports Drupal 7.

Demo: http://www.lunarclips.com/drupal-7-imageflow

Download: http://drupal.org/project/views_jqfx_imageflow

Installs: 1100+

15. Content Glider:

The only reason that you should consider to use this module is when you don't want to install addons JQuery script (I am not that lazy). It is a standalone module, no need additional script or another modules. Just install and use it!

Download: http://drupal.org/project/content_glider

Installs: 1590

16. JCarousel

JCarousel slideshow drupal

Description: This module allows developers and themers to make use of the jCarousel jQuery plugin. It includes a developer API that other modules can use, as well as Views integration in the 2.0 version so that you can turn any list of content or images into a carousel.

Link to download: http://drupal.org/project/jcarousel

Deprecated modules

These are a couple of modules that I mentioned on this same thread over 2 years ago but they are inactive now. It supports only Drupal 6.

17. 3D Views Carousel

3D view caroused slideshow drupal

Description: This module is a views plugin that integrates Professor Cloud Carousel A 3d Carousel in JavaScript. Its main functionality is to generate a 3D floated rotated images, which accelerates and moves automatically according to mouse wheel. This module works fine with Lightbox2 and Shadowbox.

Demo: http://www.professorcloud.com/mainsite/carousel.htm

Download: http://drupal.org/project/viewscarousel3d

Feb 20 2013
Feb 20

You may ask me: why to have page titles for views?

Views in Drupal, technically, are used to display a list of content. Translating to business language, it will be used for category pages. For example, if you build a shopping website in Drupal to sell mobile devices, you will use "views" to construct the page of Apple products (and also Samsung products, LG products, etc ...)

These category pages are very important (second most after your homepage). You will definitely want they appear on top of Google search results for relating keywords. To achieve it, one of the best SEO practices is to set good focused titles for them.

When I developed the website for Exotic Voyages, a luxury travel agent, it has many category pages. They are pages for hotels, tours, destinations, cruises, photos etc ... all are built by Drupal 7 views. The SEO team of Exotic Voyages required me to let them set custom titles for these pages.

A tour page built by Drupal views - Exotic Voyages website

An example of a view in Drupal

I thought it should have been a popular topic. I spent days and could not find a quick and strait forward solution. Fortunately, I finally found a solution for this problem: 

1. Simple Page Title

Simple Page Title is simple, but it does exactly what I need, to be able to set custom title for any pages, basing on URLs.

This module is not popular, only 500+ installs and its version for Drupal 7 is still in development mode. However, I tested it in my client website and found no problem with it.

After installation, the module appears on Admin > Structure > Simple Page Title. Just provide the path and the title you want, and click on Submit. That's quite easy.

Using Simple page title module in Drupal

Using Simple Page Title

It works properly in conjunction with the famous Page title module. So if you can both set title patterns and custom title as you desire.

Note: if you like the simplicity of this module, you may want to see the Metatag quick module as well. It also enables you to set custom metatag for any URL.

2. On Drupal 6, use Nodewords Page Title

On my Drupal 6 websites, I use the Nodewords Page Title module. It is an addons to the Nodewords module and provides an additional tab to set custom page title for URLs.

Using Simple page title module in Drupal

Using Simple Page Title

Please be warned that this module only works with Nodewords 1.12-rc1 or 1.12-beta9.

3.Use views as attachment block

Another interesting solution which I found on this article on Digett is to make all pages on your website as nodes. Then, configure a view as a block and attach to a specific node.

That's a clever way to work around the problem. Now you can set page titles and meta tags for nodes with ease, like I have describe on the previous article "Set Drupal page title and node title".

This article is written by . Enjoy!

Dec 07 2012
Dec 07

This topic is not new, but unfortunately I only knew all tricks about it recently when I have a request from my customer: "How to make page titles different from node titles, with and without patterns?"

1. Why to have 2 types of titles?

The reason is, node title is for readers, page title is for SEO. A page title of a web page is displayed on top of your browser window and the current tab.

Drupal page title vs node title

It is also selected by Google as the title of a result on the search list. Below is the page title of the article "[Drupal 7 free theme] - ST Flabiol is available for free download" when you search for the keyword "Drupal 7 free theme", 

Drupal page title in Google search

To show why you need two different tiles, let's see an example. You create a rating website, similar to ST Chapi, to review restaurants in Ohio. You create a directory of restaurant nodes on your website. When local people search a keyword about restaurants, you probably want your content nodes appear on the search results as "Lobster Restaurant in Ohio", "Finest Kitchen in Ohio" and etc ... That's targeted, catching and relevant.

However, when users view these restaurant nodes on your website, you may not want to add the postfix "in Ohio" for all nodes: Maid Cafe in Ohio, Lobster Restaurant in Ohio, Finest Kitchen in Ohio and so on .. It looks boring to readers. And you may forget to type in everytime. 

2. Set the page title with pattern

In the situation above, you can append automatically the postfix "in Ohio" to the page titles of every restaurant nodes while keeping their node titles short. With the help of the page_title module, it is easy to implement this scheme:

Step 1: Install page_title module

Step 2: Go to Admin > Configuration > Page title, and set patterns.

Set pattern for Drupal page title

You just need to add "in Ohio" after the token [node-title]. It is quite easy. You may also set patterns for other content types to suit your SEO strategy.

Note: you can also use the metatag module, it is even more powerful than page_title. It allows you to configure meta titles, descriptions and keywords at the same time, although it requires more steps. Thanks Damien for recommend this metatag module.

3. Set custom page title for individual nodes

What if your desired page titles do not follow any pattern at all? For example, you want:

  • Node "Restaurant A" page title to be "Restaurant A - Best seafood restaurant in Ohio". 
  • Node "Restaurant B" page title to be "Restaurant B - Great view and service".

In this case, you properly want to set custome page title for each nodes, regardless of the default pattern. Just go to Admin - Structure - Content types, and edit the corresponding content type.

On the Page title section, please select "Show field".

Configure Drupal page title to show editing field

Now you have two title fields, node title and page title. When editing a node, you can set node title as usual and enter a different page title on the "Page title" section at the bottom of the edit form.

Set page title for nodes in Drupal

4. Some tips to set page titles

  • Keep your page title less than 70 characters: it is better for human reading. 
  • Put your top keyword closed to the begining: and then the second top keywords, and etc ...
  • Get rid of stop words (words that carry no keyword value): such as a, an, the, but, then, if, or, what, we, he, she ....
  • Leave your company name at the end: we know you value your company brand, but put what users concern first.
  • Keep different pages different titles: do not use same page titles for multiple pages.

5. Page title for views

Please see my other post for custom page title for views in Drupal

Enjoy!

Nov 27 2012
Nov 27

ST Flabiol was used to be a premium Drupal theme. We have decided to convert it to Drupal 7 as a free theme. It was first made with politic style, but it is also very suitable for a business or organization, the kinds of institutions that require no fancy theme but trusted and gentle feelings.

Updated Jun 2013: This theme is now available on Drupal.org. You can download it at Flabiol on Drupal.org

Demonstration

See the demo here: Drupal theme ST Flabiol demo

Features

Join our newsletter

Please subscribe to our newsletter to get free access to resources and updates from Symphony Themes.

Subscribe

Here are Flabiol's feature:

  • Drupal 7.x responsive
  • XHTML 1.0 Strict, CSS 2.0 Valid
  • 8 Regions
  • 3 Colors
  • Install profile - install website with just few clicks
  • Customize using Theme Settings
  • Professional Typography
  • SEO tools: autopath, meta tag, Google Analytics, page title.

Free Download

You can preview and download Flabiol (please click on the Download tab). We will support all problems with ST Flabiol at our Support Forum.

ST Flabiol layout

ST Flabiol layout

Similar articles

Sep 26 2012
Sep 26

The "Master Drupal in 7 hours" tutorial was released on 2010 for Drupal 6 and it has alot of positive feedbacks. We have revised this Drupal tutorial for Drupal 7 and incorporate it as an ebook: "Master Drupal in 7 hours - the Drupal 7 version".

We have a lot of Drupal books for users and developers, from beginners to experts. What this book makes the difference is that

It is written for Drupal beginners and written BY a Drupal beginner

Being a beginner, I know what all beginners fear. Just like I first learnt ball room dancing, it took me almost 2 months to move like a robot, to struggle with music rythm and sway at the same time. I had to overcome the temptation of quitting several times before I could actually progress and enjoy the dances. Some of my friends, unfortunately, took the quick path to just give it up. 

How to use Drupal - Master Drupal in 7 hours ebook coverI told my technical team: “Guys, I am dead with this stuff. Can you just make it easier for me? Can I do it in less than a day?”

I am not a developer, I can not write a single piece of PHP code. I just know some basic hosting and HTML knowledge. And I asked my team to get me to build a completed Drupal site in a day. Sounds a mission impossible?

But we were very interested in this idea. We set a target, within 7 hours a newbie should be able to master Drupal.

Instead of writing a 300 page handbook so it looks thick enough, we want to give you this 90 page cookbook. First, it will look so much more encouraging when you start to read. Second, we want you to follow steps by steps and finish with an actual product that you can be proud of.

What they say?

Again thanks a lot, this the first day on Drupal when I do not bounce my head against the table desk screaming nooooooooo.

- 2046

What this book for?

Maybe you are a business owner who wants to quickly build a Drupal site for your business. Maybe you are a Drupal novice struggling with learning Drupal. Using this book, you will be able to:

  • Reduce time to get familiar with Drupal
  • Ease your pains, it is a short and easy-reading book
  • Launch your site to public much faster

Let's Download this eBook for Free

Aug 24 2012
Aug 24
*/ '; var input_id = '#mc_embed_signup'; var f = $(input_id); if (ftypes[index]=='address'){ input_id = '#mce-'+fnames[index]+'-addr1'; f = $(input_id).parent().parent().get(0); } else if (ftypes[index]=='date'){ input_id = '#mce-'+fnames[index]+'-month'; f = $(input_id).parent().parent().get(0); } else { input_id = '#mce-'+fnames[index]; f = $().parent(input_id).get(0); } if (f){ $(f).append(html); $(input_id).focus(); } else { $('#mce-'+resp.result+'-response').show(); $('#mce-'+resp.result+'-response').html(msg); } } } catch(e){ $('#mce-'+resp.result+'-response').show(); $('#mce-'+resp.result+'-response').html(msg); } } }
Mar 27 2012
Mar 27

This project is a joint work between Symphony Themes and Octopus Video a Drupal social video management platform.

Octopus is the web’s premier 100% open source video hosting and delivering platform. Based on the Drupal platform, Octopus offers services to video contents, providing support for video uploads, enabling you to convert to web-compatible formats for playback in Flash or HTML5, and it’s even compatible for playback on mobile devices like the iPhone, iPad, Android and other mobile setups, or share through social media sites like Twitter and Facebook.

Octopus provides the most thorough feature set of any video hosting and delivering platform. With such a feature-rich platform, any developer can easily manage everything from Video Podcasts to video blogging and much, much more.

Octopus runs on the Drupal platform with video module, developed by Heshan. It is hosted in Drupal.org at http://drupal.org/project/video, also maintained on Github at https://github.com/heidisoft/Octopus

A few months ago, we have worked with Octopus Video to produce the first theme for its distro. The work was much easier than implementing our own themes because Heshan had done all the hard work. When all technical stuffs are fulfilled, our job is just to create the theme. This is how it looks like:

Theme demo

We would like to have feedbacks on it. Hopefully we can create new sets of video themes soon.

Jan 11 2012
Jan 11

Although I am fairly confortable with using the plain editor to write HTML code, most of my customers aren't. They do not have technical background and feel difficulty just to look at a buch of opening and closing tags. WYSIWYG comes in handy here to provide an easy to use solution for non tech guys.

In my experiences, there are two things that most of my customers concern: "an editor with enough menu buttons" and "a tool to upload image". So when I see a Drupal 7 sites without them, the first thing in my mind is to get them installed.

On Drupal 6, my choice for the WYSIWYG editor is FCKEditor. CKEditor is the successor of FCK with better visual and functionality and it works well with Drupal 7. IMCE is a great tool for users to upload files. In the following sections, I will describe how to install and tune CKEditor and IMCE. 

Installing CKEditor

CKEditor is not a separate module in Drupal 7. You have to install the WYSIWYG module and then install CKEditor as its library.

  1. Download WYSIWYG at http://drupal.org/project/wysiwyg
  2. Please install the WYSIWYG module as usual (put the module under /sites/all/modules and enable it via Admin -> Modules interface).
  3. Download CKEditor at http://ckeditor.com/download (go to CKEditor for Drupal section)
  4. Then create a folder called "libraries" at /sites/all and copy the ckeditor folder there.

Configure and tuning CKEditor

Go to Admin -> Configure -> WYSIWYG. The module should automatically detect the presence of CKEditor.

Drupal WYSIWYG - edit CKEditor

Customers generally donot like too many options. If you enable all buttons, they will feel confusing. They are also not document editor experts, so having many buttons there just makes them click and mess up. The webpage would load more slowly every they edit a node as well. 

Therefore, you may need to enable neccessary buttons only on the Buttons and Plugins section. In my list, they are (but not restricted to):

Bold, Italic, Strike-through, Align left, Align center, Align right, Justify, Bullet list, Number list, Link, Unlink, Anchor, Image, Blockquote, Source code (must have for HTML lovers), Paste from Words (good for editors who prepare content from MS Word), HTML block format.

Drupal WYSIWYG - buttons

One tuning not for customer but for for web editor, you should enable "Apply source formatting". Otherwise, the HTML source code will turn into a string, it is hard to read for those who would like to edit HTML.

This is how the CKEditor looks like when you edit a node.

Drupal WYSIWYG - CKEditor

Note: if you don't see the editor, please go to Configuration -> Performance and turn on "Aggregate Javascript files" under Bandwidth Optimization section. This is a known problem which was described at d.o: http://drupal.org/node/1017612

Installing IMCE

IMCE is a file/image uploader for Drupal which your customer would need to upload images to articles for example. So you will have to install IMCE and integrate to CKEditor

  1. First you have to install IMCE itself from http://drupal.org/project/imce
  2. And install the IMCE WYSIWYG Bridge module at http://drupal.org/project/imce_wysiwyg
  3. Please go back to WYSIWYG profile configuration page, edit the CKEditor, and tick the IMCE option at the Button and Plugins section.

When you edit a node, please click on the Image icon on the CKEditor bar, a window will popup. You can click on the Browse server button to add images or upload new images to the node.

Drupal WYSIWYG - CKEditor and IMCE

Done! Now your customers can feel more comfortable writing content for the websites.

Drupal WYSIWYG - IMCE popup                 Drupal WYSIWYG - IMCE browse server
Sep 15 2011
Sep 15

Websites are no longer viewed only on a desktop screens. More and more smartphones, tablets and netbooks are introduced to offer new and more convenient ways to access web content everywhere. In this article, Symphony Themes introduces two FREE Drupal 7 themes, Alphorn and Conch, which support display in various devices from smartphones, tablets to laptops and big screen computers.

In the Drupal Conference London 2011 last month, Tom Deryckere showed some figures of the mobile penetration on his session "Bridging gap between desktop and mobile publishing with Drupal": 

  • Facebook: 200M mobile users, 2x more active than Desktop users
  • Twitter mobile: 50% of total active users, 40% of all tweets.
  • Only 21% of Google's largest advertisers have a website that is optimized for mobile.

In fact, Morgan Stanley predicts at the current rate of change and adoption, mobile Web usage will surpass desktop Internet usage by 2015. Therefore, websites in next generation must, either adaptively or responsively, support mobile devices.

In order to show how a mobile website looks, Symphony Themes introduces two Drupal 7 themes, Alphorn and Conch, available for FREE download.

ST Alphorn

Alphorn is the first free Drupal theme that Symphony introduced 2 years ago. It is quite popular among Drupal community. We had many requests for the Drupal 7 theme version of Alphorn but it could not be released right after Drupal 7  was released. Now everything is ready and I can make Alphorn as a responsive Drupal 7 theme.

Alphorn in responsive mode

ST Alphorn in 3 different layours

Download

ST Conch

Conch is also one of our popular free Drupal themes with thousand downloads. For this Drupal 7 theme version, we have redesign and add responsiveness features so the web layout can adapt to different mobile device screens.

Conch in responsive mode

ST Conch in 3 different layours

Download

Power of Omega theme

The idea of catering for various resolutions throw a range of resolutions and different screen sizes for designers and developers to now worry about. Thanks for Omega theme of Development Geeks, we can sucessfully implement a responsive Drupal theme which actually works.

For Drupal themers and developers, please follow the session of Omega team in the Drupal Conference London 2011: Adaptive, responsive, mobile first and Drupal theming for the future with HTML5, CSS3 and Omega. The session provides many great knowledges, tools and tips to implement repsonsive Drupal themes.

Please download and enjoy. We look forward to have feedbacks from you! 

Aug 12 2011
Aug 12

This project is a cooperation between Symphony Themes and ITFS (a local web development firm). Our Symphony team took care of the design part while ITFS was responsbile for the Drupal solution.

In this article, I will only mention about the design part.

About the customer

Exotic Voyages is a startup tourist team of committed people who have been in the tourism industry for almost 20 years. After a long time serving in the industry as a local partners of many US and Europe tourist agents, a group of specialists decided to establish a new business which aims at direct relationships with end-customers. Exotic Voyages offer customized trips to Vietnam, Laos, Cambodia and Thailand, luxury Indochina trips specialize in cultural visits, history, exploring spectacular landscape and natural wonders.

Design & Theming


Exotic Voyages homepage

Challenge: the client insisted that he does not want to have so many information. Since the services are luxury travels and targeted customers are mostly mid age, he requested that the layout should be simple and attractive enough for impatient readers. It should fit into an iPad screen without scrolling most of the time. Big screen users mind it, but we want something as clean as possible.

For design part, the client seek for helps from Symphony Themes designers. The outcome is a minium layout design reserving spaces for old painting like pictures. It brings a flavor of the ancient old time and somewhat mystery, urging people to discover.

The home page does not have many text, it is hard for SEO. However, to meet the client demands, we still preserve this layout.

Brochure

We also designed a brochure for Exotic Voyages. To display our brochure nicely, we adopt ISSUU. One problem is ISSUU turns the pdf brochure to flash, and it can not be displayed on iPad or iPhone. We hope there would be a coming solution to support all devices. 


Exotic Voyages brochure - Halong Bay

Conclusion

The project was a success with high satisfaction from the client for both the design part from Symphony Themes and the Drupal solution from ITFS.

Jun 04 2011
Jun 04

After ST Alphorn was ported to Drupal 7 theme last month, we proceed to do the same with ST Conch. Conch is also one of our popular free Drupal themes with thousand downloads.

Demo and download

Conch in responsive mode

ST Conch in 3 different layours

Download

As noted from previous post, the  Drupal 7 theme version of ST Conch is a theme only package, which means you have to build your Drupal 7 site and apply this theme. The Drupal 6 version is still an out-of-the-box package. We hope to build an out-of-the-box Drupal 7 package for Conch very soon, when all necessary modules are stable.

As everything is ready for us to make a full site package, ST Conch is available as out-of-the-box. Moreover, for this Drupal 7 theme version, we have redesign and add responsiveness features so the web layout can adapt to different mobile device screens, from smart phones and tablets to laptops and big screen computers.

We look forward to get feedbacks from you.

ST Conch layout

ST Conch layout

May 10 2011
May 10

It is already four months after Drupal 7 was released. We can wait no more, this is the Drupal 7 version of Alphorn, one of our popular free Drupal themes.

Alphorn is the first free Drupal theme that Symphony introduced 1.5 years ago. It is quite popular among Drupal community. We had many requests for the Drupal 7 theme version of Alphorn but it could not be released right after Drupal 7  was released. It is because we have to wait for some essential modules such as Skinr and Fusion.

Our desire is to build an out-of-the-box Drupal install profile with Drupal 7 core, modules, sample content and Alphorn theme. Four months of waiting, many modules are still in development and unstable. We lost patience and decided to build a theme only package first. Now it is time to make Alphorn as a full site package when all neccesary modules are ready. Better than version 1, Alphorn II is a responsive Drupal 7 theme. It adapts itself to different screen sizes such as smart phones, tablets, laptops and big screen computers.

Demo and download

Alphorn in responsive mode

ST Alphorn II in 3 different layours

As noted above, the  Drupal 7 theme version of Alphorn is a theme only package, which means you have to build your Drupal 7 site and apply this theme. The Drupal 6 version is still an out-of-the-box package. We hope to build an out-of-the-box Drupal 7 package for Alphorn very soon, when all necessary modules are stable.

We look forward to get feedbacks from you.

Jan 21 2011
Jan 21

I am in the Drupal market for almost 3 years. At the end of each year, I have to conduct a business review to set strategies for the coming year. One of the most important criteria to be reviewed is the market trend. I am always looking for a growth of Drupal and how it compares to other open source CMSs. This year, I decide to make a 3 year review of Drupal, Joomla and Wordpress from 2008 to 2010. This review does not mean to be a professional market analysis report, it is only my personal observations

Background

I am used to read the Open Source CMS Market share report from Water & Stone at the end of each year, starting from 2008. In 2010, when I had the report, I got an idea to compare 3 reports to exact valuable information about Drupal and other open sources.

The big 3 of the market is Drupal, Joomla and Wordpress. Almost of my customers demands from those three. My focus is Drupal, and I want to see after 3 years, where Drupal goes, where the other two have come up with. After comparing all figures, I saw only a small amount of information that were consistent over the years and I could extract some valuable information. I also searched for more information in Google about trends of those 3 CMSs.

Here are what I found.

Google Trend

See the graph of google search volume for the keywords: drupal, joomla and wordpress.

Google trends of Wordpress, Joomla and Drupal
Google trends of Wordpress, Joomla and Drupal

My observations are:

  • Joomla is falling
  • Wordpress is leading
  • Drupal does not increase. You see the trend is slightly decreased in 2010. Any idea? Is it because of new Drupal 7, so everybody stops and waits.

Freelancer Providers

Number of providers on Elance
Number of providers on Elance

2010 is the year of growth, all 3 CMSs witness a boom in service market according to the figures in Elance.com. The number of WordPress providers there increased 8 times, Joomla is quadrupled, Drupal is tripled. Wordpress is clearly number one solution in the web development freelancer market nowadays.

This awesome growth may indicate that, the open source field is attracting alot of players, both providers and customers. It also means: the marketing strength and the adoption of customers for open sources are significantly rising.

Job trend

While elance is for freelancers and mostly one off projects, let's have a look at the labour market. Job offers mean we are doing something regularly. That's when we hire developers. Companies use freelancer of one off projects, but when the job is getting heavy, they will need long term employees.

Job market trends
Job market trends, from Indeed

As you can see, Drupal job increase rate is 3 times faster than WordPress and Joomla. It indicates Drupal is getting more and more interest in the enterprise environment.

Bonus: Drupal, Wordpress and Joomla developer salary. According to this source, average Drupal salaries for job postings nationwide are 11% higher than average Wordpress salaries.

Conclusion

After collecting data and observe, I have some points here:

  1. Overall, open source technology has gained more power. It is reflected by more service providers and more customers.
  2. For public interest, Joomla is falling, Wordpress is rising, Drupal does not increase. I hope after Drupal 7 is released this January, it will create a booming trend and close the gap between the other two.
  3. Wordpress dominates the Freelancer market, but Drupal has an amazingly high increase rate in the labour market.

These trends is making my expectation that 2011 is a promising year for Drupal market.

Jan 06 2011
Jan 06

On Jan 5th 2011, the Drupal community all over the world celebrates the release of Drupal 7. We all expect that its features are significantly improved. But the greatest enhancement, in my opinion, is the User Experiences. As a theme developer, I was longing for this event, because it can bring Drupal closer to more people. Hopefully, I will write an entry for my experiences with the  new Drupal soon enough.

Anw, this is my Vietnamese translation of the Press release (which has been published here)  

Drupal ?ã phát tri?n thành m?t n?n t?ng ???c coi là m?nh m? nh?t ?? xây d?ng các trang web xã h?i và ng? ngh?a, ??ng th?i tr? nên d? s? d?ng h?n bao gi? h?t.

KORTRIJK, BELGIUM & CHICAGO, IL — Ngày 5 tháng 1 n?m 2011 - C?ng ??ng Drupal trên toàn th? gi?i cùng v?i Hi?p h?i Drupal ?ón chào vi?c công b? chính th?c ra m?t Drupal 7, n?n t?ng web ???c ?ánh giá là m?nh nh?t hi?n nay. Drupal là m?t n?n t?ng mã ngu?n m? ?? qu?n lý n?i dung website, hi?n ?ang ???c ?ng d?ng trên hàng tri?u website và các ?ng d?ng web. Nh?ng ?ng d?ng tiêu bi?u là trang web c?a Nhà Tr?ng c?a t?ng th?ng M? WhiteHouse.gov và nhi?u trang web c?a các ngh? s? âm nh?c c?a hãng Warner Media Group. Drupal phiên b?n 7 [D7] mang ??n công ngh? web m?i nh?t và các c?i ti?n ?áng k? ??i v?i ng??i s? d?ng. Drupal 7 c?ng ?ang ???c chính th?c trong các site có kh? n?ng ch?u t?i r?t cao, nh? trang Examiner.com [http://examiner.com], ??ng trong top 100 website c?a M? và t?ng l?u l??ng 19% t? tháng 10 t?i tháng 11, v?i h?n 22.4 tri?u l??t ng??i s? d?ng hàng tháng.

"N?n t?ng Drupal 7 m?i này cung c?p các tr??ng API, l?u tr? và cache thay ??i, cho phép s? d?ng Mongo nh? là gi?i pháp 'Không SQL' cho các ?ng d?ng ch?u t?i cao và có kh? n?ng m? r?ng. B? khung ki?m th? ??n v? m?i ??m b?o ph?n lõi ?n ??nh, ?ã ???c ch?ng minh qua nh?ng l?n h?p nh?t lõi h? th?ng khi phát tri?n d? án c?a chúng tôi. Trang Examiner.com, v?i l?u l??ng s? d?ng c?c l?n và kh? n?ng xu?t b?n t?c thì, s? r?t khó kh?n th?m chí không th? phát tri?n ???c trên các phiên b?n tr??c ?ây c?a Drupal" ông Jim Davidson, ch? t?ch c?a Examiner.com nói.

D? án phát tri?n Drupal 7 k?t h?p gi?a các ch? d?n c?a các chuyên gia công ngh?, cùng v?i ph?n h?i c?a c?ng ??ng, ?? làm cho vi?c s? d?ng ???c d? dàng h?n. Vi?c c?i ti?n cách th?c s? d?ng bao g?m qu?n lý d? dàng h?n, qu?n lý các c?p nh?t, truy xu?t và t?o n?i dung.

Angie Byron (hay Webchick), ng??i b?o trì phát tri?n lõi c?a Drupal 7 kh?ng ??nh "Drupal 7 c?i ti?n giao di?n ng??i dùng, nâng cao truy xu?t, qu?n lý hình ?nh t?t h?n, h? tr? các d? li?u meta ?a n?i dung, an toàn b?o m?t, kh? n?ng m? r?ng và nâng cao trao ??i c? s? d? li?u. Drupal 7 v??t qua 30 nghìn l??t ki?m tra ?? ??m b?o tính ?n ?inh. Tóm l?i, ?ây là m?t b??c ti?n to l?n cho Drupal và cho t?t c? các nhà phát tri?n website, và chúng tôi r?t h?nh phúc vì có th? chính th?c gi?i thi?u Drupal 7 cho th? gi?i."

Drupal là ph?n m?m mã ngu?n m? ???c s? d?ng b?i h?n n?a t? ng??i trên 200 qu?c gia và 189 ngôn ng?. G?n 1000 thành viên c?a c?ng ??ng Drupal ?ã và ?ang ?óng góp tr?c ti?p phát tri?n lõi Drupal 7 và các module kèm theo.

"Drupal ?ã t?ng tr??ng nh? m?t hi?n t??ng t? phiên b?n 6. Phiên b?n 7 này t?o ra b??c c?i ti?n l?n cho vi?c s? d?ng, t?c ?? và ch?c n?ng”, Dries Buytaert, nhà sáng l?p và tr??ng nhóm phát tri?n Drupal cho bi?t. “Chúng tôi m? ra m?t ch??ng m?i trong vi?c phát tri?n web, và cùng v?i m?i ng??i trên th? gi?i ?óng chào s? ki?n ra m?t Drupal 7 vào ngày 7 tháng 1 n?m 2011"

Nh?ng ch?c n?ng quan tr?ng m?i c?a Drupal 7

  • C?i ti?n giao di?n s? d?ng ?áp ?ng nhu c?u c?a ?a s? 80% ng??i s? d?ng, cho phép th?c hi?n các công vi?c th??ng g?p d? dáng h?n, các thi?t l?p m?c ??nh thông minh, phân quy?n cho ng??i t?o n?i dung và ??n gi?n hóa vi?c qu?n lý chung.
  • H? tr? trong lõi các ch?c n?ng hình ?nh nh? thay ??i kích c?, c?t ?nh.
  • Ch?c n?ng ki?m th? ???c xây d?ng s?n và t? ??ng hóa cho m?i b?n vá giúp cho h? th?ng ?n ??nh lâu dài.
  • Qu?n lý nâng c?p các phiên b?nchuy?n ??i t? Drupal 6 sang Drupal 7.
  • T?c ?? và kh? n?ng m? r?ng t?t h?n b?ng công ngh? cache tiên ti?n, m?ng truy?n d? li?u (CDN) và sao chép d? li?u master-slave.
  • Các tr??ng tùy ch?nh trong lõi, các tr??ng d? li?u cho m?i lo?i n?i dung và cho c? ng??i dùng, phân lo?i cùng v?i h? tr? và ?a ngôn ng?.
  • L?p c? s? d? li?u tóm t?t cho phép s? d?ng nhi?u lo?i CSDL nh? Maria, DB, Microsoft SQL, MongoDB, Oracle, MySQL, PostgresSQL ho?c SQLite.

"T?i SubHub, chúng tôi giúp m?i ng??i ??t l?i nhu?n t? n?i dung tr?c tuy?n c?a h?. M?t n?m tr??c, chúng tôi quy?t ??nh b?t ??u v?i Drupal 7 ?? phát tri?n n?n t?ng qu?n lý n?i dung th? h? m?i c?a chúng tôi", Jamie Wiseman, tr??ng nhóm phát tri?n c?a SubHubLite t?i Cardiff, Wales, V??ng qu?c Anh nói. "Kh? n?ng linh ho?t c?a Drupal giúp chúng tôi xây d?ng ???c h? th?ng chúng tôi h?ng m? ??c".

Drupal n?i ti?ng trên th? gi?i vì m? r?ng h? tr? ?a ngôn ng? và h? tr? ng??i tàn t?t, nh? ?ã ???c ch?ng nh?n t?i Hà Lan là thích ?ng 100% v?i Yêu c?u ti?p c?n n?i dung web (WCAG 2.0) c?a t? ch?c World Wide Consortium (W3C)

H? tr? công ngh? web ng? ngh?a ?a n?i dung (RDFa) trong lõi c?a Drupal 7

Drupal 7 ?ang tiên phong trong vi?c ??y m?nh ch?p nh?n RDFa (chu?n v? Khung miêu t? ?a n?i dung trong thu?c tính c?a W3C). Nh? chúng ta ?ã bi?t, Google và Bing ph? thu?c vào các d? li?u t? ??ng l?y t? các trang web khác.Thi?t k? c?a Drupal 7 nhúng d? li?u meta ng? ngh?a vào lõi, giúp cho n?i dung c?a các trang web ?ng d?ng Drupal 7 d? dàng ???c các công c? tìm ki?m l?c và phân tích. RDFa cung c?p thêm thông tin cho các công c? tìm ki?m, nh?ng thông tin không hi?n th? cho ng??i dùng nh? là kinh ?? và v? ?? c?a m?t ?i?m trên b?n ??, hay cung c?p chu?n th?i gian chu?n ISO cho t?ng ??a ph??ng và hi?n th? k?t qu? tìm ki?m cho t?ng qu?c gia.

Theo Dries, nhà sáng l?p Drupal, "gi?i thi?u công ngh? ng? ngh?a vào lõi c?a Drupal s? là ?óng góp l?n cho t??ng lai c?a web."

V? Hi?p h?i Drupal

Hi?p h?i Drupal là t? ch?c phi l?i nhu?n h? tr? c?ng ??ng Drupal b?ng tài tr?, h? t?ng, t? ch?c s? ki?n, qu?ng cáo và phân ph?i. ???c h? tr? b?i các thành viên cá nhân và t? ch?c, Hi?p h?i s? d?ng các ngu?n l?c ?? giúp ??y m?nh phát tri?n Drupal.

Hi?p h?i Drupal (association.drupal.org) có tr? s? ??t t?i B?. Xin tham kh?o ho?c t?i Drupal t?i Drupal.org [http://drupal.org]

### Drupal là th??ng hi?u c?a Dries Buytaert, tham kh?o b?n quy?n Drupal t?i Drupal.com.

Orginal content:  http://drupal.org/node/1015696

Jul 17 2010
Jul 17

Drupal ImageCache is a powerful Drupal module that helps you resize and crop images. You can use ImageCache with uploaded images, user profile pictures and a content type with CCK and ImageField. This article is to show you how to use ImageCache in Drupal.

Why using ImageCache? Obviously, to make your website look good. Suppose I create a view for a list of my blog entries. I will need all thumbnail images of those entries to have the same size, or at least the same width, so my blog does not look messy. To set the same format for those thumbnails, I use the Drupal ImageCache module.

Create a preset for images

The first step is to create a preset. When you want different formats for different content, for example, thumbnails images and user profile pictures, you need to create different presets.  

  1. Go to Administer -> Site Building -> Image cache.
  2. Label a new namespace preset: for example "blog" and click on the 'Create preset' button.
  3. Choose an action: scale, resize, or crop. Scale works well when you want to keep the aspect ratio, you only need to enter one of the dimensions in this case. Resize will allow you to produce images of any arbitrary size, even if that results in a distorted image. Crop will allow you to display only part of the image.
  4. After that, give the preset a width and height, you can use a percentage or enter an absolute value in pixels.

Create preset ImageCache

When you have the preset, you can apply it to many cases: a Drupal content type with CCK and ImageField, a View and user profile pictures.

Using images cache with CCK and ImageField

When you’ve successfully created our preset namespace, we need to edit the CCK field to automatically resize the images. 

  1. Go to Administer -> Content Management -> Content Types.
  2. Click on the configure link for the content type that contains the content type that has the field you want to configure.
  3. Then just select display fields and set Teaser field to the desired preset. Click on 'Submit' (in this case "blog"). You could also edit Full field if you wanted the images to be resized even when browsing full content.

ImageCache and CCK

Using images cache with View

When you create a view which has the image field, you can use ImageCache to make all images in your view have the same format.

  1. Go to Administrator -> Site building -> Views.
  2. Click to edit link to open a view.
  3. Click to image field, at format select box, choose preset of imageCache. For example: image blog link to node.
  4. Click update button.

ImageCache and View

Using images cache with user profile picture

Drupal’s core profile module gives you some basic image resizing capabilities, but that’s not helpful enough if you want to be able to use different sizes of user pictures in different parts of your site. Use ImageCache Profiles in this case! After installing this module, follow these steps:

  1. Go to admin/user/settings to enable user pictures
  2. If setting a default picture it should use a relative url path (ex. sites/default/files/default-picture.png) 
  3. Set up Picture settings at bottm of User Settings page: 
    • Set picture maximum dimensions to 1600x1400
    • Set picture maximum file size to 1024
    • Set your picture guidelines text to: "Photo must be larger than 200x200 pixels." To prevent upscaling, these dimensions should be the dimensions of your largest preset.
  4. Select the ImageCache presets (added in the first part of this article): 
    • Profile picture preset: Select the ImageCache preset to set the user picture size on a user's profile page
    • Comment picture preset: Select the ImageCache preset to set the user picture size within comments
    • Default picture preset: Select the ImageCache preset to set the default user picture size throughout the site
ImageCache and user profile picture

Good luck.

 

Related posts

Jun 28 2010
Jun 28

In the previous blog post, we have introduced some basic concepts of Taxonomy in Drupal. Now we will extend this topic to Taxonomy in Menus and Views.

Using terms in menus

Sometimes you want your navigation menu to display terms that you have created. Like this Symphony website, I created a term called "Theme", because this is a Drupal theme website. So I need to put this term to my main menu.

The menus on your site can call for items that match specific taxonomy terms, ie, terms you've named your categories. When you create a new term, Drupal assigns it a number. To see your term's number, hover over your term's name in the list terms. You'll see the number.

To create a taxonomy menu item

  1. On the menus page, select add item, and fill taxonomy/term/1 in the path field.
  2. If the term "sonatas" is term 1, this would call for all the nodes of that category.
  3. If the term "Bach" is term 2, this could call for only those sonatas written by Bach: taxonomy/term/1,2
  4. Or if Brahms is term 3 and this will call for everything that has to do with either Bach or Brahms: taxonomy/term/2+3
  5. If you are using a hierarchical taxonomy, and want all nodes tagged with child terms to show up also, you can create an URL link like taxonomy/term/2/2 where the second parameter is the depth that the tree will be recursed into, or taxonomy/term/2/all for all child terms. 

Display contents with the same layout for all terms of a Vocabulary by view module 

By default, Term link to category pages (taxonomy/term/[tid]). I found that category pages are more useful than custom views because you can control fields. You can replace the default category pages with a customized view by following steps: 

  1. Go to view list page at admin/build/views and create a new view.
  2. At Fields settings: add Node: Title, Node: body.
  3. At Filtter setting: add Node: type Story, Node publish yes
  4. Add Page Display.
    • Add path: taxonomy/term/%
    • At Arguments setting, add Taxonomy: Term ID (or Taxonomy: Term ID with depth) and config it like this image:
drupal_taxonomy_view

If you want to create two category pages for Terms of two Vocabulary which have diffirent layout, you can add 'taxonomy1/term/%' for path of the first views and 'taxonomy2/term/%' for path of the second views. And theme use 'taxonomy redirect' module to redirect them to the new path.

Jun 23 2010
Jun 23

Taxonomy is one of the best features that make Drupal superior than many other CMSs. This is article, we will introduce basic concepts of taxonomy in Drupal.

For new Drupal users, Drupal's Taxonomy is difficult to understand at first. But it doesn't have to be. “When all the fancy language is stripped away, Taxonomy is about one thing: organizing your site by attaching descriptive terms to each piece of content”.

Taxonomoy: Vocabulary and Term

In Drupal, Taxonomy is a method that administrators use to organize website content. You can set up a taxonomy that allows users to add terms (also known as tags or metadata) to content. Taxonomy is created from 'Vocabularies' that contain related 'Terms'. A vocabulary is a set of terms and terms are just another word for categories.

Each category group, or vocabulary, can contain multiple category entries, or terms, for tagging content. For example, the vocabulary Vehicle could include the following categories and subcategories:

  • Railroad
    • Train
    • Tram
  • Land
    • Automobile
      • Sedan
      • 4WD
      • Crossover
    • Train
    • Motocycle
  • Water
    • Boat
    • Ship
    • Submarine

Note that the term Train appears within both Railroad and Land. This is an example of multiple parents for a term. Just select both parents when creating the term Train.

Working with vocabularies

To add new vocabularies, using the add vocabulary tab at the top of the page. Or go to: admin/content/taxonomy/add/vocabulary

  • Choose a name for your vocabulary.
  • Add a description.
  • Choose content type: "story", "book page" or whatever. Then when users create content of a particular type, they'll see a list of your vocabulary terms that go with it. Users can then categorize their post by choosing from the
  • If you allow "free tagging", when your users create content they can make up their own terms as they go along, instead of having to choose from a list.
  • By choosing "multiple select", this allow your users to put a post into more than one category at once by tagging it with more than one vocabulary term.
  • Require option is that when your users create content of a certain "content type" they assign at least one of this vocabulary's terms.
  • You can add "weight" to it to specify the order of appearance.

This is screenshot:

Taxonomy Drupal vocabulary
Taxonomy Drupal vocabulary

Working with terms

To view or manage the terms of each vocabulary, click on its list terms link. On the list terms page you can edit each term by clicking the edit link. Now, on the edit term page you have several kinds of choices.

  • Assign your term a name.
  • Choosing the term's "parent".
  • Select term to be related (you can select multiple terms by using the standard conventions of your operating system, like shift-click and control-click).
  • List synonyms for your term.
  • Add weight for term.

This is screenshot:

Taxonomy Drupal term
Taxonomy Drupal term AttachmentSize 41.95 KB 17.78 KB
May 28 2010
May 28

There are many reasons to integrate your Drupal site with Google map (GMap). You can create a business directory with company contacts and locations, or a list of local restaurants with directions. Good news is that it can be achieved using Gmap and Location Drupal modules. And we will show you how to use Gmap and Location modules in Drupal in this article.

Demo of GMap in a Drupal site

Let's take our Drupal theme ST Pipe as an example. Basically it is a restaurant review website. It shows restaurant information such as images, contact details and a Gmap block to show directions to the location. Very nice way to make the content more appealing to users.

Drupal Gmap and Drupal Direction in ST Pipe
Restaurant detail page with GMap

The following section is how we implement this feature in Drupal.

How to use Drupal Gmap and Location modules

  1. Go to admin/build/modules page, enable Location, Gmap, and Gmap Location.
  2. Go to admin/settings/location, enable "Display of Locations", and check "Use a Google Map".
    gmap drupal direction configure location
  3. Back to admin/settings/gmap, paste in your API key, scroll to the bottom of the form, and save the configuration.  (You must do this before the other configuration options will work.)
    gmap drupal direction configure gmap
  4. On the same page, set your Default Map Settings - this is for zooming, marker or etc. You can ignore it for now.
  5. Go to admin/settings/gmap_location and adjust the settings for your user and node maps.  If you're not going to use one or the other, just ignore it.
  6. Go to admin/user/permissions and set the permissions for the gmap_location and location modules. 
  7. Go to admin/content/types, edit each content type that you want to show location information, and turn on the Locative Information settings. gmap drupal direction configure location content type
  8. Edit or create a new node of a type that you want to set location. Under Location, click on the map to add a marker.  Pick up and drop the marker repeatedly to zoom in so you can place it more precisely.  (This is a lot quicker than zooming and panning)
  9. Go to admin/build/block, assign Location map block into Content region. In ST Pipe, we asign it into "Node Location" region.
    gmap and drupal direction configure location block

This is done. Hope you have a great time with Drupal Gmap and Location modules.

AttachmentSize 22.24 KB 13.94 KB 30.02 KB 28.11 KB 32.21 KB
Apr 07 2010
Apr 07

Drupal has some very good modules to deal with the 403 - 404 error pages. This article is about how to use Drupal modules to customize 403 and 404 pages.

Why should we bother? Among pages of a website, the 403 (access denied) and 404 (page not found) error page seems to have least attention. However, it comes a little bit annoying for users to see an unwelcome page. I found frustrating when doing google for some keywords, clicked to a link but ended up with a page not found. Some times it's caused by system changes or article archiving. But for any reason, this could cause users to leave the site immediately.

Here are some solutions which Drupal provides for web administrators:

1. Redirect your error page

The simplest thing is to redirect all 403 and 404 error page to different pages of your website which contains more useful content.

This link /admin/settings/error-reporting is where we can set URL for each 403 and 404 page.

2. Search404 module

Search404 performs a search on keywords in the URL, for example, if a user goes to http: //example.com/does/not/exist, this module will do a search for "does not exist".

I have tried this module but opt it out. Many of my dead link is like /node/xxxx, so performing search for those keywords are useless.

3. Make your own custom error page

Important update !!!: since Drupal 7, custom error page is supported by Drupal core. You can find it under Admin - Configuration - Site information. Please see my detail guide.

Drupal 7 error handling

For Drupal 6, the CustomError module provides many handy options, you can change the page title and make a HTML custom page for error notification.

After installing this module, first you go to Error report section and change the 403 and 404 URLs to customerror/403, customerror/404 respectively.

Then you can go to /admin/settings/customerror to make your own HTML error page. Some thing funny could relax users and we can provide more useful information of the site.

Drupal 403 404 custom pagesSymphony Themes 404 Page

If you want more advanced options, CustomError allows you to execute code within the error page. Follow this link to Nik's blog, he has very nice pieces of code to provide different messages to different type of users (visitors or authenticated users).

4. Fast 404

One possible strategy to deal with 403 and 404 errors is delivering a message as quick as we can to save resources for other customers. It is particularly useful for high traffic website with limited resources (shared hostings, VPS ...).

Conclusion

I faced this issue when customizing URLs for better reading and leave many links to death. The problem is I have placed those URLs in blogs, forums or somewhere else. Many people following them could suffer from 404 error page.

Thanks to CustomError, I have a nice page that does not push my visitors away.

Jan 12 2010
Jan 12

This article is a Drupal tutorial on how to create Event content type in Drupal.

Let say I'm building a website for a corporate, or an organzition. It should have slideshows, news, pages, Twitter, contact form and so on. Well one more thing, events. Organizations would gladly to have an event feature so they can announce upcoming activities, business owners also want to have their customers well informed of their campaign. So Event is a important piece of a website.

We see there is a high demand for event feature and we have created ST Duduk (highly for event oriented pages such as clubs) and ST Gemshorn. Anw, creating Event content type is not a simple task, so I think it's good to show our step-by-step tutorial for this issue here  

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web