Pages

Saturday, February 22, 2014

Display Suite and Views Together in Drupal

Display Suite is one of our very favorite Drupal modules.
We love how easy it is for even new Drupal users to control their content layouts with Display Suite.
In this tutorial, we'll show you how you can use Display Suite together with Views. This allows you to create complex pages, controlling both the output and layout, without knowing any code.
  • Go to Structure > Content types and click Manage Display next to a content type.
  • Unless you change it, you're going to be redesigning the "Default" view mode for this content type.
media_1386614981920.png
  • You'll see the Display Suite options at the bottom of this screen.
media_1386614119733.png
  • Choose the Select a layout option. In this example, I choose Two column.
media_1386614143932.png
  • Click Save.
  • The fields can now be placed into Left and Right regions to reflect the two column layout:
media_1386614450017.png
  • Click Save to complete the Display Suite changes.
  • Go to Structure > Views and edit the view that you want to use with Display Suite.
  • In the Format area, click the Show area, as shown below (note that Display Suite doesn't work with all Views formats)
media_1386614212718.png
  • Choose Display Suite as an option
  • Click Apply (all displays)
media_1386614259728.png
  • Choose the options you want for Display Suite. The most important setting is the view mode - make sure you select the same one as did at the start of the tutorial.
media_1386614295059.png
  • Click Apply (all displays)
  • You should now see that your two column layout has been applied to your view:
media_1386614486586.png

4 Social Sharing Modules for Drupal

If you don't give your site visitors an opportunity to share your webpages, you're missing out on an opportunity for others to hear about your great content.
Drupal has several modules that allow you to add Facebook, Twitter, Linkedin and other social buttons.
In this blog, we're going to introduce you to four different options for adding social sharing to your Drupal site:
  • Service Links
  • Social Share
  • AddThis
  • AddToAny

ServiceLinks Module

media_1386198659455_1814f30195a25737958403ee9188e8ac.png
There are so many options available in this module, we could do a full blog on just this one. But this is about comparing so let's cover the basics.
  1. Download and install https://drupal.org/project/service_links.
  2. Enable the Service links module and at least one of the Service links services modules that shipped with this module. I enabled Widget services.
  3. Configure at admin/config/services/service-links. This is where you decide the type of node that can be shared and if you want the links at the bottom of the node).
  4. Select the widgets (Facebook, LinkedIn, etc) here admin/config/services/service-links/services.
  5. Configure widgets here admin/config/services/service-links/widgets.
  6. If you want the buttons in a block, visit the blocks admin page and configure either/or the node block or the block designed to allow non-node pages to be shared.

AddThis Module

media_1386199961392_cacca17d067e0c66ec70066905411881.png
This module taps into the Addthis.com service. You don't need an account to make this work.
  1. Download and install https://drupal.org/project/addthis.
  2. Enable AddThis and AddThis Displays.
  3. Configure at admin/config/user-interface/addthis. This is where you select the social network services you want to make available.
  4. Add an AddThis field to the content types if you want the link to appear in the content type.
  5. Manage the display to make the icons to show and hide the label.
  6. If you want the buttons in a block, visit the blocks admin page and configure the AddThis block. This will share the non-node pages.

AddToAny Module

media_1386200595480.png
This module has the fewest options but it's easy to set up.
  1. Download and install https://drupal.org/project/addtoany.
  2. Enable AddToAny.
  3. Configure for all content types at admin/config/system/addtoany. The screenshot shows the button in the Link variable but you can include where "Bookmark/Search ..." is located. This module does not appear to give you the option to choose which networks you want users to be able to access.
  4. If you want the buttons in a block, visit the blocks admin page and configure the AddToAny block. This will share the applicable nodes and the homepage. It will not share non-node pages.

Social Share Module

media_1386201073294.png
I like the default buttons that come with this one.
  1. Download and install https://drupal.org/project/social-share.
  2. Enable Social Share.
  3. Configure at admin/config/content/social-share.
  4. Configure networks and label (if you want one) on each content type in the Social Share vertical tab.
  5. If you check the box to make a block, it will be automatically placed in a region ... at least that's what happened in Bartik. It showed up in the Header region. Configure the block to set the networks. FYI, the block recognizes non-node pages.

