readme.md 5.02 KB
Newer Older
1 2
# Page Images Engine for Refinery CMS

Brice Sanchez's avatar
Brice Sanchez committed
3 4
[![Build Status](https://travis-ci.org/refinery/refinerycms-page-images.svg?branch=master)](https://travis-ci.org/refinery/refinerycms-page-images)

5 6
## About

7
Page Images allows you to relate one or more images to any page in Refinery which makes it really easy for you to create simple image galleries with lightbox style popups on the front end page views.
8

9
## Requirements
10

Brice Sanchez's avatar
Brice Sanchez committed
11
* refinerycms-pages ~> 4.0
12 13 14

## Features

15 16
* Ability to select one or more images from the image picker and assign them to a page
* An image can be assigned to more than one page
17
* Reordering support, simply drag into order
18 19
* An image assigned to a page can have a caption.
* An image's caption can be different for different pages
20

21
## Install
22

23
Add this line to your application's `Gemfile`
24

25
```ruby
Brice Sanchez's avatar
Brice Sanchez committed
26
gem 'refinerycms-page-images', '~> 4.0.0', git: "https://github.com/refinery/refinerycms-page-images", branch: "master"
27
```
28

29 30
Next run

31 32 33 34 35
```bash
bundle install
rails generate refinery:page_images
rake db:migrate
```
36

djones's avatar
djones committed
37
Now when you start up your Refinery application, edit a page and there should be a new "Images" tab.
djones's avatar
djones committed
38

39 40
# Deploying to Heroku

Philip Arndt's avatar
Philip Arndt committed
41 42
Note: the following information about assets on Heroku might be out of date.

43
In order to properly precompile assets on Heroku, config vars must be present in the environment during slug compilation.
44 45 46 47 48 49 50 51 52 53 54 55 56

```bash
heroku labs:enable user-env-compile -a myapp
```

otherwise you may experience the following error:
```
could not connect to server: Connection refused
Is the server running on host "127.0.0.1" and accepting
TCP/IP connections on port 5432?
```


57
[More Details](https://devcenter.heroku.com/articles/labs-user-env-compile)
58

59 60
## Enable Captions

61
You can enable captions using an initializer containing the following configuration:
62 63

```ruby
64
# app/config/initializers/refinery/page-images.rb
65
Refinery::PageImages.captions = true
66
```
67

68
By default, captions are WYM editors. Prefer `textarea`s? Gotcha :
69 70 71 72 73

```ruby
Refinery::PageImages.wysiwyg = false
```

74 75 76
Note that WYMeditor support requires that you have the extension in your Gemfile:

```ruby
Brice Sanchez's avatar
Brice Sanchez committed
77
gem 'refinerycms-wymeditor', ['~> 2.0', '>= 2.0.0']
78 79
```

80 81
## Usage

Uģis Ozols's avatar
Uģis Ozols committed
82
`app/views/refinery/pages/show.html.erb`
83

84 85 86 87 88 89
If you don't have this file then Refinery will be using its default. You can override this with

```bash
rake refinery:override view=refinery/pages/show
```

90 91 92 93 94 95
If images have been assigned to a page several objects are available for showing on the page. They are

* `@page.images`: A collection of images assigned to the page.
* `@page.caption_for_image_index(i)` will return the caption (if any) for the i<sup>th</sup> image in @page.images
* `@page.images_with_captions`: A collection of image_with_caption objects with the attributes image: and caption:

96 97 98
```erb
<% content_for :body_content_right do %>
  <ul id='gallery'>
99
    <% @page.images.each do |image| %>
100
      <li>
101
        <%= link_to image_tag(image.thumbnail(geometry: "200x200#c").url),
102
                    image.thumbnail(geometry: "900x600").url %>
103 104 105 106 107 108 109 110 111 112 113
      </li>
   <% end %>
  </ul>
<% end %>
<%= render :partial => "/refinery/content_page" %>
```

If you have enabled captions, you can show them like this

```erb
<% content_for :body_content_right do %>
114
  <section id='gallery'>
David Jones's avatar
David Jones committed
115
    <% @page.images.each_with_index do |image, index| %>
116
      <figure>
117
        <%= link_to image_tag(image.thumbnail(geometry: "200x200#c").url),
118
                    image.thumbnail(geometry: "900x600").url %>
119 120
        <figcaption><%=raw @page.caption_for_image_index(index) %></figcaption>
      </figure>
121
   <% end %>
122
  </section>
123 124 125
<% end %>
<%= render :partial => "/refinery/content_page" %>
```
126 127 128
or like this
```erb
<% content_for :body_content_right do %>
129
  <section id='gallery'>
130
    <% @page.images_with_captions.each do |iwc| %>
131 132 133 134 135
      <figure>
        <%= link_to image_tag(iwc.image.thumbnail(geometry: "200x200#c").url),
                    iwc.image.thumbnail(geometry: "900x600").url %>
        <figcaption><%=raw iwc.caption %></figcaption>
      </figure>
136
   <% end %>
137
  </section>
138 139 140
<% end %>
<%= render :partial => "/refinery/content_page" %>
```
Kevin Smous's avatar
Kevin Smous committed
141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163
## Refinerycms-blog support

Contrary to its name, `refinerycms-page-images` also works with `refinerycms-blog` and adds the functionality to link images to blog posts.

If `refinerycms-blog` is installed on your rails app, `refinerycms-page-images` will automatically detect it and perform the adequate initialization. PageImages are assigned to a polymorph "page" object, wich can be a `Refinery::Page` or a `Blog::Post`.

Thus, once installed, you can simply call a blog post's images the same way you'd call them for a page, like this

```erb
<% @blog_posts.each do |blog_post| %>
  <ul id='gallery'>
    <% blog_post.images.each do |image| %>
      <li>
        <%= link_to image_tag(image.thumbnail(geometry: "200x200#c").url),
                    image.thumbnail(geometry: "900x600").url %>
      </li>
   <% end %>
  </ul>
<% end %>
<%= render :partial => "/refinery/content_page" %>
```


djones's avatar
djones committed
164
## Screenshot
djones's avatar
djones committed
165

Kevin Smous's avatar
Kevin Smous committed
166
![Refinery CMS Page Images Screenshot](http://refinerycms.com/system/images/0000/1736/refinerycms-page-images.png)