Code Monkey home page Code Monkey logo

refinerycms-page-images's Introduction

Page Images Engine for Refinery CMS

About

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.

Requirements

  • refinerycms >= 2.1.0

Features

  • Ability to select one or more images from the image picker and relate them to a page
  • Reordering support, simply drag into order
  • Optionally include captions with each image.

Install

Add this line to your applications Gemfile

gem 'refinerycms-page-images', '~> 2.1.0'

Next run

bundle install
rails generate refinery:page_images
rake db:migrate

Now when you start up your Refinery application, edit a page and there should be a new "Images" tab.

Deploying to Heroku

In order to properly precompile assets on Heroku, config vars be present in the environment during slug compilation.

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?

"More Details"

Enable Captions

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

Refinery::PageImages.captions = true

By default, captions are WYM editors. Prefer textareas ? Gotcha :

Refinery::PageImages.wysiwyg = false

Usage

app/views/refinery/pages/show.html.erb

If you don't have this file then Refinery will be using its default. You can override this with

rake refinery:override view=refinery/pages/show
<% content_for :body_content_right do %>
  <ul id='gallery'>
    <% @page.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" %>

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

<% content_for :body_content_right do %>
  <ul id='gallery'>
    <% @page.images.each_with_index do |image, index| %>
      <li>
        <%= link_to image_tag(image.thumbnail(geometry: "200x200#c").url), 
                    image.thumbnail(geometry: "900x600").url %>
        <span class='caption'><%=raw @page.caption_for_image_index(index) %></span>
      </li>
   <% end %>
  </ul>
<% end %>
<%= render :partial => "/refinery/content_page" %>

Screenshot

Refinery CMS Page Images Screenshot

refinerycms-page-images's People

Contributors

akselsson avatar bobbus avatar bramjetten avatar cerebroso avatar djones avatar ghoppe avatar hayksaakian avatar jamesantrobus avatar jokklan avatar jurriaan avatar koa avatar kovalevsky avatar matho avatar mhaylock avatar mirosr avatar nowaterlili avatar palodelincak avatar parndt avatar pedropag avatar peterberkenbosch avatar phiggins avatar richlarcombe avatar simi avatar skeller1 avatar snowsunny avatar soupmatt avatar technologythree avatar ugisozols avatar wakeless avatar

Watchers

 avatar  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.