imageflow-prototype

A working responsive prototype of the new WordPress Image Flow - no integration with WordPress data.

N.B. There has been some concern that we are trying to push for integtation of Angular.js into core through this prototype. This is not thse case. We are simply using tools that can help us quickly build the most high functioning, representative prototype possible. Very little of this code will go into the feature plugin, all of the concepts that are proven out with the prototype will.

At this juncture of the project (01/15) we have been working towards this point for 6 months, and have spent a solid month and a half going down the Angular.js path, there is little to be gained by re-treading this road. Feel free to jump in and help out, but using a bit of Angular (if you want to work with js) is part of the deal.

You can find the front end of the prototype here.

When the prototype is complete we will test the following flows:

1. User Adds New Image To Post

2. User Adds Existing Image to Post

3. User Edits Existing Image and Adds It To Post
   3a. User Edits Metadata of Existing Image and Inserts into Post

4. User Creates A Gallery

5. User Inserts Multiple Pieces Into Post (ARIS, ROY, PABLO) DONE

6. User Edits Image that is already inserted

How Does This Work?

The prototype is largely based on HTML/CSS/javascript, and is meant to be simple to work with. To facilitate some of the complex transitions and interactive bits we are using AngularJS to power the modal interaction.

To help out, grab an issue from the issue trackers. If you need help, join the WordPress Slack channel #image-flow

Basics

1. Clone the Master branch down to your local machine. All work is being done in the 'singe-app' directory. 2. Inside the folder you will see an index.html file, and a number of other pages. The index file is the main WordPress admin area and post editor that the prototype is launched from. You should not need to edit this file. 3. The other pages are views that are presented in the modal. The first is the media-grid for choosing an image, open it up and you will see that it is largely straightforward HTML. You'll notice that at the top and bottom are ng-include tags. These are used to include a header and footer for the modal. You can see these files in the assets/js/templates folder. These are, again, straight-forward HTML files that are simply broken out to make things easier when we repeat functionality across the prototype. If you need to create a new header or footer, add them to the templates file and change the path in your view.

Foundation

We are using the Foundation framework for our grid and responsive styles. Please try and lean on the framework as much as possible to save time and keep things consistent. You can find useful info to start here:

Grid CSS Responsive Visibility Styles Helpful Classes

Please don't feel restricted by Foundation, some of what we need to do in this prototype falls outside of what Foundation is addressing, if you are battling too hard, just go your own way.

Angular.js

If you are unfamiliar with Angular you can simply make flat HTML views without the fancy javascript stuff. Once that is done, let the group know on Slack, submit a pull request and we will hammer out the interactions and provide feedback.

If you are familiar with Angular, or javascript take a look in the assets/js/app-base.js file. This is the heart of the prototype. At the most basic, you can see the routes starting around line 7. These allow Angular to load the correct content as we move through the prototype.

$routeProvider.when( '/mediaGrid', { templateUrl: '01-media-grid.html', controller: 'mediaGridCtrl', });

The first variable '/mediaGrid' is the path that the app will call. Your href would point to '#/mediaGrid' in this case. The second variable is the name of the file for that view, and the final variable is the name of the controller for that view. Immediately following the routes, are the controllers. These are exactly what they sound like: the controls for the related view. This is where you can write Angular code, or standard javascript, to effect your view. I strongly encourage you to look over the mediaGrid controller as it will give a good indication of how Angular works.

There is a w3schools with some of the basic AngularJS directives and functionality we will be using.

ng-repeat

In each template loaded into the modal that has a grid of images, you will see

ng-repeat="image in images track by $index"

as an HTML attribute on the grid-wrap div. This is similar to a PHP (foreach/while) loop. We are looping through an images array and each individual object is defined as image. While we are looping we have access to anything defined in that object, but in our use case all we have is image.src which is the source path for the image.

ng-click

This is similar to the onclick="" html attribute of days gone by. This runs a function in the Angular Controller that we define. For example the HTML template has something with `ng-click="imageSelect( $index, $event )"`and the controller has `$scope.imageSelect = function( index, event) {...}` defined. You don't always need to pass `$index` and `$event` into the function, however in this use case we needed it for additional logic.

Further reading

[Roy](http://www.roysivan.com/lets-build-wordpress-app-together-part-iii/#.VJMcSYrF_IA) is also blogging about his build of an open source AngularJS app built with WP. It has some AngularJS tutorials and overview concepts. You can find his blog entries related to the project at [ttp://www.roysivan.com/category/wordpress/building-an-app-with-wordpress/](http://www.roysivan.com/category/wordpress/building-an-app-with-wordpress/)

Images

All images that are used in the prototype are in the img folder in the root, and are delivered to the app via data.json in the assets/js folder.