Riding an Elefant

Ideas and updates on the development of the open source Elefant CMS project.

[ridinganelefant]

Elefant 2.2.6 released

Elefant 2.2.6 has been released with easier website editing for marketing-oriented pages, Docker support, and a number of smaller improvements, bug fixes, and increased security.

Click here to download or update.

Column layouts

This feature builds on the recent improvements to the blocks/group handler and adds the ability to define column layouts for each content row when row=on is set.

To try it out, add the following to your layout template:

{! blocks/group?wildcard=[id]-*&rows=on !}

This tag turns a page into an expandable set of rows of content blocks, which can now also contain up to 5 columns of content.

You'll see a new Content Layout button next to the up/down arrows in the block edit buttons. The buttons in the first column now control the properties for the entire row, and each column now has its own edit button too.

When you click this new button, or when you click the Add Block button to add another row of content, you'll be shown the following options for content layouts:

The layout can also be modified through the block add/edit forms sidebar:

And finally, you can tab between the rows just above the wysiwyg editor, so you can edit an entire row from the same form:

Docker support

Elefant now includes Docker configurations for building production and development containers, as well as a docker-compose file for spinning up a complete development environment in a single command which includes a MySQL database and Redis-backed caching.

To build a production container from a fresh clone of the Elefant repository, run:

$ make build

This will build a container named elefant. Similarly, you can build a development container via:

$ make dev

This will build a container named elefant-dev.

To spin up a development environment (after running make dev), run:

$ make run

And to shut it down, run:

$ make down

