General

  eZ Systems Website
  Editor documentation


  Developer documentation

  Back to the top

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Tip

You can find all files used and modified in this step on GitHub.

To start working on the scenario of this tutorial, you need to have a minimal working website making use of fundamental eZ Platform functionalities. You need to build it by hand from the ground up, starting with a clean eZ Enterprise installation. Just remember that if you decide to change anything from the way it is shown here, you will need to double-check all code that will be provided here and make sure it fits your website.

Note

Remember to start working with a clean eZ Enterprise installation, not Studio Demo.

To be able to follow all steps of the tutorial, make sure you are installing eZ Enterprise v1.7.0 or later.

Setting up the website

To set up your starter website by hand, you need to follow these steps:

1. Get a clean eZ Enterprise installation

See Step 1: Installation for a guide to installing eZ Enterprise.

2. Create Content Types

Log in to the back end – add /ez to your installation's address (e.g. tutorial.lh/ez) and log in using admin as the login and publish as the password. In the Admin Panel go to Content Types and create two Content Types (under the Content category) with the following settings:

Dog Breed

Name: Dog Breed

Identifier: dog_breed

Content name pattern: <name>

Fields:

Field TypeNameIdentifierRequiredSearchableTranslatable
TextLineNamenameYYY
TextLineShort Descriptionshort_descriptionYYY
ImagePhotophotoY Y 
RichTextFull DescriptiondescriptionYYY

Tip

Name: Tip

Identifier: tip

Content name pattern: <title>

Fields:

Field TypeNameIdentifierRequiredSearchableTranslatable
TextLineTitletitleYYY
TextBlockBodybody  Y

Modify existing Article Content Type

You also need to make one modification of the preexisting Article Content Type. Edit this type, remove the Image field that is of the Content Relation type, and create a new Field in its place:

NameIdentifierField TypeRequiredSearchableTranslatable
ImageimageImage  Y

New image Field in the Article Content Type

Now inserting photos into articles will be easier. Reaching the final result of the tutorial without this change would require you to spend more time creating content, which we want to avoid in this case.

3. Add template, configuration and style files

Place the pagelayout.html.twig  and pagelayout_menu.html.twig files in your app/Resources/views folder. Create a new folder, called full, under views. Place further template files in it:

Place two configuration files in your app/config folder:

Modify the config.yml file that is located in this folder and add the following lines at the end of the imports block:

Code Block
titlein app/config/config.yml
    - { resource: views.yml }
    - { resource: image_variations.yml }

Create an assets/css subfolder in the web folder and add this stylesheet file to it: style.css.

Create an images folder under web/assets and add the header.jpg file to it.

In the src/AppBundle folder create a QueryType subfolder and add LocationChildrenQueryType.php to it. This file allows your folders to display all content that they contain (read up on it in the documentation).

Finally, add the following files in src/, to create dynamic links in the top menu:

All the files we've placed in src/are not the scope of this tutorial and we won't go here into detail on how they work.

This is what the structure of the new and modified files should look like (excluding preexisting files):

File structure

4. Create content

Now return to the app and create some content for your website.

First, make three Folders under the Home Content item. Call them All Articles, Dog Breed Catalog and All Tips.

Next, create a few Content items of proper Content Types in each of these folders:

  • 6 Articles (at least, to best see the effects of Schedule blocks that we will deal with in step 3.)
  • 3 Dog Breeds
  • 3 Tips

 When you need an image, preferably use one from our image pack, as this will let you compare the effect of your work to screenshots in the tutorial text.

At this point you are ready to proceed with the next step.

 


 

Section
Column
width50%

  Previous: eZ Enterprise Beginner Tutorial - It's a Dog's World

Column
Panel
borderColor#f58220
bgColor#ffffff
borderWidth2
titleBGColor#ffffff
titleTutorial path

Page Tree
rooteZ Enterprise Beginner Tutorial - It's a Dog's World