Aissac Blog

Radiant Member Extension, used for restricting site content to registered members, got some new features. Also, the configuring got a little easier.

So, what’s new? One small but important feature is the possbility of deleting members.

The next feature is the improved control you have over members with activate/deactivate actions. When you deactivate a member, his password will be copied in a new field making him unable to access his acount. Activating him will copy back his old password.

If before you needed to modify the environment.rb or initializers/member.rb files in order to get the extension up and running, now all this settings are kept in Radiant::Config. You only need to and key/value pairs to this table to get the extension running.

Radiant’s caching prevents us from using Rails’ flash to notify the user of failed login attempts. To work around this, Member Extension uses cookies to store flash messages and Javascript to display them in the view. Now the flash messages can be easily customized from Radiant::Config.

Check out the source code on github.

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

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.