Aissac Blog

Seeing that Radiant Tiny-Paper Extension got some attention we decided to improve the UI and usability.

As a learning experience and following a notice I read a couple of days ago that said something like “if the erb is too hard to pull in haml, it is likely a code smell” I decided to re-write all the views using HAML.

The Image Browser, has basically the same actions as before but a different layout. The list of images uses the vertical alignment facility I wrote about some time ago. There are two types of views (text-list and thumbnails), you have filtering, sorting and paginating facilities and an upload form to directly upload image assets. The major difference is the way you choose the image size. When you click an image a context menu popup will appear with all the image sizes. The popup also presents the image dimensions in pixels for each size.

The File Browser also has a new layout. There are two sections, one for adding a link to a Radiant Page, and one for adding a link to an uploaded file. The Files Tab has filtering, sorting and paginating facilities and an upload form to directly upload assets. The Pages Tab presents a tree structure of the Radiant pages, excluding the ones that are not published.

Check out the source code on github.

For installation and configuration details visit the Radiant Tiny-Paper Extension documentation page.

One of the biggest challenges in web design is vertical aligning of images within a container. There are plenty solutions but the one I usually apply is adding a top padding CSS rule to the image. But most of the time the images are dynamically loaded and we don’t know the height of every image. So adding a general top padding rule is not an option.

A solution would be to get the image height using Javascript and then add the top padding CSS rule. Unfortunately, this makes the images bounce to their new position after the DOM is loaded (not to mention that some users might have Javascript disabled).

If your using Radiant CMS there is a viable solution to this. Radiant has a few ways to manage assets (images in particular), like Paperclipped Extension or Page Attachments Extension.

Note: For more info on installing this extensions read their official documentation.

Let’s say you are using Paperclipped to display a list of thumbnails. As you know there is a tag that iterates over the attached images of the page, the <r:assets:each>...</r:assets:each> tag:

  <ul>
    <r:assets:each>
      <li>
        <img src="<r:url size='thumb' />" alt='<r:title />'/>
      </li>
    </r:assets:each>
  </ul>

Example of a list of images not vertically aligned:

Now, in order to vertically align the images within the list item all you have to do is add padding-top CSS rule. But you don’t know how many pixels because there is no way to know the height of every image. Fear not, there is a tag for this: the <r:top_padding /> tag. This tag renders the value for the top padding for the image. It takes as attributes the image size and the height of the container, list item in our case. So, all you have to do is set the list item height in your CSS file and add an inline style for the image
style="padding-top:<r:top_padding size='thumb' container='60' />px"

The final code snippet should look something like this:

  <ul>
    <r:assets:each>
      <li>
        <img src="<r:url size='thumb' />" alt='<r:title />' style="padding-top:<r:top_padding size='thumb' container='60' />px"/>
      </li>
    </r:assets:each>
  </ul>

Example of a list of images vertically aligned:

See this in action here. All the images within the site are vertically aligned using the <r:top_padding /> tag.

If you are using the Page Attachment Extension there are the same options. Use the <r:top_padding /> tag to vertically align the images within a parent with fixed height.

Announcing the Radiant Stereotype Extension.

Features:

• Define named templates (stereotypes) for Pages;
• Templates are assigned per-parent Page, making all children have the defined ’stereotype’ by their parent;
• You can specify the new page’s parts, filters, layout and page type.

Check out the source code on github.

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

Announcing the Radiant Custom-Fields Extension.

Features:

• Provides the ability to add custom fields to a Page;
• The Page model is not changed: custom_fields are added as a belongs_to association;
• Admin interface for managing assigned custom fields;
• Radius tags for accessing custom fields.

Check out the source code on github.

For installation and configuration details visit the Custom Fields Extension documentation page.

Announcing the Radiant Tiny-Paper Extension.

Features:

• TinyMCE WYSIWYG editor in your Radiant page as a filter;
• Image Browser, based on Paperclipped image assets;
• File Browser, based on Paperclipped assets;
• Upload assets directly in TinyMCE Image/File browser;
• Thumbnails and text list views;
• Directly add a link to a Radiant Page from TinyMce editor.

Check out the source code on github.

For installation and configuration details visit the Radiant Tiny-Paper Extension documentation page.

Radiant Database Mailer Extension update:

Features

• Save posted form fields and entire mail message to the database
• Configurable save-to-database for mailer forms
• Add fields to be saved without loosing data
• Admin interface to browse saved records
• Export data to CSV and XLS

Check out the source code on github.

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

Announcing the Member Radiant Extension.

Features:

• Restricts access to Radiant pages under a certain node, requiring member login.
• Members can be managed from Radiant Admin. There is *NO* member self-registration.
• Reset and email member’s password from Admin interface;
• Bulk import members from a CSV file; fields: name, company, email;
• Radius tags for integrating login/logout functionality into the site;
• Cookie-based flash messages.

Check out the source code on github.

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

Announcing the Ultrasphinx Search Radiant Extension.

Features:

• Full text search for content and page titles.
• Radius tags for iterating over search results, checking if there are no results and excerpting matches
• Results pagination with will_paginate

Check out the source code on github.

For installation and configuration details visit the extension documentation page.