Permalink
Browse files

Add explanations for each image

  • Loading branch information...
parndt authored and bricesanchez committed Nov 7, 2017
1 parent f52a297 commit 90a44fc0ed08f541d285e0973670f4c21850c593
@@ -56,7 +56,7 @@ The extensions Refinery comes with are:
## Creating a new Refinery project
![](https://www.refinerycms.com/system/images/W1siZiIsIjIwMTAvMTIvMDIvMTJfMDdfMTRfNjQ3X3JpY2tfYXN0bGV5X25ldmVyX2dvbm5hX2dpdmVfeW91X3VwLmpwZyJdXQ/rick-astley-never-gonna-give-you-up.jpg?sha=d5fdafec8a158121)
![Never gonna give you up](https://www.refinerycms.com/system/images/W1siZiIsIjIwMTAvMTIvMDIvMTJfMDdfMTRfNjQ3X3JpY2tfYXN0bGV5X25ldmVyX2dvbm5hX2dpdmVfeW91X3VwLmpwZyJdXQ/rick-astley-never-gonna-give-you-up.jpg?sha=d5fdafec8a158121)
If you follow this guide, you'll create a Refinery site called `rickrockstar` that will have a custom design. Then you'll be ready to go further in the following guide and add events extension to allow Rick to tell his fans when his next gig is.
@@ -137,7 +137,7 @@ $ rails server
This will fire up an instance of the built-in Rails web server by default (called WEBrick). To see your application in action, open a browser window and navigate to <http://localhost:3000/refinery>. You should be greeted with a screen prompting you to create your first Refinery user.
![](https://www.refinerycms.com/system/images/W1siZiIsIjIwMTIvMDMvMDQvMTRfMTFfMjRfOTkzX3NldF91cF95b3VyX2ZpcnN0X3VzZXIucG5nIl1d/set-up-your-first-user.png?sha=42b2ae6479070760)
![Set up your first user](https://www.refinerycms.com/system/images/W1siZiIsIjIwMTIvMDMvMDQvMTRfMTFfMjRfOTkzX3NldF91cF95b3VyX2ZpcnN0X3VzZXIucG5nIl1d/set-up-your-first-user.png?sha=42b2ae6479070760)
__TIP__: To stop the web server, hit `Ctrl+C` in the terminal window where it's running.
@@ -151,7 +151,7 @@ Fill out the sign up form to create your first user. This will be the super user
Once you've created your first user you'll see Refinery's admin.
![](https://www.refinerycms.com/system/images/W1siZiIsIjIwMTMvMDYvMDkvMjNfNTdfNDRfNzIxX2Rhc2hib2FyZC5wbmciXV0/dashboard.png?sha=d05ed9da6bb78669)
![Old Dashboard image](https://www.refinerycms.com/system/images/W1siZiIsIjIwMTMvMDYvMDkvMjNfNTdfNDRfNzIxX2Rhc2hib2FyZC5wbmciXV0/dashboard.png?sha=d05ed9da6bb78669)
### Setting Your Site Name
@@ -173,13 +173,13 @@ Now you're setup, click around the various tabs in the backend and become famili
### Switching to your front-end
![](https://www.refinerycms.com/system/images/W1siZiIsIjIwMTAvMTIvMDIvMTJfNTdfMDZfNDIyX3N3aXRjaF90b193ZWJzaXRlLnBuZyJdXQ/switch-to-website.png?sha=a13b44877a69739e)
![Website Frontend](https://www.refinerycms.com/system/images/W1siZiIsIjIwMTAvMTIvMDIvMTJfNTdfMDZfNDIyX3N3aXRjaF90b193ZWJzaXRlLnBuZyJdXQ/switch-to-website.png?sha=a13b44877a69739e)
You're currently in the back-end Refinery site editor. To see the front-end site, click "Switch to your website".
As you can see, Refinery is already displaying a basic menu and layout ready for you to customise.
![](https://www.refinerycms.com/system/images/W1siZiIsIjIwMTIvMDMvMjUvMjNfMjVfMThfNjg1X3JlZmluZXJ5X2RlZmF1bHRfZnJvbnRfZW5kX3NtYWxsLnBuZyJdXQ/refinery-default-front-end-small.png?sha=021f1e16d298eb86)
![Default Basic Layout](https://www.refinerycms.com/system/images/W1siZiIsIjIwMTIvMDMvMjUvMjNfMjVfMThfNjg1X3JlZmluZXJ5X2RlZmF1bHRfZnJvbnRfZW5kX3NtYWxsLnBuZyJdXQ/refinery-default-front-end-small.png?sha=021f1e16d298eb86)
### Customising the Design
@@ -234,7 +234,7 @@ As you can see we're going to render a view with some HTML5 tags and along with
When you edit the About page you'll see something like this:
![](https://www.refinerycms.com/system/images/W1siZiIsIjIwMTMvMDYvMDkvMjNfNTdfNDRfNDg5X2Fib3V0X3BhZ2VfZWRpdC5wbmciXV0/about_page_edit.png?sha=6d88aaa196ad01a2)
![Editing the about page](https://www.refinerycms.com/system/images/W1siZiIsIjIwMTMvMDYvMDkvMjNfNTdfNDRfNDg5X2Fib3V0X3BhZ2VfZWRpdC5wbmciXV0/about_page_edit.png?sha=6d88aaa196ad01a2)
You'll notice two tabs on the page: "Body" and "Side Body". These are `PageParts`, or in other words, a single piece of content attached to this page that you can render in your view. There is a "Body" tab with some content on this screen. To render that same content in your view, put:
@@ -286,7 +286,7 @@ __TIP__: You can add CSS for specific pages by using their slug with `-page`. Th
Now when you view your front-end at <http://localhost:3000/about> you'll notice your site has a grey background, with a horizontal menu and two white content areas.
![](https://www.refinerycms.com/system/images/W1siZiIsIjIwMTAvMTIvMDIvMTRfMjRfNTFfMjI3X2RlZmF1bHRfZGVzaWduX3NtYWxsLnBuZyJdXQ/default-design-small.png?sha=84c3f6a40328b9a6)
![Default design - small image](https://www.refinerycms.com/system/images/W1siZiIsIjIwMTAvMTIvMDIvMTRfMjRfNTFfMjI3X2RlZmF1bHRfZGVzaWduX3NtYWxsLnBuZyJdXQ/default-design-small.png?sha=84c3f6a40328b9a6)
### What we just did
@@ -131,7 +131,7 @@ __TIP__: Models in Refinery extensions expect a string field that acts as the ti
Now go to the backend of your Refinery site ([http://localhost:3000/refinery](http://localhost:3000/refinery)) and
you'll notice a new tab called "Events". Click on "Add new event" and you'll see something like this:
![](https://www.refinerycms.com/system/images/W1siZiIsIjIwMTMvMDYvMDkvMjNfNTdfNDRfODYwX2V2ZW50X3BhZ2VfZWRpdC5wbmciXV0/event_page_edit.png?sha=d45dd13cf1a97d8f)
![Adding an event](https://www.refinerycms.com/system/images/W1siZiIsIjIwMTMvMDYvMDkvMjNfNTdfNDRfODYwX2V2ZW50X3BhZ2VfZWRpdC5wbmciXV0/event_page_edit.png?sha=d45dd13cf1a97d8f)
You'll see the entire form has been generated for you based off the field types you specified when generating the events section. The blurb has a visual editor, the date field is a date picker and the photo allows you to pick or upload a new photo from a built-in Refinery dialog.
@@ -141,9 +141,9 @@ Now click on "Switch to your website", and navigate to <http://localhost:3000/ev
You'll notice not only has Refinery generated the backend "Events" tab but also a new menu item called "Events" and two new front-end views,`index.html.erb` and `show.html.erb`, located in `vendor/extensions/events/app/views/refinery/events/` for you to customise.
![](https://www.refinerycms.com/system/images/W1siZiIsIjIwMTAvMTIvMDIvMTRfMjRfNTFfNDE1X2V2ZW50c19lbmdpbmVfc21hbGwucG5nIl1d/events-engine-small.png?sha=d3af41646dd136ba)
![Events frontend with undesired ordering](https://www.refinerycms.com/system/images/W1siZiIsIjIwMTAvMTIvMDIvMTRfMjRfNTFfNDE1X2V2ZW50c19lbmdpbmVfc21hbGwucG5nIl1d/events-engine-small.png?sha=d3af41646dd136ba)
As you can see, Refinery makes it insanely easy to quickly add new extensions to manage various areas of a site.
As you can see, Refinery makes it really easy to quickly add new extensions to manage various areas of a site.
But I've noticed one problem. The "2011 Music Awards" is showing up in the middle when it makes more sense to order the events with the latest event at the top. To fix this we need to understand what's happening under the hood of a Refinery extension. Let's dive in.
@@ -218,7 +218,7 @@ end
Now when you look at <http://localhost:3000/events> you'll notice they're now being sorted by the event date.
![](https://www.refinerycms.com/system/images/W1siZiIsIjIwMTAvMTIvMDIvMTRfMjRfNTFfMzE0X2V2ZW50c19lbmdpbmVfZml4ZWRfc21hbGwucG5nIl1d/events-engine-fixed-small.png?sha=452dcc1cbd2522c3)
![Finished events frontend](https://www.refinerycms.com/system/images/W1siZiIsIjIwMTAvMTIvMDIvMTRfMjRfNTFfMzE0X2V2ZW50c19lbmdpbmVfZml4ZWRfc21hbGwucG5nIl1d/events-engine-fixed-small.png?sha=452dcc1cbd2522c3)
## What's Next?

0 comments on commit 90a44fc

Please sign in to comment.