Code Monkey home page Code Monkey logo

paperclipped's Introduction

Paperclipped

IMPORTANT!

This version of Paperclipped now requires Radiant 0.9.0 or higher. Just in case, the previous version is still around, on a branch marked Radiant-0.8

Let me know if this works and if you run into any issues.

###Installation

To install paperclipped, just run

rake production db:migrate:extensions
rake production radiant:extensions:paperclipped:update

This runs the database migrations and installs the javascripts, images and css.

###Configuration

If you install the Settings Extension (highly recommended), you can also easily adjust both the sizes of any additional thumbnails and which thumbnails are displayed in the image edit view. The default is the original file, but any image size can be used by giving in the name of that size.

If you do install the Settings Extension you should be sure to add a config.extensions line to your environment.rb file:

config.extensions = [ :settings, :all ]

Also the Settings Extension migration should be run before Paperclipped's migration.

The configuration settings also enable a list of the allowed file types, maximum file size and should you need it, the path to your installation of Image Magick (this should not be needed, but I sometimes had a problem when using mod_rails).

###Using Paperclipped

Once installed, you get a new Tab with the entire assets library, a Bucket ร  la Mephisto (though only the concept is stolen) and a search. You can also easily attach assets to any page and directly upload them to a page.

###Asset Tags

There are a veriety of new tags. The basic tag is the <r:assets /> tag, which can be used either alone or as a double tag. This tag requires the "title" attribute, which references the asset. If you use the drag and drop from the asset bucket, this title will be added for you.

The <r:assets /> tag can be combined with other tags for a variety of uses:

<r:assets:image title="foo" /> will return <img src="/path/to/foo" alt="foo" />

<r:assets:link title="foo" /> will return <a href="/path/to/foo">foo</a>

You could also use:

<r:assets:link title="foo" text="This is the link to foo" /> will return <a href="/path/to/foo">This is the link to foo</a>

or

<r:assets:link title="foo">This is another link</r:link>

Asset links are also available, such as content_type, file_size, and url.

Another important tag is the <r:assets:each>...</r:assets:each>. If a page has attached assets, the assets:each tag will cycle through each asset. You can then use an image, link or url tag to display or connect your assets. Usage:

<r:assets:each [limit=0] [offset=0] [order="asc|desc"] [by="position|title|..."] [extensions="png|pdf|doc"]>
  ...
</r:assets:each>

<r:assets:each> parameters:

  • limit and offset let you specify a range of assets;
  • order and by lets you control sorting;
  • extensions allows you to filter assets by file extensions; you can specify multiple extensions separated by |.

<r:if_assets [min_count="0"]> and <r:unless_assets [min_count="0"]>

conditional tags let you optionally render content based on the existance of tags. They accept the same options as <r:assets:each>.

Thumbnails are automatically generated for images when the images are uploaded. By default, two sizes are made for use within the extension itself. These are "icon" 42px by 42px and "thumbnail" which is fit into 100px, maintaining its aspect ratio.

You can access sizes of image assets for various versions with the tags <r:assets:width [size="original"]/> and <r:assets:height [size="original"]/>.

Also, for vertical centering of images, you have the handy <r:assets:top_padding container="<container height>" [size="icon"]/> tag. Working example:

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

###Using Amazon s3 Everything works as before, but now if you want to add S3 support, you simply set the storage setting to "s3".

Radiant::Config[assets.storage] = "s3"

Then add 3 new settings with your Amazon credentials, either in the console or with the Settings extension:

Radiant::Config[assets.s3.bucket] = "my_supercool_bucket"
Radiant::Config[assets.s3.key] = "123456"
Radiant::Config[assets.s3.secret] = "123456789ABCDEF"

and finally the path you want to use within your bucket, which uses the same notation as the Paperclip plugin.

Radiant::Config[assets.path] = :class/:id/:basename_:style.:extension 

The path setting, along with a new url setting can be used with the file system to customize both the path and url of your assets.

Migrating from the page_attachments extension

If you're moving from page_attachments to paperclipped, here's how to migrate smoothly:

First, remove or disable the page_attachments extension, and install the paperclipped extension. For example:

rake ray:dis name=page_attachments
rake ray:assets

The migration has now copied your original page_attachments table to old_page_attachments.

rake radiant:extensions:paperclipped:migrate_from_page_attachments

This rake task will create paperclipped-style attachments for all OldPageAttachments. It will also ask you if you want to clean up the old table and thumbnails in /public/page_attachments.

Done!

paperclipped's People

Contributors

kbingman avatar saturnflyer avatar gerrit avatar will-r avatar jomz avatar davec avatar brianjlandau avatar ihoka avatar jasiek avatar netzpirat avatar p8 avatar bryanl avatar seancribbs avatar moklett avatar nuex avatar

Stargazers

 avatar  avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.