Impress Portfolio with a simple Symfony bundle
Want to create awesome presentations based on Impress.js?, (*1)
With EasyImpressBundle, you can create presentations based on a single yml configuration file., (*2)
View the online demo, (*3)
Requirements
Installation
- Install the bundle:
shell
$ composer require orbitale/easyimpress-bundle
- Add it to your Kernel:
php
<?php
class AppKernel extends Kernel
{
public function registerBundles()
{
$bundles = [
// ...
new Orbitale\Bundle\EasyImpressBundle\EasyImpressBundle(),
];
}
}
- Add routing instructions
yml
# app/config/routing.yml
easy_impress:
resource: '@EasyImpressBundle/Resources/config/routing.yml'
prefix: /presentations # not mandatory, but very useful
- Install necessary assets:
bash
$ php bin/console assets:install --symlink --relative
- Start creating presentations in your
%kernel.root_dir%/config/presentations/ directory!
Usage
Every slider is contained in the app/config/presentations directory by default, and the file name is used as the
slider's identifier. This identifier will be the name displayed in the URL., (*4)
👉 Tip: You can override this directory by changing EasyImpress' configuration, view below., (*5)
app/Resource/presentations/{presentation_name} will be accessible from /{presentation_name} path., (*6)
Configuration and yaml files processing
Every file will be added to the container as a resource, so if it's modified in dev, cache will automatically be refreshed., (*7)
Yml files are found by Symfony Finder in the PresentationsPass., (*8)
Presentations and slides configurations are processed via Symfony Config component, you can check in the
Configuration directory for the configuration classes and references., (*9)
Retrieve presentations
You can get all presentations in the easy_impress service, they will be transformed from arrays to immutable objects
at runtime., (*10)
Yml reference
As every presentation is made in the yml format, here's the reference with default values:, (*11)
# Html "data-" attributes that correspond to Impress options
data:
transition-duration: 1000
min-scale: 1
# Determines the css "opacity" for inactive slides (".future" or ".past" slide classes)
inactive_opacity: 1
# Some HTML attributes for the presentation
# Please note that "impress_slides_container" class is mandatory and always added
attr:
style: ''
class: 'impress_slides_container'
# With increments, the slides coordinates will automatically be calculated based on these values
# For example, if "x" increment is set to 100, each slide "x" value will be incremented with 100.
# Increments will also correspond to base values for the first slide.
# IMPORTANT: If you set increments for one property, you CANNOT set the property in a slide.
increments:
x: ~
y: ~
z: ~
rotate: ~
rotate-x: ~
rotate-y: ~
rotate-z: ~
# Here you will define all slides
# Slides are an array of properties
slides:
# Slide ID will be processed automatically with this as default value:
# {presentation_name}_{slide_number}
#
# But you can specify an id manually:
#
# slides:
# slide_id:
# data:
# x: 1
#
# You can specify no id at all:
#
# slides:
# - data:
# x: 1
#
# Or add it as a simple property (make sure there is no duplicate):
#
# slides:
# - id: slide_id
# data:
# x: 1
#
slide id or hyphen:
# Optional, see id informations above
id: ''
# Slide's content, in plain HTML
content: ''
# HTML data attributes that correspond to slide's position/rotation in the canvas
# All of these will correspond to CSS transforms
data:
x: ~
y: ~
z: ~
rotate: ~ # Alias to "rotate-z"
rotate-x: ~
rotate-y: ~
rotate-z: ~
scale: ~ #
# Some HTML attributes for the slide
# Please note that "step" class is mandatory and always added
attr:
style: ''
class: 'step'
# If you are using "increments" in presentation,
# you can reset any incrementation value starting from this slide
# by setting the attribute to "true".
# The slide that resets value will recover the base increment value
# and incrementation will continue for the next slides.
reset:
x: false
y: false
z: false
rotate: false
rotate-x: false
rotate-y: false
rotate-z: false
Data attributes
As explained in ImpressJS Wiki:, (*12)
Cartesian Position
Where in 3D space to position the step frame in Cartesian space., (*13)
data-x, data-y, data-z
Define the origin location in 3D Cartesian space. Specified in pixels (sort-of)., (*14)
data-rotate
Rotation of the step frame about its origin in the X-Y plane. This is akin to rotating a piece of paper in front of your face while maintaining it's ortho-normality to your image plane (did that explanation help? I didn't think so...). It rotates the way a photo viewer rotates, like when changing from portrait to landscape view., (*15)
Polar Position
Rotation of the step frame about its origin along the theta (azimuth) and phi (elevation) axes. This effect is similar to tilting the frame away from you (elevation) or imaging it standing on a turntable -- and then rotating the turntable (azimuth)., (*16)
data-rotate-x
Rotation along the theta (azimuth) axis, (*17)
data-rotate-y
Rotation along the phi (elevation) axis, (*18)
Size
data-scale
The multiple of the "normal" size of the step frame. Has no absolute visual impact, but works to create relative size differences between frames. Effectively, it is controlling how "close" the camera is placed relative to the step frame., (*19)
More information can be found on the Impress.js Wiki or the
Impress.js documentation., (*20)
Configuration reference
easy_impress:
presentations_dir: '%kernel.root_dir/config/presentations'
layout: '@EasyImpress/layout.html.twig'
License
This bundle is provided with MIT license, any contribution should be made under the same license., (*21)
Wallogit.com
