RadiantCasts have moved

Posted by cristi on August 26, 2010

I see that a lot of you still end up here searching for RadiantCasts. Don’t worry, we didn’t stop making them, we just moved them to Radiant CMS blog. Or you can watch them over at our channel on blip.tv.

Episode 5 - Radiant Database Mailer Extension

Posted by cristi on March 16, 2010

In the fifth episode of Radiantcasts you’ll see how to use the Radiant Database Mailer Extension - an extension for Radiant CMS that adds database persistence to emailed forms. It works on top of the Radiant Mailer extension and the fields recorded to the database are user defined. It also saves any email attachments using paperclip and you can export the data in CSV or XLS formats

Tip: watch in full screen

Content

  • notes on installation
  • notes on configuration and how to best use the features of the extension
  • presenting how to save a basic ‘contact-us’ form

Resources

Episode 4 - Radiant Mailer Extension basic usage 3

Posted by cristi on December 12, 2009

In the fourth episode of Radiantcasts you’ll see how to use the Radiant Mailer Extension - an extension for Radiant CMS that allows you to create ‘contact us’ and other mail-bound forms.

Tip: watch in full screen

Content

  • short note on installation
  • presenting a basic ‘contact-us’ form
  • different options for validating the mailer form
  • a tip on how to use two mailer forms on the same page

Resources

Episode 3 - Radiant Globalize2 Compatibility Issues

Posted by cristi on November 02, 2009

In the third episode of Radiantcasts you’ll see how to address some compatibility issues between Globalize2 Extension and some other extensions. The screencast is focused on presenting how to install and use Globalize2 Paperclipped Radiant Extension which allows you to easily translate Paperclipped assets using the admin interface.

Tip: watch in full screen

Resources:

Episode 2 - Radiant Globalize2 Extension 5

Posted by cristi on October 25, 2009

You have here the second episode of Radiantcasts

In the following screencast you’ll see how to install and use the Globalize2 Extension. This extension allows you to easily translate the content of your site into any number of languages. It uses the Globalize2 Rails plugin based on the I18N API available in Rails since version 2.2

Tip: watch in full screen

Resources:

Episode 1 - Radiant Sitemap XML Extension 4

Posted by cristi on October 20, 2009

This is the first episode in a series of Radiant CMS screencasts we are launching: Radiantcasts

In the following screencast you’ll see how to install and use the Sitemap XML extension and why should you use it.

Tip: watch in full screen

Resources:

Radiant CMS I18n for site content with the Globalize2 extension

Posted by cristi on October 16, 2009

The Globalize2 extension for Radiant CMS allows you to easily translate the content of your site into any number of languages.

It uses the Globalize2 Rails plugin based on the I18N API available in Rails since version 2.2

Features:

  • Provides the ability to translate your pages (title, slug, breadcrumb, description, keywords) using the Radiant admin interface.
  • Provides the ability to translate your snippets and layouts using the Radiant admin interface.
  • Radius tags for accessing the locales and translations.
  • Possibility to completely delete the translation for a page.

Check out the source code on github.

For installation and configuration details visit the Radiant Globalize2 Extension documentation page.

To translate your Paperclipped assets, you can use Radiant Globalize2 Paperclipped Extension:

Features:

  • Provides the ability to translate Paperclipped assets (title and caption) using the Radiant admin interface.
  • Altered Paperclipped Radius Tags which take into account the locale

Check out the source code on github.

For installation and configuration details visit the Radiant Globalize2 Paperclipped Extension documentation page.

Our extensions are ready for Radiant CMS 0.9

Posted by cristi on October 15, 2009

The new Blade interface from Radiant is awesome, but you need to modify a little your extensions. We did that and here’s what we got:

Radiant Custom Fields extension (github repository):

An extension that allows you to add custom fields to pages.

radiant-custom-fields-extension

Radiant Database Mailer extension (github repository):

An extension that adds database persistence to emailed forms. It works on top of the Radiant Mailer extension and the fields recorded to the database are user defined.

radiant-database-mailer-extension-index

radiant-database-mailer-extension-show

Radiant Member Extension (github repository):

An extension that adds members support to Radiant CMS. Using this extension you can restrict access to pages on your public site to be accessible only to members that have an account. It is based on Restful Authentication System, so the member model has almost the same attributes. The members can be added or edited only from Radiant Admin.

radiant-member-extension-index

radiant-member-extension-edit

Radiant Paginate extension (github repository):

An extension that provides pagination support using Will Paginate.

Radiant Sitemap XML extension (github repository):

This extension automatically creates a XML sitemap for your site.