Sending HTML Emails from Drupal Webform

The Webform module is one of the most popular modules in Drupal.
Webform is relied upon for everything, from contact forms, to donations to event registrations.
By default, Webform sends emails in plain text. In this tutorial, we're going to show you how to send Webform emails in plain text, which allows you choose different layouts or designs.
media_1386859816684.png
  • Go to Configuration > Mime Mail.
  • You can choose Full HTML under the "E-mail format" setting.
media_1386859771575.png
Now it's time to setup your webform.
  • Find your webform.
  • Click the Webform tab and then click E-mails.
  • Click Add.
  • Enter the email addresses you want to send webform results to.
media_1386859674331.png
  • Scroll down to the E-mail template area.
  • Check the "Send e-mail as HTML" box.
  • Click Save e-mail settings and the template box should now show HTML:
media_1386860400793.png
  • Check the results of your new HTML email:
media_1386860307093.png

Decimal, Float or Integer in Drupal Fields?

Drupal comes with 13 fields and several of them deal with numbers.
Newcomers to Drupal can become confused about the difference because there are 5 different number fields available:
  1. Decimal
  2. Float
  3. Integer
  4. List (float)
  5. List (integer)
In this tutorial, we're going to explain the difference between those 5 number fields and explain when you would use each one.

Integer

Integer is the easiest table of number field to understand. Integer is another word for whole numbers.
Integers are whole numbers such as 1, 2, 3, 10 or 500. This is ideal for numbers such as ages or years.
There are no settings at all for Integer fields:
media_1387475209862.png
You can't enter any spaces, letters or any punctuation into Integer fields.
Things such as spaces, commas or decimal points are added from the Manage Display tab:
media_1387475385532.png

Decimal

The Decimal field allows numbers with fractions.
You can decide on three settings for the field, including:
  • Precision: the total number of digits, both before and after the decimal point.
  • Scale: the number of digits after the decimal point.
So in the example below, a Scale of 2 would be ideal for storing prices. This is because there can only be two numbers to the right of the decimal point in prices such as $32.89
media_1387475296029.png
As with all of the number fields, you can't enter any spaces, letters or any punctuation into Integer fields.
Things such as spaces, commas or decimal points are added from the Manage Display tab:
media_1387475358659.png

Float

Float is definitely the most confusing of the umber fields.
Here's our simple rule: if you don't know what a floating point number is, you don't need to use the Float field.
However, for those of you that don't know but are curious, here's a quick explanation:
"Floating point" is a term used in computer programming. Basically, floating point numbers are numbers that contain floating decimal points.
Here's the best, simple explanation I've read about why floating points are used: http://floating-point-gui.de/formats/fp/
"Since computer memory is limited, you cannot store numbers with infinite precision, no matter whether you use binary fractions or decimal ones: at some point you have to cut off. But how much accuracy is needed? And where is it needed? How many integer digits and how many fraction digits?
    • To an engineer building a highway, it does not matter whether it’s 10 meters or 10.0001 meters wide - his measurements are probably not that accurate in the first place.
    • To someone designing a microchip, 0.0001 meters (a tenth of a millimeter) is a huge difference - But he’ll never have to deal with a distance larger than 0.1 meters.
    • A physicist needs to use the speed of light (about 300000000) and Newton’s gravitational constant (about 0.0000000000667) together in the same calculation.
To satisfy the engineer and the chip designer, a number format has to provide accuracy for numbers at very different magnitudes. However, only relative accuracy is needed. To satisfy the physicist, it must be possible to do calculations that involve numbers with different magnitudes.
Basically, having a fixed number of integer and fractional digits is not useful - and the solution is a format with a floating point."
Here are the field settings for a Float in Drupal. The only thing you can choose is whether to use a decimal point or a comma.
media_1387475251888.png
The Manage Display settings are the same as for Decimal.
media_1387475326005.png

List (float) and List (integer)

Both of these fields allow you to create a list of pre-defined choices. Unlike the other 3 fields, people will not be allowed to enter their own numbers.
media_1387477816235.png
If you choose "Check boxes/radio buttons", then this is how the options will show. If you want to remove the N/A option, set the field to be required.
media_1387477879075.png
If you choose "Select list", then this is how the options will show:
media_1387477972391.png