-
symfony/framework-standard-edition ">=2.8|~3.0"
-
stof/doctrine-extensions-bundle "~1.2"
-
jQuery
-
create project with Symfony framework
-
install stof/doctrine-extensions-bundle "~1.2" - Translatable behavior (quick installation & config instructions)
-
install bundle
for Symfony ~2.8:
composer require tomatom/atom-bundle "~1.0"
for Symfony ~4.2:
composer require tomatom/atom-bundle "~2.0"
AppKernel.php:
new TomAtom\AtomBundle\TomAtomAtomBundle(),
routing.yml:
atom:
resource: "@TomAtomAtomBundle/Controller/"
type: annotation
config.yml:
# Make sure translator is uncommented:
framework:
translator: { fallbacks: ["%locale%"] }
# ...
# Twig Configuration
twig:
base_template_class: TomAtom\AtomBundle\Twig\Template
# ...
security.yml:
security:
# ...
# add role 'ROLE_ATOM_EDIT':
role_hierarchy:
ROLE_ATOM_EDIT: ROLE_USER
ROLE_ADMIN: ROLE_ATOM_EDIT
ROLE_SUPER_ADMIN: ROLE_ADMIN
# ...
translation.yml:
framework:
# ...
# Add enabled locales for multi language application
enabled_locales: ['cs', 'en', 'de']
::base.html.twig
(or your base layout):
{# don't forget to include your jQuery (tested with 1.8.3 - 2.1.4, others may work, 3.0 doesn't): #}
<script src={{ asset('path/to/jQuery.js') }}></script>
{{ render(controller('TomAtomAtomBundle:Atom:_metas')) }}
- for drag&drop image uploading from editor, create upload directory:
/web/uploads/atom
-
Atoms intentionally works only in
prod
environment! They are disabled intest
,dev
and all others, so you can always see updated changes right away. -
there are currently 3 Atom types:
atom
- Atom with rich text editor (CKEditor)atomline
- Atom Line for editing plaintext inside fixed html tagsatomentity
- Atom Entity display and update column for given entity
- if you want to use Atom in your templates, add Atom tag with unique identifier:
{% atom unique_identifier_here %}
and closing tag{% endatom %}
. You can add default content between tags, which will be persisted on first load.
{% atom foo %}
<p> I am editable! </p>
{% endatom %}
- in case you want to edit only text content (like headings or table cells) and don't want to use rich text editor,
there is the Atom Line tag (again with unique identifier):
{% atomline unique_identifier_here %}
and closing{% endatomline %}
.
<h1>
{% atomline bar %}
I am editable!
{% endatomline %}
<h1>
-
for editing other entities, there is Atom Entity tag, which takes these arguments:
- name of Bundle containing desired entity:Entity name (e.g.
AppBundle:Product
) - name of method used for saving content (usually some setter)
- entity id
- name of Bundle containing desired entity:Entity name (e.g.
-
example (no need to add default value, it will be fetched by appropriate getter):
<div class="product-price">
{% atomentity AppBundle:Product, setPrice, 123 %}{% endatomentity %}
<div>
- entering page with Atoms in
prod
environment as user with roleROLE_ATOM_EDIT
unlocks editable mode, which can be enabled or disabled by icon in bottom-right corner of browser screen.
- when switching between locales by changing
_locale
request parameter, you can easily update atoms in specified language. Also Atom Entities can be translated from frontend, if they have implemented Gedmo Translatable behavior.