Radiant Stereotype extension (github repository):

An extension that adds templating support.

Radiant Super Export extension (github repository):

An extension that provides portability to your project by allowing you to export and import the records in the database and making it easy to manage them with a source control tool like Git or Subversion.

Radiant Tiny Paper extension (github repository):

An extension that adds Paperclipped based Tiny MCE support to Radiant CMS. Provides a Rich Text Editor filter and allows you to edit the content using the TinyMCE editor. It also provides an Image and File browser to help you manage the Paperclipped assets.

radiant-tiny-paper-extension-image-browser

radiant-tiny-paper-extension-file-browser

Radiant Sitemap XML Extension

Posted by cristi on August 30, 2009

Announcing the Radiant Sitemap XML Extension.

Features

  • Allows you to specify in Radiant admin which pages appear in the sitemap;
  • Gives you the possibility to set the change_frequency and priority per page.

Check out the source code on github.

For installation and configuration details visit the Radiant Sitemap XML Extension documentation page.

Radiant Mailer Extension client-side validation 1

Posted by cristi on August 30, 2009

Forms validation on the client-side is very important as it saves time and bandwidth, and gives you the option to point out to the user what they’ve done wrong in filling out the form. Having said that let me present you the way we do client-side validation of the email forms created using Radiant Mailer Extension.

First, of course you will need to set up a new Radiant project and install the Radiant Mailer Extension. You can checkout the repository I made for this post on github.

We’re using Andrew Tetlaw’s validation.js. You can download it here.

Now, that you have the project ready, let’s create a Contact page in Radiant. This is a Mailer page so you need to create a mailer page part with the following content:

  
    subject: From the website of Whatever
    from: noreply@example.com
    redirect_to: /contact/thank-you
    recipients:
      - one@one.com
      - two@two.com
  

Create the email form:

  
    <div id="flash" style="display:none;"></div>
    <r:mailer:form id="mailer-form">
      <label for="name">Name:</label><br/>
      <r:mailer:text name="name" /><br/>

      <label for="email">Email:</label><br/>
      <r:mailer:text name="email" /><br/>

      <label for="message">Message:</label><br/>
      <r:mailer:textarea name="message" /> <br/>

      <input type="submit" value="Send" />
    </r:mailer:form>
  

Great, we have the email form ready and the Radiant Mailer configured to use. Let’s start adding the Javascript. In your layout, link to the prototype.js and validation.js.

  
    <script type="text/javascript" src="/javascripts/prototype.js"></script>
    <script type="text/javascript" src="/javascripts/validation.js"></script>
  

In order the activate validation on the form you need a little Javascript snippet the will pass the form’s id attribute and will show the flash. You can put it in the layout also:

  <script type="text/javascript">
    function FormValidationCallback(passed_validation, form) {
       if (!passed_validation) {
         $('flash').update('<div class="error">The form contains errors!</div>');
         $('flash').show();
       } else {
         $('flash').hide();
       }
      }
      document.observe("dom:loaded", function () {
        new Validation($('mailer-form'), {onFormValidate: FormValidationCallback});
      });
  </script>

To activate validation on certain fields you just need to ad the proper class. Here’s the list of classes available to add to your field elements:

  • required (not blank)
  • validate-number (a valid number)
  • validate-digits (digits only)
  • validate-alpha (letters only)
  • validate-alphanum (only letters and numbers)
  • validate-date (a valid date value)
  • validate-email (a valid email address)
  • validate-url (a valid URL)
  • validate-date-au (a date formatted as; dd/mm/yyyy)
  • validate-currency-dollar (a valid dollar value)
  • validate-selection (first option e.g. ‘Select one…’ is not selected option)
  • validate-one-required (At least one textbox/radio element must be selected in a group)
  
    <r:mailer:text name="name" class="required" />
  

The validation library uses CSS classes to indicate validation status. Let’s style them a little:

  
    div.error {
      background:#CC0000 url(/images/site/exclamation.png) no-repeat 10px 5px;
      padding:5px 10px 5px 30px;
      color:#FFF;
      font-weight:bold;
      border:2px solid #CCCC99;
      margin:10px 0 5px 10px;
    }
    .validation-advice {
      background:#FFF url(/images/site/exclamation_advice.png) no-repeat left 5px;
      color:#9E2522;
      font-size:85%;
      padding:8px 0 5px 22px;
    }
  

You have here a screenshot of the validated form:

radiant-mailer-client-side-validation

This about covers it. You can find out more about the options validate.js library gives you on Andrew Tetlaw’s blog. And you can see a working example of this technique on our company’s contact form.