Coder Social home page Coder Social logo

helpfulrobot / zirak-simple-gallery Goto Github PK

View Code? Open in Web Editor NEW

This project forked from g4b0/silverstripe-simple-gallery

0.0 2.0 0.0 19 KB

A simple photogallery management module.

License: GNU General Public License v2.0

PHP 90.13% Scheme 9.87%

zirak-simple-gallery's Introduction

Simple Gallery

A simple photogallery management module.

Introduction

With this module you will be able to extend each DataObjects, including Pages, in order associate to it a photogallery. If a Page needs more than a single photogallery, than it's possible to create a Gallery Dataobject, extend it with SimpleGallery, than assign it in a has_many relationship to the page. See example below.

Requirements

  • SilverStripe 3.1
  • colymba/gridfield-bulk-editing-tools
  • undefinedoffset/sortablegridfield

Installation

Install the module through composer:

composer require zirak/simple-gallery

composer update

Single gallery

To have a single gallery per page extend the desired page type through the following yaml:

Page:
  extensions:
    - SimpleGalleryExtension

Template

A really basic template is given, to use it just put this code into your Page template:

<% include simplegallery %>

For a nice visualization into the default SS template add this CSS code:

.simplegallery img {width: 30%; float: left; margin: 10px;}

You have to write your own .ss files for more advanced features. Just overwrite template/simplegallery.ss into your theme and loop over $SortedImages writing your HTML code:

<div class="simplegallery">
<% loop SortedImages %>
	<% if $CustomLink %>
	 <a href="$CustomLink">$Image</a>
	<% else %>
	 $Image
	<% end_if %>
<% end_loop %>
</div>

You can access the following image variable:

$CustomLink $Title $Text $Disabled $SortOrder

Multiple gallery

If you prefer to have multiple sortable gallery in a specific page type simply add an has_many relationship like the following example:

class Portfolio extends Page {

	private static $has_many = array(
			'Galleries' => 'SimpleGallery'
	);

	public function getCMSFields() {
		$fields = parent::getCMSFields();

		$gridFieldConfig = GridFieldConfig_RelationEditor::create();
		$gridFieldConfig->addComponent(new GridFieldSortableRows('SortOrder'));
		$field = new GridField(
						'Galleries', 'Galleries', $this->SortedGalleries(), $gridFieldConfig
		);
		$fields->addFieldToTab('Root.Galleries', $field);

		return $fields;
	}

	public function SortedGalleries() {
		return $this->Galleries()->sort('SortOrder');
	}

}

Template

Just like simplegallery, a very basic template is given, to use it just put this code into your Page template:

<% include simplegalleries %>

For a nice visualization into the default SS template add this CSS code:

.simplegallery {clear: both;}
.simplegallery img {width: 30%; float: left; margin: 10px;}

You have to write your own .ss files for more advanced features. Just overwrite template/simplegalleries.ss into your theme and loop over $SortedGalleries, and then over $SortedImages

<% loop $SortedGalleries %>
	<div class="simplegallery">
		<article>
			<h3>$Name</h3>
			$Description
			<div>
			<% loop SortedImages %>
				<% if $CustomLink %>
				 <a href="$CustomLink">$Image</a>
				<% else %>
				 $Image
				<% end_if %>
			<% end_loop %>
			</div>
		</article>
	</div>
<% end_loop %>

Config

Editing _config/simplegallery.yml it's possible to modify gallery behaviour:

* gallery_name: The gallery name that appear in backend tabs (default: Gallery)
  • folder_path: path where the uploaded images are stored (default: simplegallery)

zirak-simple-gallery's People

Contributors

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