Take a look at the included docker-compose.yml and .docker/* files for more info.

Other improvements

Added ELEFANT_DEFAULT_PASS environment variable for ./elefant install command line installer

When you change the ID of a page that uses blocks/group as shown above, Elefant will update the block IDs so they don't become unlinked from the page

You can now load scripts asynchronously via $page->add_script ('/apps/myapp/js/script.js', 'async')

Updated CSRF validation to use sha256 and to use separate expiring tokens per request URI

Added User::error() to get the underlying reason for an authentication failure (e.g.,incorrect credentials, too many tries, database error)

Added pretty printing of JSON output in ./elefant api/get and ./elefant api/post command output

Added setting to opt-out of FLoC tracking under Site Settings, with the opt-out enabled by default

Added |comma filter to template variables, which outputs the value followed by a comma only if the value isn't empty

Bug fixes

Ensure block list in blocks/group is always an array to prevent errors

Auto-update wildcard block IDs when page IDs change

Fixed jGrowl's missing source map

Fixed error in ./elefant permissions command due to missing folder

Remove uploaded files from cache after import in blog app (Wordpress, Blogger, CSV)

File manager strips .php, .phtml, and .ht* files from unzipped folders for improved security

Prevent using base64 encoding to bypass function filter in designer app (e.g., {{base64_decode('cGhwaW5mbw==')()}})

[ridinganelefant]

Elefant 2.2.5 released

Elefant 2.2.5 has been released with a number of improvements and one bug fix.

Click here to download or update.

New environment variables

You can now set your site name, domain name, transactional email address, a default password for automating new installs (used by the ./elefant install command), and your job queue's Beanstalkd connection info from environment variables. In all, these are the new variables introduced in 2.2.5:

ELEFANT_SITE_NAME

ELEFANT_DOMAIN

ELEFANT_EMAIL_FROM

ELEFANT_DEFAULT_PASS

JOBQUEUE_BACKEND

JOBQUEUE_HOST

JOBQUEUE_PORT

This release also introduces Envconf, which makes it easy to integrate custom environment variables into your custom Elefant apps. Envconf is a wrapper around Appconf that first checks for a matching environment variable based on the app, section, and setting names, for example:

Envconf::myapp ('S3', 'access_token');

Will map to the following environment variable:

MYAPP_S3_ACCESS_TOKEN

Click here for more information on using environment variables with Elefant.

Other improvements

Added Model::prefetch_field($id_list, $fieldname) to reduce database calls on repeat uses of Model::field()

Added exception handling to Redis cache connection failures

Added example setup of custom styles for blocks, introduced in 2.2.3, in the default theme under layouts/minimal/blocks.css

Bug fix

Fixed forms not submitting when skip_if_empty is specified but the field isn't found in the HTML of the form

Click here for a full list of changes.

[ridinganelefant]

Elefant 2.2.4

Elefant 2.2.4 has been released with a number of bug fixes and improvements.

Click here to download or update.

Introducing JobQueue

This update adds a new JobQueue class which is powered by Pheanstalk/Beanstalkd. This makes it very easy to setup background workers and send tasks to them for processing.

Setup

To set it up, install Beanstalkd via your package manager of choice (apt/yum/brew/port), for example:

$ apt install beanstalkd

Next, after upgrading Elefant to 2.2.4, run Composer update from the root directory of your website to install the Pheanstalk library:

$ cd /path/to/www && composer update

Lastly, edit the [JobQueue] settings in your conf/config.php file to point to your Beanstalkd server:

[JobQueue] backend = beanstalkd host = 127.0.0.1 port = 11300

Usage

Sending a job to be done by a background worker is as easy as:

JobQueue::enqueue ('tube-name', ['data' => '...']);

Writing a worker in Elefant looks like this:

<?php // apps/myapp/handlers/worker.php if (! $this->cli) exit; $page->layout = false; $worker = JobQueue::worker (); $worker->watch ('tube-name'); while ($job = $worker->reserve ()) { $data = json_decode ($job->getData ()); // Process job with $data $worker->delete ($job); }

The above worker can be run via php index.php myapp/worker and can be initialized using your system scheduler, such as systemd.

Note that workers can be written in any language that connects to Beanstalkd and listens for jobs to process.

Other improvements

Added User::require_verification() which extends User::require_login() to require email verification too

Added Auto-include Composer autoloader to Site Settings form so you no longer need to include it manually in a bootstrap.php file

Click here for a full list of changes.

[ridinganelefant]

Elefant 2.2.3

Elefant 2.2.3 has been released with a number of bug fixes and improvements.

Click here to download or update.

Simpler request data validation for REST endpoints

The Restful class has a new get_params() method that makes it easier to parse and validate request data parameters while also improving the conciseness and readability of your code.

Previously, you might write code like this in order to parse and validate request data:

$data = $this->get_put_data (true); if (! isset ($data->id)) { return $this->error ('Missing parameters: id', 400); } if (! isset ($data->name)) { return $this->error ('Missing parameters: name', 400); } // etc.

Now you can write this to do the same thing:

$data = $this->get_params (['id', 'name']); if (! $data) return; // Validation failed

If $data is false, Restful will automatically send an appropriate error response, so you can simply return without having to write any additional error handling logic.

When you pass it an ordinary array, get_params() considers all fields specified to be required, and omits all others. Note that you can still get the full, unvalidated list like this:

$data = $this->get_params ();

However, you can do much more with get_params(), including using booleans to specify required versus optional fields:

$data = $this->get_params ([ 'id' => true, // required 'name' => false // optional ]);

And you can take it one step further by specifying an array of input validations that will be sent to the Validator class like this:

$data = $this->get_params ([ 'id' => true, 'name' => false, 'email' => [ 'email' => true ], 'age' => [ 'skip_if_empty' => true, 'type' => 'numeric', 'range' => '1-150' ] ]);

This also makes it easier to see the expected parameters and their validation rules all in one place at the top of your endpoint methods, using the same validation rules that forms and models also use.

Custom CSS class selector for content blocks

The blocks editor now provides a way to select and set custom CSS classes on individual blocks via a dropdown menu.

The editor looks for a layouts/your-theme/blocks.css file in your layouts and reads that for custom CSS classes. If not found, it reads all layouts/your-theme/*.css files and parses them for custom CSS classes.

It looks for any CSS class of the form .block-outer.custom-class-name, for example:

.block-outer.dark-background { background-color: #222; color: #eee; }

It then turns all unique classes found into selectable options in a dropdown list (the above would appear as "Dark Background") so you can offer your site editors more customization options without sacrificing control over the look and feel of your sites.

This is especially powerful coupled with other recent improvements to the blocks/group helper.

Other bug fixes and improvements

All Elefant-related cookies are now marked with SameSite=Lax

Changed $cache->delete() to use unlink() for asynchronous deletions on newer versions of phpredis

Improved the display and usability of tables in the wysiwyg editor

Fixed a MySQL error at a text field with default value

Fixed custom site styles affecting the Elefant toolbar heading colours and embedded button styles

Click here for the full list of changes.

[ridinganelefant]

Elefant CMS is part of the GitHub Discussions beta

After several failed attempts at upgrading Vanilla Forums, we now have a new home for the Elefant CMS community forum - GitHub Discussions!

Click here to visit the new Elefant CMS community forum.

Elefant has been receiving some nice updates recently, including turning the blocks/group helper into a Swiss army knife for page layouts, a new Wires app for simplifying SPAs, PHP 7.4 opcache.preload support, Open Graph and SEO improvements, and a much improved page/blog post editing experience.

However, without a working forum community activity has suffered. Hopefully this is the first step in turning that around.

So take a minute and head over to the new Elefant CMS Discussions and say hello!

[ridinganelefant]

Using blocks/group to setup marketing pages

This post is going to show you how recent upgrades to editable content blocks in the Elefant CMS can be used to make setting up fully editable page layouts easier.

Content blocks in Elefant, a quick recap

Content blocks are Elefant's way of creating editable content areas on a website that aren't the core page content, such as sidebars and footers.

A common pattern for setting up an editable block in your layout template would be with the following tag:

{! blocks/my-block-id !}

This says to look for and display a block with the ID "my-block-id". Here's a more complex example, taken from the default theme:

{! blocks?id=sidebar-[id]&fallback=members !}

This says to look for a block ID with the pattern "sidebar-{$page->id}" and use that, otherwise, look for a block with the ID "members" and use that instead. This way, some pages can override the default sidebar with their own custom sidebar content, but you can still have a standard sidebar for more general pages of the site.

Block groups

Elefant's blocks/group helper extends this capability to let you embed groups of editable content blocks into your layout templates.

In Elefant 2.2.1, the blocks/group helper got a major update that turns it into quite a Swiss army knife for buiding page layouts.

This post is going to show three ways of using it as a page layout tool.

Expanding web pages

Marketing and brochure style landing pages are often comprised of a series of horizontal blocks of content, highlighting different aspects of the offer.

For these, we've introduced a new way to use the blocks/group helper for generating expandable pages with multiple rows of content. Here's how that looks:

{! blocks/group?wildcard=[id]-*&rows=on !}

What this says is to look for any blocks with IDs matching the pattern "{$page->id}-*", and to display them one-per-row.

Tip: Tying the wildcard pattern to the current page ID helps make it easy to tell which blocks are associated with which pages in the backend, and lets you reuse a single layout template across multiple pages which can each have their own custom groups of content blocks.

We've also introduced some new editing capabilities, including the ability to re-order the blocks that are shown using simple up/down arrows (if unspecified, they'll be shown in ascending alphanumerical order), and support for cover-style background images.

Since the blocks are matched using a wildcard character instead of being hard-coded, it's now possible to expand pages with new content, as well as modify and reorganize it, all without having to make any changes to the templates themselves.

Grid layouts

When precise layout matters, you can also specify the responsive column layout for a row of blocks like this:

{! blocks/group ?id[]=block-1 &id[]=block-2 &id[]=block-3 &units=25,50,25 &divs=on !}

This tells it to load three specific blocks with IDs "block-1", "block-2", and "block-3", giving them a three-column layout with widths 25%, 50%, and 25%, respectively.

The divs=on option specifies that each block should be wrapped in its own <div class="block" id="block-{$block->id}"> tag, where the id attribute's value is the block ID prefixed with block-. This gives you more flexibility when styling your blocks the way you want.

Note: The rows=on setting automatically sets divs=on as well.

Blocks embedded in other content

The last feature we've added for blocks/group is to be able to embed it into any web page, blog post, or even inside of another content block!

You'll find it under the Dynamic Objects menu, which can be accessed by clicking on the rightmost icon in Elefant's wysiwyg editor.

To add a block group to a page on your site, edit the page and open the Dynamic Objects menu, then select Blocks: Group.

Next, you can configure several options before embedding it into the page. These are:

Match block IDs - This tells Elefant which block or blocks to show. You can match a set of blocks using the asterisk (*) as a wildcard character or specify the individual block IDs separated by commas.

How many columns - This lets you choose the column configuration for your block group. The default is 50-50, meaning two equal-width columns. You can choose anything from that down to 20-20-20-20-20, meaning five equal-width columns, as well as Multiple rows, which means to make each block full-width and shown one on top of the other.

Title heading level - This lets you specify the HTML heading level to use for the block titles (e.g., H3 becomes <h3>).

Once you've chosen your settings and set your matching block IDs, click the Embed button, then save the changes to your page.

When you visit your page, you should now see add buttons where you can add custom content blocks in your chosen configuration. If the blocks already exist, you should see them embedded already in your page body.

Styling your block groups

The last step is styling your blocks to make your site look the way you want.

You get the grid layout for free thanks to Elefant's built-in grid system, which can be found in the admin/util/minimal-grid helper, but you'll usually want to add your own styles on top of it.

Block groups that only span a single row generate the following HTML:

<div class="e-col-25 block" id="block-1"> <h3>Title</h3> <p>Contents </p></div> <div class="e-col-75 block" id="block-2"> <h3>Title</h3> <p>Contents </p></div>

Block groups that span multiple rows generate the following HTML:

<div class="block-group-wrapper"> <div class="block-outer" id="block-outer-block-1"> <div class="e-row"> <div class="e-col-100 block" id="block-1"> <h3>Title</h3> <p>Contents </p></div> </div> </div> <div class="block-outer" id="block-outer-block-2"> <div class="e-row"> <div class="e-col-100 block" id="block-2"> <h3>Title</h3> <p>Contents </p></div> </div> </div> </div>

If a background image is set on a block, blocks/group will add the following style attribute to the .block-outer element if rows=on, or to the .block element otherwise.

style=" background-image: url('/files/bg.png'); background-size: cover; background-position: 50% 50%"

Thanks for reading and I hope this helps you craft designs that give you the flexibility you need for marketing pages and in general.

[ridinganelefant]

Elefant 2.2.1

Elefant 2.2.1 has been released with quite a few improvements and fixes.

Click here to download or update.

Highlights

Updated blocks editing to match pages and blog posts

Added background image field to blocks

Updates to {! blocks/group !} helper, making it a flexible page layout tool

Added default thumbnail to Site Settings for Open Graph and Twitter Cards

Added search bar to the file manager and improved file browser usability

Improved usability of site navigation admin screen

Added Alt+E quick key combo to open/close admin toolbar

Added opcache.preload support for speeding up websites running PHP 7.4+

Several other API improvements

Click here for the full list of changes.

[ridinganelefant]

Elefant 2.2.0

Elefant 2.2.0 has been released with dozens of enhancements and bug fixes.

Click here to download or update.

Highlights

Redesigned web page and blog post edit forms

Automatic Open Graph/Twitter Card tags for pages

Command line usage improvements including new endpoint testing commands

Improved performance and compatibility with newer versions of PHP

File manager improvements including confirmation to overwrite existing files

Blog post permalinks can be customized

Added keywords and description fields to blog posts

Added issue date and expiry of API tokens

And many more

Click here for the full list of changes.

[ridinganelefant]

Elefant 2.0.9

Elefant 2.0.9 has been released with a couple security enhancements, improved search capabilities, and a number of improvements and bug fixes.

Click here to download or update.

Security update

Updated the Apache .htaccess settings and Nginx example configuration to more securely handle files uploaded through the file manager.

Note: Nginx users should copy the following new lines into their server{} block in their Nginx configuration and restart Nginx to apply the update:

location ~ ^/files/.*\.(?!(gif|jpe?g|png|mp4|pdf))$ { add_header Content-disposition "attachment"; }

It was also discovered that file extension limits weren't being verified when renaming files, which has been fixed too.

Search improvements

We've made some big improvements to the search bar for Web Pages, Blog Posts, and Accounts. This also affects Model::where_search(), improving other instances of it as well.

You can now use "quoted text" in searches to search for literal phrases that include spaces.

You can also use -word to omit words from your search. Combined, these improvements give users a lot more flexibility in how they can query their data.

Other improvements

Password recovery page can be overridden with a custom handler.

Added a new |absolutize template filter (usage: {url|absolutize}) to ensure URLs are absolute.

Added conf/envmap.php to map alternate environment variables and to Elefant's own.

Bug fixes

Fixed an issue deleting files.

Fixed empty searches in Model::where_search().

Fixed consistency of HMAC to prefer + instead of %20.

Fixed potential error in blog post parsing.

[ridinganelefant]

Elefant 2.0.8

Elefant 2.0.8 has been released with a number of improvements and bug fixes.

Click here to download or update.

Improvements:

I18n filters now accept DateTime objects in addition to date strings

Added Form::generate_csrf_token() for custom use cases

Minimal grid supports every column size increment of 5%

Image::resize() defaults to auto-detecting the correct format

Access control on WYSIWYG editor plugins so the editor can still be used by non-admins

Updated Google OAuth2 login support and added Google auth credentials to user settings form

Added admin/util/select-buttons helper to convert select boxes to button groups

Let users set jquery_source = Off to disable jQuery completely on the front-end

Force jQuery source to be local if admin

Admin toolbar and admin area usability improvements

Added admin/modal template for admin pages in frames

Upgraded URLify to version 1.1.2-stable

Upgraded Analog to version 1.0.11-stable

Bug fixes:

Fixed error marking file manager app upgraded

Fixed exception in admin toolbar template

Removed PHP 5.3 from travis-ci config, fixed PHPUnit issues on travis-ci

Fixed issue with dollar signs in some database passwords

Fixed warning on templates not always quoting array keys

[ridinganelefant]

Elefant 2.0.7 - Security update

Elefant 2.0.7 has been released with a number of security improvements, as well as a number of bug fixes and other improvements.

Click here to download or update.

Security updates:

Fixed remote execution in file manager (#287)

Fixed remote execution in stylesheet editor (#286)

Improvements:

Added "Now" button next to date field in blog posts

Bug fixes:

Fixed open graph image dimension tags

[ridinganelefant]

Elefant 2.0.4 - Security update

Elefant 2.0.4 has been released with a number of security improvements, as well as a number of bug fixes and other improvements.

Click here to download or update.

Security updates:

Fixed url decoding happening after validation on some file uploads

Increased restrictions in htaccess files

Added .phtml, .pht, .php3, .php4, and .phar to restricted uploads

Limit profile photo uploads to .jpg and .png

Verify .csv and .vcf user imports

Improvements:

Added responsive embed code for YouTube videos

Added superscript button to wysiwyg editor

Added social/cookienotice helper for cookie law compliance

Added .e-col-15 to minimal-grid.css

Added $.recenter_modal() to modal.js and auto-resize on window resize

Close modal dialogs by clicking away

User ID from API tokens is now available via user\Auth\HMAC::$user_id

Added --no-symbols option to ./elefant generate-password

Allow $page->add_style() with ?v= appended to stylesheet links for cache busting

Added month limit to blog archives sidebar

Re-enabled caching on blog archives sidebar

Bug fixes:

Fixed thumbnail preview in blog edit form

Fixed potentially skewed profile photos in accounts

Fixed validation errors in RSS output

Admins should be able to preview scheduled posts

Fixed admin toolbar not correctly fetching list of apps

Fixed use of undefined constant in admin toolbar

Strip script and style tags from open graph post descriptions

[ridinganelefant]

Using Vue.js with the Elefant CMS

This tutorial covers how to setup and use the Vue.js framework with the Elefant CMS.

Prerequisites

You'll need the following prerequisites in order to follow along with this tutorial.

An existing Elefant CMS installation

The NPM package manager

The Vue.js command line interface, installed via npm install --global vue-cli

Setup

First, we'll build a simple Elefant app skeleton.

./elefant build-app example

Next, we'll initialize a Vue.js app inside our new Elefant app.

cd apps/example vue init webpack-simple app cd app npm install

You should be able to see your Vue.js app open in a web browser when you run:

npm run dev

This will run the app on its own and listen for changes as you make them.

Now we need to connect the two together. Edit apps/example/views/index.html and replace its contents with the following to embed your Vue.js app:

<div id="app"></div> <script src="/apps/example/app/dist/build.js"></script>

Lastly, edit webpack.config.js in the generated Vue.js app and change the publicPath from /dist/ to /apps/example/app/dist/. This will correct any relative URLs, such as the Vue.js logo image in src/App.vue:

<img src="./assets/logo.png">

You should now be able to visit the /example page on your Elefant-powered website to see your Vue.js app embedded in the site.

To generate static versions of the Vue.js files for your production website, run:

num run build

Preloading data from Elefant on page load

There's an easy way to pass your initial state from Elefant into Vue.js by serializing Elefant's template data to JSON. Edit apps/example/handlers/index.php and change the $tl->render() call to look like this:

<?php $page->title = 'Example home'; echo $tpl->render ( 'example/index', ['state' => ['msg' => 'Welcome to Your Elefant + Vue.js App']] );

Now if you reopen apps/example/views/index.html all you have to do is add this line to the top of the file:

<script>window._state = {{state|json_encode}};</script>

Connecting this to Vue.js is as easy as adding a create() method to your Vue.js app's src/App.vue:

export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App' } }, created () { this.msg = window._state.msg } }

When you rebuild your Vue.js app and refresh your browser, you should see the message change from "Welcome to Your Vue.js App" to "Welcome to Your Elefant + Vue.js App". You're now ready to pass your own data into your Vue.js app from Elefant.

Connecting to Elefant RESTful endpoints

Lastly, let's connect a simple RESTful API endpoint in Elefant to our Vue.js app. In the file apps/example/lib/API.php enter the following:

<?php namespace example; class API extends \Restful { public $wrap = false; public function get_msg () { return ['msg' => 'This is a new message.']; } }

This is a simple RESTful API that defines a single endpoint method msg. In order to connect it to the web, we need to add a handler apps/example/handlers/api.php with the following:

<?php $this->restful (new example\API);

This endpoint will now be exposed at the URL /example/api/msg. Try it out and you should see the following output in your web browser (note that it may not be displayed with the formatting shown below):

{ "success": true, "data": { "msg": "This is a new message" } }

Now we're ready to connect it to our Vue.js app. Let's use the axios HTTP client:

npm install axios

And in our src/App.vue we simply add these lines to connect it all. Inside the <template> section, add:

<button v-on:click="newMsg">New msg</button>

And in the <script> section, our code becomes:

<script> import axios from 'axios' export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App' } }, created () { this.msg = window._state.msg }, methods: { newMsg: function (evt) { axios.get ('/example/api/msg') .then (response => { this.msg = response.data.msg }) .catch (e => { console.log (e) }) } } } </script>

When you rebuild your Vue.js app and reload the page, you should see a New msg button at the bottom of your app. When you click it, it should change the msg value shown to "This is a new message".

You've now learned how to set Vue.js up to work with the Elefant CMS, including:

How to start a new Elefant app and integrate Vue.js

How to organize your files

How to build as you make changes to your app

How to preload the initial state when a user first visits your app

How to call Elefant's RESTful APIs from your Vue.js app

I hope you enjoyed and found this tutorial useful.

[ridinganelefant]

Elefant 2.0.3-Stable Released

Download or update here

Changes:

Added 'Twitter: Tweet This' option to Dynamic Objects menu to display tweetable quotes in posts and pages.

Improved HMAC validation by making data lowercase to avoid urlencoding differences in other programming languages.

Added client-side validation to filetype validation rule.

Added Facebook Pixel tracking support.

Upgraded MediaElement video player to version 4.2.7

Added new fcallback input validation rule to validate file uploads with a callback (e.g., to validate file contents)

Added 'Video GIF (MP4)' option to Dynamic Objects for mp4 videos as gifs (autoplays, loops, muted, and no player controls)

Fixes:

Fixed an error cancelling forms.

Fixed image size ratio differences in blog sidebar thumbnails.

[ridinganelefant]

Elefant 2.0.2-Stable Released

I realized I haven't updated the blog since Elefant 2.0 was marked stable (download link).

Here are the changes since then:

2.0.2

Upgraded Redactor wysiwyg editor to version 2.11

Upgraded jQuery-filedrop plugin to latest version

2.0.1

Additional type check on $ext in ExtendedModel

Namespace fix in HMAC authenticator

2.0.0

Upgraded MediaElement video player

Added new thumbnails view to blog app's sidebar options

Minor fixes.

I've also made some minor improvements to the Newsletter and DB Manager add-ons as well.

These were fairly small changes, but the file upload and wysiwyg editing updates should be noticeable improvements :)

[ridinganelefant]

Elefant 1.3.12-RC Released

3 weeks and 32 commits later, we're releasing Elefant 1.3.12, the second release candidate leading up to Elefant 2.0. Updates include:

Improved default robots.txt rules for better SEO

Our default robots.txt rules were a bit stricter than necessary around CSS and JavaScript files, so we've made things a bit more open. As search crawlers get ever more sophisticated, this will ensure Elefant-powered sites continue to be SEO-friendly from the start.

Updated Chinese and new Spanish translations

Thanks to @xmory and @atamashi for your translation work. We're up to 13 supported languages now!

New default theme: minimal

It was time to replace the aging default theme before Elefant 2.0 could be released. Elefant has shipped with a built-in, very minimal responsive grid system that has proven itself in various apps now, and is very concise and easy to pick up.

Updated admin theme

We've also updated the theme for all admin pages to use the same responsive grid system. This makes it easy for app developers to be able to use the same helpers and reusable components across both front-facing and admin-facing apps.

Of course, you're free to use any CSS or JavaScript framework for your sites, but this offers an ultra-simple way to get started without having to install anything extra.

Improved upgrade process reliability

The upgrade scripts used by apps weren't as flexible as Elefant's own ./elefant update command, so we've fixed that. The difference is that you can now upgrade several versions at once, so from now on even if you've put off upgrading for a while, you can still get back on track with each app just like you could with the core Elefant CMS and framework.

We've also updated the ./elefant crud-app app generator to generate your own upgrade scripts that take advantage of the latest changes, and update the examples in the documentation as well.

Several other bug fixes

These include:

Upgraded the Redactor WYSIWYG editor to the latest (10.2.4)

Added the new admin/util/editbuttons helper

And more

To download or update, visit the Elefant download page.

[ridinganelefant]

New helper: admin/util/editbuttons

Today on the forum, @twheel reminded me of a previous discussion we had had about edit buttons for custom apps, similar to those used to edit pages and content blocks.

Having just added a big new section to the documentation about helpers, it made me think this was a problem that needed a little abstraction in the way of a reusable helper.

The result of a bit of hacking is the new admin/util/editbuttons helper.

Here's an example of how to add Elefant's familiar edit buttons to your own custom apps.

Step 1. Create a simple CRUD app

With Elefant's command line tool, I created a quick app like this:

./elefant crud-app book id title author isbn published:date description:textarea

This creates an app in apps/books with some basic CRUD functionality. You'll find it in the admin toolbar under Extras > Books.

Step 2. Modify the handler to fetch some books

Next, I opened the file apps/books/handlers/index.php and changed it to the following:

<?php $page->title = __ ('Books'); $books = books\Book::query () ->order ('published', 'desc') ->fetch (); echo $tpl->render ('books/index', ['books' => $books]);

Step 3. Modify the view to show our books

Next, I opened the file apps/books/handlers/index.html and added a loop to display the books.

{% foreach books as book %} <div class="book"> <h3>{{book->title}}</h3> <p>{{book->description}}</p> </div> {% end %}

Step 4. Include the admin/util/editbuttons helper

Lastly, I added the include code to show the edit buttons. This connects to the books\Book model defined in apps/books/models/Book.php as well as the add/edit/delete handlers generated for me in step 1 by the ./elefant crud-app command.

{% foreach books as book %} <div class="book"> <h3>{{book->title}}</h3> {! admin/util/editbuttons ?id=[book->id] &class=books\Book &add=/books/add &edit=/books/edit &delete=/books/delete &versions=true &label=Book !} <p>{{book->description}}</p> </div> {% end %}

And that's it. My newly-generated Books app can now manage a list of books, output them to a page on my site visible at /books, and allow me to manage them from that page.