diff --git a/docs/administration/project_organization/project_organization.md b/docs/administration/project_organization/project_organization.md index 033a89fc75..87e12c4a99 100644 --- a/docs/administration/project_organization/project_organization.md +++ b/docs/administration/project_organization/project_organization.md @@ -6,8 +6,6 @@ description: A Cohesivo project follows Symfony's directory structure to organiz [[= product_name =]] is a Symfony application and follows the project structure used by Symfony. -You can see an example of organizing a project in the [companion repository](https://github.com/ezsystems/ezplatform-ee-beginner-tutorial/tree/v3-master) for the [Beginner tutorial](page_and_form_tutorial.md). - ## PHP code The project's PHP code (for example, controllers or event listeners) should be placed in the `src` folder. diff --git a/docs/content_management/content_management_guide.md b/docs/content_management/content_management_guide.md index 8d6422a3c2..b0abeef976 100644 --- a/docs/content_management/content_management_guide.md +++ b/docs/content_management/content_management_guide.md @@ -48,7 +48,6 @@ A structure of elements that *store* content information is referred to as the * [[= product_name =]] comes with a predefined content model that includes a broad set of various field types and several content types. You can customize and adapt the content model to your organization's needs and the type of output channel that you use. -If need be, development teams can [create new field types](creating_a_point2d_field_type.md), to enhance editor and visitor experiences. Content managers or even editors can then apply such field types when they modify existing or create new content types. The editing interface lets all users, including those with no coding experience, create or modify certain areas of the content model. diff --git a/docs/content_management/field_types/create_custom_generic_field_type.md b/docs/content_management/field_types/create_custom_generic_field_type.md index 9cd4f1a2d1..8ecff9e3cd 100644 --- a/docs/content_management/field_types/create_custom_generic_field_type.md +++ b/docs/content_management/field_types/create_custom_generic_field_type.md @@ -9,8 +9,6 @@ You can use it as a base for custom field types. The Generic field type comes with the implementation of basic methods, reduces the number of classes which must be created, and simplifies the tagging process. -A more in-depth, step-by-step tutorial can be viewed here: [Creating a Point 2D field type](creating_a_point2d_field_type.md). - !!! tip You should not use the Generic field type when you need a very specific implementation or complete control over the way data is stored. diff --git a/docs/content_management/images/add_image_asset_from_dam.md b/docs/content_management/images/add_image_asset_from_dam.md index 570e53e049..af7cbe9109 100644 --- a/docs/content_management/images/add_image_asset_from_dam.md +++ b/docs/content_management/images/add_image_asset_from_dam.md @@ -83,7 +83,7 @@ In the **Content** group, create a content type for DAM images, which includes t Now, when you use the Embed block in the Page Builder, you should see a DAM Image. -For more information about block customization (defined templates, variations), see [Create custom block](4_create_a_custom_block.md). +For more information about block customization (defined templates, variations), see [Page blocks](../pages/page_blocks.md). ## Extend DAM support by adding custom connector diff --git a/docs/content_management/images/extend_image_editor.md b/docs/content_management/images/extend_image_editor.md index ea28359c2e..aaa733ab12 100644 --- a/docs/content_management/images/extend_image_editor.md +++ b/docs/content_management/images/extend_image_editor.md @@ -31,7 +31,7 @@ Configure the new Image Editor action under the `ibexa.system..image_edit ## Add entry to the Webpack configuration -Once you create and configure the React component, you must add an entry to [the Webpack configuration](3_customize_the_front_page.md#configuring-webpack). +Once you create and configure the React component, you must add an entry to the Webpack configuration. In the root directory of your project, modify the `webpack.config.js` file by adding the following code: ``` js diff --git a/docs/content_management/pages/ibexa_connect_scenario_block.md b/docs/content_management/pages/ibexa_connect_scenario_block.md index a3bd9a0fc4..8dfb24d33d 100644 --- a/docs/content_management/pages/ibexa_connect_scenario_block.md +++ b/docs/content_management/pages/ibexa_connect_scenario_block.md @@ -11,7 +11,6 @@ Scenario block is a regular [Page block](page_blocks.md) and can be configured o !!! caution When setting up your instance, ensure you have profiler enabled. - To set up Page Builder in [[= product_name =]], follow the [Page and Form tutorial](page_and_form_tutorial.md). ## Scenario block configuration diff --git a/docs/getting_started/first_steps.md b/docs/getting_started/first_steps.md index 2cdbb1df34..d9c7f570f9 100644 --- a/docs/getting_started/first_steps.md +++ b/docs/getting_started/first_steps.md @@ -7,10 +7,6 @@ description: Start off working with Cohesivo by doing initial configuration and This page lists first steps you can take after installing [[= product_name =]]. These steps are the most common actions you may need to take in a new installation. -!!! tip "Beginner tutorial" - - To go through a full tutorial that leads from a clean installation to creating a full site, see [Beginner tutorial](beginner_tutorial.md). - ## Remove welcome page ![Welcome page](welcome_page.png) diff --git a/docs/index.md b/docs/index.md index ca5b81aa9f..1201229904 100644 --- a/docs/index.md +++ b/docs/index.md @@ -6,22 +6,6 @@

Ibexa Developer Documentation

How to start?

-
- -
- -
-
-
- Details - -
-
- Follow the Beginner tutorial -
-
- -
diff --git a/docs/tutorials/beginner_tutorial/1_get_ready.md b/docs/tutorials/beginner_tutorial/1_get_ready.md deleted file mode 100644 index 1dc760fcd5..0000000000 --- a/docs/tutorials/beginner_tutorial/1_get_ready.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -description: Start the tutorial by getting a clean installation of Cohesivo. ---- - -# Step 1 — Get ready - -To begin the tutorial, you need a clean installation of [[= product_name =]]. - -The clean installation contains only a root content item which displays a welcome page. - -![Front page after clean installation](welcome_page.png) - -You can replace the welcome page with your own in step 3. - -To remove it for now, go to `config/packages/` and delete the `ibexa_welcome_page.yaml` file. - -You can now start creating the content model. diff --git a/docs/tutorials/beginner_tutorial/2_create_the_content_model.md b/docs/tutorials/beginner_tutorial/2_create_the_content_model.md deleted file mode 100644 index cff82dff74..0000000000 --- a/docs/tutorials/beginner_tutorial/2_create_the_content_model.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -description: Learn how to create a content model consisting of content types and a few sample content items. ---- - -# Step 2 — Create the content model - -How your content is structured is an important part of a [[= product_name =]] project. -Think of it as the database design of your application. - -To get full information, read the [content model](content_model.md) documentation page. -Below is a short introduction that only covers points needed for this tutorial. - -## Content model overview - -The [[= product_name =]] content repository is centered around **content items**. -A content item is a single piece of content, for example an article, a product review, a place, and more. - -Every content item is an instance of a content type. -Content types define what **Fields** are included in each content item. -For example, an article could include fields such as *title*, *image*, *abstract*, *article's body*, *publication date* and *list of authors*. - -Fields can belong to one of the installed **field types**, about 30 in the default distribution. -Each field type is built to represent a specific type of data: a text line, a block of rich text, an image, a collection of relations to content items, and more. -You can find a complete list in the [field types reference](field_type_reference.md) section. -Every field type may have its own options, and comes with its own editing and viewing interfaces. - -## Add a content type - -The site use two content types: **Ride** and **Landmark**. -A Ride is a route of a bike trip. -It can include one or more Landmarks - interesting places you can see along the way. -More than one Ride can visit the same Landmark, so it's similar to an N-N relationship model in a database. - -In this step you add the first content type, Ride. - -Go to the admin interface (`/admin`) and log in with the default username: `admin` using the password specified during installation. - -In the upper-right corner, click the avatar icon to unfold the drop-down menu and disable the [Focus mode]([[= user_doc =]]/getting_started/discover_ui/#focus-mode). - -In the main menu, go to **Content** -> **Content types**. - -You can see a list of **Content type groups**. -They're used to group content types in a logical way. - -Select **Content** and then click the **Create** button. - -![Add a content type button](bike_tutorial_create_content_type.png) - -Fill the form with this basic info: - -- **Name**: Ride -- **Identifier**: `ride` - -Then create all fields with the following information: - -| Field type | Name | Identifier | Required | Searchable | Translatable | -| ------------ | ---------------- | ---------------- | --------- | ---------- | ------------ | -| Text line | Name | `name` | yes | yes | yes | -| Image Asset | Photo | `photo` | no | no | no | -| Rich text | Description | `description` | yes | yes | yes | -| Map location | Starting point | `starting_point` | yes | yes | no | -| Map location | Ending point | `ending_point` | yes | yes | no | -| Integer | Length | `length` | yes | yes | no | - -Confirm the creation of the content type by clicking **Save and close**. - -## Create Rides - -!!! note - - If you're using [[= product_name_exp =]], the root content item in your installation is a Page called "Ibexa Digital Experience Platform". - - For this tutorial, swap it with its child, a Folder called "Ibexa Platform". - - To do this, in the main menu go to **Content** -> **Content structure** -> **Ibexa Digital Experience Platform**, select the **Locations** tab and in the **Swap Locations** section navigate to "Ibexa Platform". - - You can learn how to work with Pages in [another tutorial](page_and_form_tutorial.md). - -Go back to the content by selecting **Content structure** in the main menu. -Then browse the content tree and create a Folder named *All Rides* by clicking the **Create content** button on the top right of the screen. -Publish the Folder. - -While in the folder, create a few of Rides using the **Create content** button, add photos and publish them. - -![Ready for Step 3](bike_tutorial_all_rides_admin.png) - -Once you have two or more Rides in the Folder, you're ready to customize the homepage of the website. diff --git a/docs/tutorials/beginner_tutorial/3_customize_the_front_page.md b/docs/tutorials/beginner_tutorial/3_customize_the_front_page.md deleted file mode 100644 index f67caa305c..0000000000 --- a/docs/tutorials/beginner_tutorial/3_customize_the_front_page.md +++ /dev/null @@ -1,270 +0,0 @@ ---- -description: Try customizing the front page by using custom templates and adding assets. ---- - -# Step 3 — Customize the front page - -In this step you can create the global layout of your site, and display content by using custom templates. - -First, go to the root of the site (``). -You should now see the home page of the clean install, without any kind of layout. -You can customize this step by instructing the platform to use a custom template to render this content item. - -## Content rendering configuration - -To use a custom template when rendering the root content, create a `content_view` configuration block for `ibexa`. - -!!! note - - When pasting YAML code, pay attention to indentation and levels. - The code blocks shown here include the full structure of the YAML file to help you learn where to place new blocks. - Be careful not to duplicate existing keys, because YAML doesn't allow it. - -Edit `config/packages/ibexa.yaml`. -Add the following block under `site` while paying attention to indentation - `content_view` should be one level below `site`: - -``` yaml -ibexa: - system: - site: - content_view: - full: - home_page: - template: full/home_page.html.twig - match: - Id\Location: 2 -``` - -This tells [[= product_name =]] to use the `template` when rendering content with Location ID `2`. -`2` is the default location for the root content item. - -`Id\Location` is one of several [view matchers](view_matcher_reference.md) that you can use to customize rendering depending on different criteria. - -!!! note "Clear the cache" - - Each time you change the YAML files, you should clear the cache. - It's not mandatory in dev environment. - - To clear the cache: - - ``` bash - php bin/console cache:clear - ``` - -## Create template and layout - -### Create the first template - -Next, you need to create the template that you indicated in configuration. - -For the time being, fill the template with a basic "Hello world" message. - -Create a `home_page.html.twig` file in `templates/full/`: - -``` html+twig -
-

Hello World!

-
-``` - -Refresh the page to see an unstyled version of the message. - -!!! note - - If you still see the welcome page, go to `config/packages/` and make sure you deleted the `ibexa_welcome_page.yaml` file. - -### Add the site's main layout - -Most sites have a general layout which includes things like header with a logo or footer. -It's displayed on every page, and the content of the page is placed inside it. - -To add a template like this to your site, create a `main_layout.html.twig` file in `templates/` and paste the following code into it: - -``` html+twig hl_lines="12 89" - - - - - - - - - - Cohesivo Beginner Tutorial - - - - {{ encore_entry_link_tags('tutorial') }} - - - - - - - - - - - -
-
- -
-
- -
-
-
-
- {% block content %} - {% endblock %} -
-
-
-
- - - - -{{ encore_entry_script_tags('tutorial-js') }} - - - -``` - -In the highlighted lines (12 and 89) the template takes advantage of [Symfony Webpack Encore]([[= symfony_doc =]]/frontend.html#webpack-encore). -This tutorial leads you through configuring Webpack, but first you need assets. - -### Adding assets - -The site has no stylesheets or assets yet. -You need to download [`assets.zip`](img/assets.zip) which contains the prepared asset files. - -Then unpack its contents to the following directories: - -- `css`, `fonts`, and `js` folders to `assets/` -- `images` folder to `public/assets/` - -Before proceeding, ensure that the structure of the added files looks like this: - -![File structure](bike_tutorial_listing_web_v3.png) - -### Configuring Webpack - -In [[= product_name =]], you can add assets by using [Symfony Webpack Encore]([[= symfony_doc =]]/frontend.html#webpack-encore) -— an integration of Webpack that enables you to build bundles of CSS stylesheets and JS scripts and add them to the project. - -For more information, see [Importing assets from a bundle](importing_assets_from_bundle.md). - -To create bundles, first, indicate which files to include in them. - -Open the `webpack.config.js` file located in the root folder of your project. -Paste the following code right under `Encore.addEntry('app', './assets/app.js');`: - -``` javascript hl_lines="2 8" -Encore - .addStyleEntry('tutorial', [ - path.resolve(__dirname, './assets/css/normalize.css'), - path.resolve(__dirname, './assets/css/bootstrap.min.css'), - path.resolve(__dirname, './assets/css/bootstrap-theme.css'), - path.resolve(__dirname, './assets/css/style.css') - ]) - .addEntry('tutorial-js', [ - path.resolve(__dirname, './assets/js/bootstrap.min.js') - ]); -``` - -`.addStyleEntry('tutorial', [])` and `.addEntry('tutorial-js', [])` refer to `{{ encore_entry_link_tags('tutorial') }}` and `{{ encore_entry_script_tags('tutorial-js') }}` from `main_layout.html.twig`. -This configuration creates a bundle consisting of files to be added to a template. - -At this point the bundles are created and ready to be used. - -### Extending templates - -Now you have to add the `main_layout.html.twig` template that uses the assets to the `home_page.html.twig` template. - -To add one template to another, edit `templates/full/home_page.html.twig` and replace it with the following code: - -``` html+twig hl_lines="1 3 7" -{% extends "main_layout.html.twig" %} - -{% block content %} -
-

Hello World!

-
-{% endblock %} -``` - -The templating language Twig supports [template inheritance](https://twig.symfony.com/doc/3.x/tags/extends.html). -Templates can contain named blocks. -Any template can extend other templates, and modify the blocks defined by its parents. - -The code above points to `main_layout.html.twig` in line 1. -It also wraps your "Hello world" message in a `content` block. -If you look back at the main layout template, you can see an empty `{% block content %}{% endblock %}` section (lines 52-53). -This is where the `home_page.html.twig` is rendered. - -Clear the cache and regenerate the assets by running the following commands: - -``` bash -php bin/console cache:clear -php bin/console assets:install -yarn encore -``` - -!!! tip - - You should run the `yarn encore` command with the [environment](environments.md) you're using. - - By default, [[= product_name =]] installs in the dev environment. - If you changed it to prod, use `yarn encore prod`. - -Refresh the page and you should see the "Hello world" placed inside a styled layout. - -![Homepage with a Hello world](bike_tutorial_hello_world.png) - -At this point, the template is static. -It doesn't render any dynamic data from the repository. diff --git a/docs/tutorials/beginner_tutorial/4_display_single_content_item.md b/docs/tutorials/beginner_tutorial/4_display_single_content_item.md deleted file mode 100644 index cf33722aa0..0000000000 --- a/docs/tutorials/beginner_tutorial/4_display_single_content_item.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -description: Learn how to render content details with a custom template. ---- - -# Step 4 — Display a single content item - -You render a list of all Rides here in the next step. -But before that, you can use the existing page layout to render the content of a single Ride. - -## Create the Ride view - -Create a Twig template `templates/full/ride.html.twig` with the following code: - -``` html+twig -{% extends "main_layout.html.twig" %} -{% block content %} -
-
-
-
-

{{ content.name }}

-
-
-
-
-
-
-
-

{{ 'Starting point'|trans }}

- {{ ibexa_render_field(content, 'starting_point', {'parameters': { 'width': '100%', height: '200px', 'showMap': true, 'showInfo': false }}) }} -
-
-

{{ 'Ending point'|trans }}

- {{ ibexa_render_field(content, 'ending_point', {'parameters': { 'width': '100%', height: '200px', 'showMap': true, 'showInfo': false }}) }} -
-
-
-
-
-
-
-
-
-

{{ ibexa_render_field( content, 'length') }} km

-
-
-
-

{{ 'Description'|trans }}

- {{ ibexa_render_field( content, 'description') }} -
-
-
-
-
-{% endblock %} -``` - -This template reuses `main_layout.html.twig` and again places the template in a `content` block. - -!!! tip "Previewing available variables" - - You can see what variables are available in the current template with the `dump()` Twig function: - - ``` html+twig - {{ dump() }} - ``` - - You can also dump a specific variable: - - ``` html+twig - {{ dump(location) }} - ``` - -Now you need to indicate when this template should be used. - -Go back to `config/packages/ibexa.yaml` and add the following configuration (under the existing `content_view` and `full` keys:): - -``` yaml -site: - content_view: - full: - # existing keys, don't change them - ride: - template: full/ride.html.twig - match: - Identifier\ContentType: ride -``` - -This tells the application to use this template whenever it renders the full view of a Ride. - -## Check the Ride full view - -Because you don't have a list of Rides on the front page yet, you cannot click a Ride to preview it. -But you still can see how the template works in two ways: - -### Preview in the back office - -You can use the [preview]([[= user_doc =]]/content_management/preview_content_items/) while editing in the back office to see how the content is rendered in full view. - -![Full ride preview in admin](bike_tutorial_preview_full_ride.png) - -### Go to the Ride page - -You can also go directly to the URL of a Ride. - -The URL for a Ride content item located in the "All Rides" Folder is `http:///all-rides/`. diff --git a/docs/tutorials/beginner_tutorial/5_display_a_list_of_content_items.md b/docs/tutorials/beginner_tutorial/5_display_a_list_of_content_items.md deleted file mode 100644 index 4f994a85c9..0000000000 --- a/docs/tutorials/beginner_tutorial/5_display_a_list_of_content_items.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -description: Learn how to query for content and render it in a list. ---- - -# Step 5 — Display a list of content items - -Now that you know how to display a single content item, you can take care of rendering a list of content items. - -In this step you can display a table of all Rides on the front page. - -The pagination uses default styling, as this tutorial focuses on functionality. - -## Customize the homepage template - -In `templates/full/home_page.html.twig` replace the "Hello world" with a table that displays the list of all existing Rides: - -``` html+twig hl_lines="15 16" -{% extends "main_layout.html.twig" %} - -{% block content %} -
- - - - - - - - - - - {% for ride in rides.currentPageResults %} - {{ render( controller( 'ibexa_content::viewAction', { 'location': ride.valueObject, 'viewType': 'line' } )) }} - {% endfor %} - -
{{ 'Ride'|trans }}{{ 'From'|trans }}{{ 'To'|trans }}{{ 'Distance'|trans }}
- {% if rides.haveToPaginate() %} -
- -
- {% endif %} -
-{% endblock %} -``` - -The `rides` variable you use in line 15 above needs to contain a list of all Rides. -To get this list, you use a Query Type. - -## Create a QueryType for the home page - -QueryType objects are used to limit and sort results for content item queries. - -For more information, see [Built-In Query Types](built-in_query_types.md). - -Here, you need to display `ride` objects that have been published (are visible). -Create a `RideQueryType.php` file in `src/QueryType`: - -``` php hl_lines="22-23" - $parameters */ - public function getQuery(array $parameters = []): \Ibexa\Contracts\Core\Repository\Values\Content\LocationQuery - { - return new LocationQuery([ - 'filter' => new Criterion\LogicalAnd( - [ - new Criterion\Visibility(Criterion\Visibility::VISIBLE), - new Criterion\ContentTypeIdentifier(['ride']), - ] - ), - ]); - } - - public function getSupportedParameters(): array - { - return []; - } -} -``` - -This Query Type finds all visible content items that belong to the `ride` content type (lines 21-22). - -Now you need to indicate that this Query Type is used in your configuration. - -## Add Query Type to configuration - -Edit `config/packages/ibexa.yaml`. -In the view configuration for the home page indicate that this view uses the Query Type: - -``` yaml hl_lines="6 10 11 12 13 14 15" -site: - content_view: - full: - # existing keys, don't change them - home_page: - controller: ibexa_query::pagingQueryAction - template: full/home_page.html.twig - match: - Id\Location: 2 - params: - query: - query_type: Ride - limit: 4 - assign_results_to: rides -``` - -The `query_type` parameter in line 12 indicates which Query Type to use. -You defined the name `Ride` in the Query Type file in the `getName` method. - -Using the `pagingQueryAction` of the built-in `ibexa_query` controller (line 6) enables you to automatically get paginated results. -You can set the limit of results per page in the `limit` parameter. - -### View types - -So far you have been using the `full` view type to render the Ride's full view. -Here, on the other hand, you use the `line` view, as indicated by `'viewType': 'line'` in the home page template (line 16). - -You can configure custom view types with any name you want, as long as you include them in the configuration. -Let's do this now with the `line` view for Rides. - -## Create a line template for Rides - -Add a rule for the `ride` template in your `config/packages/ibexa.yaml` file. -`line` should be at the same level as `full`. - -``` yaml -system: - site: - content_view: - line: - ride: - template: line/rides.html.twig - match: - Identifier\ContentType: ride -``` - -Create the `templates/line/rides.html.twig` template. - -Because this template is rendered inside a table, it starts with a `` tag. - -``` html+twig - - - - - {{ content.name }} - - {% if not ibexa_field_is_empty( content, 'photo' ) %} - {{ ibexa_render_field(content, 'photo') }} - {% endif %} - - - - {{ ibexa_render_field(content, 'starting_point', {'parameters': {'width': '100%', 'height': '100px', 'showMap': true, 'showInfo': true }}) }} - - - {{ ibexa_render_field(content, 'ending_point', {'parameters': {'width': '100%', 'height': '100px', 'showMap': true, 'showInfo': true }}) }} - - -

{{ ibexa_render_field( content, 'length' ) }} Km

- - -``` - -### Media permission - -To be able to view the `photo` field you need to have a `content/read` permission to `Media` section. - -To verify that you have this permission, in the main menu, go to **Admin** (gear icon) -> **Roles**, and click the **Anonymous** role. -If needed, edit the **Content/Read** policy line to add the `Media` section to **Limitation** along with the `Standard` section. - -![Policies for the Anonymous Role with Media section](step5_admin_anonymous_policies_with_media_section.png) - -Now go to the homepage of your website and you can see the list of Rides. -However, the Ride photos are too large and stretch the table. -In the next step you can ensure they're displayed in proper size. diff --git a/docs/tutorials/beginner_tutorial/6_improve_configuration.md b/docs/tutorials/beginner_tutorial/6_improve_configuration.md deleted file mode 100644 index 3560422043..0000000000 --- a/docs/tutorials/beginner_tutorial/6_improve_configuration.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -description: See how you can manage Cohesivo configuration files. ---- - -# Step 6 — Improve configuration - -## Define image variations - -Image variations are different versions of the same image. -You can use them, for example, to scale images, crop them, or add effects. - -So far the images in the ride list are fitted to the templates automatically, and the result doesn't look good. -Now you can create a variation to specify how you want the images to look in detail. - -Create a new `config/packages/image_variations.yaml` file containing: - -``` yaml -ibexa: - system: - default: - image_variations: - ride_list: - reference: null - filters: - - {name: geometry/scaledownonly, params: [140, 100]} -``` - -Next, modify the templates to use these variations. -Variation names are provided as parameters when rendering the image content. - -In `templates/line/rides.html.twig` add the `'alias': 'ride_list'` parameter in the following way, in lines 8-10: - -``` html+twig -{% if not ibexa_field_is_empty( content, 'photo' ) %} - {{ ibexa_render_field(content, 'photo', { - 'parameters': { - 'alias': 'ride_list' - } - }) }} -{% endif %} -``` - -This ensures that the photo displayed next to each Ride in the list is scaled down properly with proportions retained. - -Clear cache and refresh the front page. -Photos should now have a regular size and fit in the table. - -![Ride list with proper image variations](bike_tutorial_ride_list.png) - -## Separate view configuration - -In a larger site there are many elements that need configuration. -To keep it more organized, you can split parts of configuration into separate files. - -As an example, you can separate all content view configuration into its own file. -Create a `config/packages/views.yaml` file. -Copy everything under `content_view` from `config/packages/ibexa.yaml` and move it to the new file. -Remove the corresponding code from `ibexa.yaml`. - -The `views.yaml` file should look like this: - -``` yaml -ibexa: - system: - site: - content_view: - full: - home_page: - controller: ibexa_query::pagingQueryAction - template: full/home_page.html.twig - match: - Id\Location: 2 - params: - query: - query_type: Ride - limit: 4 - assign_results_to: rides - ride: - template: full/ride.html.twig - match: - Identifier\ContentType: ride - line: - ride: - template: line/rides.html.twig - match: - Identifier\ContentType: ride -``` diff --git a/docs/tutorials/beginner_tutorial/7_embed_content.md b/docs/tutorials/beginner_tutorial/7_embed_content.md deleted file mode 100644 index c9404e183b..0000000000 --- a/docs/tutorials/beginner_tutorial/7_embed_content.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -description: Learn how to embed related content in another content item's template. ---- - -# Step 7 — Embed content - -Creating lists and detailed views of content types and their respective items often involves loading related resources. -In this step, you add a related object, a Landmark, which is displayed on Ride pages. - -You can add as many or as little related resources as you like. - -## Add the Landmark content type - -Now you need to add the second content type needed in the site, Landmark. - -Go to **Content types**, and in the **Content** group, add the Landmark content type. - -A Landmark is an interesting place that Rides go through. -Each Ride may be related to multiple Landmarks. - -- **Name**: Landmark -- **Identifier**: landmark - -Then add all fields with the following information: - -| Field type | Name | Identifier | Required | Searchable | Translatable | -| ------------ | ---------------- | ---------------- | --------- | ---------- | ------------ | -| Text line | Name | `name` | yes | yes | yes | -| Rich text | Description | `description` | no | yes | yes | -| Image Asset | Photo | `photo` | yes | no | no | -| Map location | Location | `location` | yes | yes | no | - -Confirm the creation of the content type by selecting **Create**. - -Create a *Landmarks* Folder and add some Landmarks to it. -You need pictures (for the Photo field) to represent them. - -## Add Landmarks to Ride content type definition - -Now edit the Ride content type to add a Multiple Content Relation between the two content types. -Create a new **Content relations (multiple)** field called "Landmarks" with identifier `landmarks` and allow content type "Landmark" to be added to it: - -![Adding Landmarks to the Ride content type](bike_ride_adding_landmarks_to_the_ride_content_type.png "Adding a relation between the Ride and the Landmark using Content Relations (multiple)") - -Confirm by clicking **Save and close**. - -Go back to one of your existing Rides, edit it and link some Landmarks to it. -Click **Publish**. - -## Display a list of Landmarks in Ride view - -### Create Landmark line view - -Now you need to create the line view for Landmarks. - -Declare a new override rule in `config/packages/views.yaml`: - -``` yaml -ibexa: - system: - site: - content_view: - #full views here - line: - landmark: - template: line/landmark.html.twig - match: - Identifier\ContentType: landmark -``` - -Add the template for the line view of a Landmark by creating `templates/line/landmark.html.twig`: - -``` html+twig hl_lines="4" -
-
- - {{ ibexa_render_field( content, 'photo', { parameters: { 'alias': 'landmark_list', 'class': 'img-rounded'}}) }} - -
- - {# MODAL #} - -
-``` - -Like before, you use an image variation here (line 4) and you need to configure it. -Add the following section to `config/packages/image_variations.yaml`, at the same level as `ride_list`: - -``` yaml -landmark_list: - reference: null - filters: - - {name: geometry/scalewidth, params: [200]} -``` - -### Create the RideController - -You must provide additional information when the Ride object is displayed. -This requires creating a custom controller. -The controller uses `ContentService` to load related resources (Landmarks) for a particular Ride. - -Create a `src/Controller/RideController.php` file: - -``` php -getContent(); - $landmarksListId = $currentContent->getFieldValue('landmarks'); - $landmarksList = []; - - foreach ($landmarksListId->destinationContentIds as $landmarkId) { - $landmarksList[$landmarkId] = $this->contentService->loadContent($landmarkId); - } - - $view->addParameters(['landmarksList' => $landmarksList]); - - return $view; - } -} -``` - -Update `config/packages/views.yaml` to mention the `RideController.php` by adding a line with the `controller` key to the view config: - -``` yaml hl_lines="8" -ibexa: - system: - site: - content_view: - full: - ride: - template: full/ride.html.twig - controller: App\Controller\RideController::viewRideWithLandmarksAction - match: - Identifier\ContentType: ride -``` - -### Add the Landmark in the Ride full view - -Now modify the Ride full view template to include a list of Landmarks, and the controller that you created. -Add the following lines at the end of `templates/full/ride.html.twig`, before the last `
` and the closing tag `{% endblock %}`: - -``` html+twig -{% if landmarksList is not empty %} -
-
-
-

{{ 'Landmarks'|trans }}

-
- {% for landmark in landmarksList %} - {{ render( controller( "ibexa_content::viewAction", { 'content': landmark, 'viewType': 'line'} )) }} - {% endfor %} -
-
-{% endif %} -``` - -You can now check the Ride page again to see all the connected Landmarks. - -!!! tip - - You can use `dump()` in Twig templates to display all available variables. - -![Ride full view with Landmarks](bike_tutorial_ride_with_landmarks.png) diff --git a/docs/tutorials/beginner_tutorial/8_enable_account_registration.md b/docs/tutorials/beginner_tutorial/8_enable_account_registration.md deleted file mode 100644 index b455c8e4ce..0000000000 --- a/docs/tutorials/beginner_tutorial/8_enable_account_registration.md +++ /dev/null @@ -1,242 +0,0 @@ ---- -description: See how you can enable external users to register and contribute to your site. ---- - -# Step 8 — Enable account registration - -In this step you enable other users to create accounts on your site, access the back office and create content. - -## Enable registration - -In the main menu, go to **Admin** (gear icon) -> **Roles**, and click the **Anonymous** role. - -![Available roles](step_8_role_mgmt_screen.png) - -Add the `User/Register` policy to the Anonymous user. -This allows any visitor to the website to access the registration form. - -![Policies for the Anonymous Role](step8_admin_anonymous_policies.png) - -Then go to `/register`. -The registration form is unstyled, so you need to add templates to it. - -## Customize registration forms - -In the `config/packages/views.yaml` file add a `user_registration` key under `site`, at the same level as `content_view`: - -``` yaml -ibexa: - system: - site: - # existing content_view keys - user_registration: - templates: - form: user/registration_form.html.twig -``` - -This indicates which template is used to render the registration form. - -Create the file `templates/user/registration_form.html.twig`: - -``` html+twig hl_lines="10" -{% extends "main_layout.html.twig" %} - -{% block page_head %} - {% set title = 'Register user'|trans %} - - {{ parent() }} -{% endblock %} - -{% block content %} - {% import 'user/registration_content_form.html.twig' as registrationForm %} - -
-
-

{{ 'Member Registration'|trans }}

-
* {{ 'All fields are required'|trans }}
- - {{ registrationForm.display_form(form) }} -
-
-{% endblock %} -``` - -In line 10 you can see that another file is imported: `registration_content_form.html.twig`. -The second template renders the actual fields of the registration form. -Create this file as well (as `templates/user/registration_content_form.html.twig`): - -``` html+twig -{% macro display_form(form) %} - {{ form_start(form) }} - - {% for fieldForm in form.fieldsData %} - {% set fieldIdentifier = fieldForm.vars.data.fieldDefinition.identifier %} - - {% if fieldIdentifier == 'first_name' or fieldIdentifier == 'last_name' %} - {% if fieldIdentifier == 'first_name' %} -
- {% endif %} -
-
- -
- {{ form_errors(fieldForm.value) }} - {{ form_widget(fieldForm.value, { - 'contentData': form.vars.data - }) }} -
- {% if fieldIdentifier == 'last_name' %} -
- {% endif %} - {% endif %} - - {% if fieldIdentifier == 'user_account' %} -
-
- {{ form_widget(fieldForm.value, { - 'contentData': form.vars.data - }) }} -
-
- {% endif %} - - {%- do fieldForm.setRendered() -%} - {% endfor %} - -
-
- {{ form_widget(form.register, {'attr': { - 'class': 'btn btn-block btn-primary' - }}) }} -
-
- - {{ form_end(form) }} -{% endmacro %} -``` - -The third template you need to prepare covers the confirmation page that is displayed when a user completes the registration. -First, point to the new template in the configuration. -Add a `confirmation` key to `config/packages/views.yaml`: - -``` yaml hl_lines="4" -user_registration: - templates: - form: user/registration_form.html.twig - confirmation: user/registration_confirmation.html.twig -``` - -Then create the `templates/user/registration_confirmation.html.twig` template: - -``` html+twig -{% extends "main_layout.html.twig" %} - -{% block page_head %} - {% set title = 'Registration complete'|trans %} - - {{ parent() }} -{% endblock %} - -{% block content %} -
-
-

{{ 'Registration completed'|trans }}

- -
- {{ 'You\'re all set up and ready to go'|trans }} -
- -
-
- -
-
-
-
-{% endblock %} -``` - -## Add policy - -In the main menu, go to **Admin** (gear icon) -> **Roles**, and click the **Anonymous** role. -Add the `Content/Create` policy to the Anonymous user. -This allows users to fill in the registration form. - -Now return to `/register`: - -![Complete Register page with the layout](step8_register_page.png) - -Fill in the form and register a user. - -!!! tip - - If you log in as the new user at this point, you need to go to the back office (`/admin`) to log out again re-log in as Admin. - -## Set up Permissions - -Users created through the registration form are placed in the default user group (_Guest accounts_ for [[= product_name_headless =]] and [[= product_name_exp =]], _Customers_ for [[= product_name_com =]] edition). -The user you created has the roles assigned to this group. - -!!! tip - - You can change the group in which new users are placed (but you don't need to do it for this tutorial). - For more information, see [Registering new users](user_registration.md). - -At this point you don't want anyone who registers to be able to add content to the website. -That's why you need to create a new user group with additional permissions. -When the administrator accepts a new user, they can move them to this new group. - -### Create a user group - -In the back office, go to **Admin** -> **Users**, click the **Create content** button and create a user group named `Go Bike Members`. - -### Create a Folder for contributed Rides - -Go to the `All Rides` Folder and create inside it a new Folder named `Member Rides`. -Go Bike Members are only able to create Content in this Folder. - -### Set permissions for Go Bike Members - -From Admin in the **Roles** screen, create a new role named *Contributors*. - -Now add the following policies to the Contributors role. - -- User/Login -- User/Password -- Content/Read -- Content/Versionread -- Content/Create with limitations: content type limited to Ride and Landmark content types and subtree to the `Member Rides` -- Content/Publish with limitations: content type limited to Ride and Landmark content types and subtree to the `Member Rides` -- Content/Edit with limitation: Owner limited to `Self` -- Section/View -- Content/Reverserelatedlist - -!!! tip - - The limitations are a powerful tool for fine-tuning the permission management of the users. - See [the documentation about limitations for more technical details](limitation_reference.md#content-type-group-limitation). - -Once the policies are set, go to the **Assignments** tab and assign the role to the user group *Go Bike Members*. - -Next, go to the users page. -Select the user you created and move them into the *Go Bike Members* user group. - -### Create content as a Go Bike Member - -Log out as admin and then log in again into the back office with the credentials of the new user. -You now have the ability to create new Rides and Landmarks in the selected folder. - -## Congratulations! - -Now you have created your first website with [[= product_name =]]. - -**You learned how to:** - -- create a content model -- organize files in a [[= product_name =]] project -- configure views for different content types -- add assets to a [[= product_name =]] project -- use and configure Webpack Encore -- use Twig templates and controllers to display content -- enable user registration -- manage user permissions diff --git a/docs/tutorials/beginner_tutorial/beginner_tutorial.md b/docs/tutorials/beginner_tutorial/beginner_tutorial.md deleted file mode 100644 index 94f87c174d..0000000000 --- a/docs/tutorials/beginner_tutorial/beginner_tutorial.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -description: Go through a beginner tutorial which presents the Cohesivo content model and show how to configure and use templates to create a basic site. ---- - -# Beginner tutorial - -This tutorial is a step-by-step guide to building a [[= product_name =]] website. - -You can use it with both [[= product_name_headless =]] and [[= product_name_exp =]]. - -## Intended audience - -The tutorial is intended for users who have little or no previous experience with [[= product_name =]]. - -To follow it, you should: - -- Have basic knowledge of HTML and CSS. -- Have basic knowledge of the database you've selected. - -## Learning outcomes - -After finishing this tutorial, you should: - -- know how to construct the content model of a website. -- be able to use templates to display your content according to your needs. -- know how to manage users and permissions. - -## Scenario - -In the course of this tutorial you can build a website for storing and sharing bike rides. -It enables the user to add information and photos of their routes and indicate what interesting points can be visited during the trip. - -## Steps - -In this tutorial you go through the following steps: - -1. [Get ready](1_get_ready.md) -1. [Create the content model](2_create_the_content_model.md) -1. [Customize the front page](3_customize_the_front_page.md) -1. [Display a single content item](4_display_single_content_item.md) -1. [Display a list of content items](5_display_a_list_of_content_items.md) -1. [Improve configuration](6_improve_configuration.md) -1. [Embed content](7_embed_content.md) -1. [Enable account registration](8_enable_account_registration.md) diff --git a/docs/tutorials/beginner_tutorial/img/assets.zip b/docs/tutorials/beginner_tutorial/img/assets.zip deleted file mode 100644 index 83b6ca3585..0000000000 Binary files a/docs/tutorials/beginner_tutorial/img/assets.zip and /dev/null differ diff --git a/docs/tutorials/beginner_tutorial/img/bike_ride_adding_landmarks_to_the_ride_content_type.png b/docs/tutorials/beginner_tutorial/img/bike_ride_adding_landmarks_to_the_ride_content_type.png deleted file mode 100644 index 7050118336..0000000000 Binary files a/docs/tutorials/beginner_tutorial/img/bike_ride_adding_landmarks_to_the_ride_content_type.png and /dev/null differ diff --git a/docs/tutorials/beginner_tutorial/img/bike_tutorial_all_rides_admin.png b/docs/tutorials/beginner_tutorial/img/bike_tutorial_all_rides_admin.png deleted file mode 100644 index e49b77c98f..0000000000 Binary files a/docs/tutorials/beginner_tutorial/img/bike_tutorial_all_rides_admin.png and /dev/null differ diff --git a/docs/tutorials/beginner_tutorial/img/bike_tutorial_create_content_type.png b/docs/tutorials/beginner_tutorial/img/bike_tutorial_create_content_type.png deleted file mode 100644 index bda1ba377a..0000000000 Binary files a/docs/tutorials/beginner_tutorial/img/bike_tutorial_create_content_type.png and /dev/null differ diff --git a/docs/tutorials/beginner_tutorial/img/bike_tutorial_hello_world.png b/docs/tutorials/beginner_tutorial/img/bike_tutorial_hello_world.png deleted file mode 100644 index 666bb40904..0000000000 Binary files a/docs/tutorials/beginner_tutorial/img/bike_tutorial_hello_world.png and /dev/null differ diff --git a/docs/tutorials/beginner_tutorial/img/bike_tutorial_listing_web_v3.png b/docs/tutorials/beginner_tutorial/img/bike_tutorial_listing_web_v3.png deleted file mode 100644 index e27503c087..0000000000 Binary files a/docs/tutorials/beginner_tutorial/img/bike_tutorial_listing_web_v3.png and /dev/null differ diff --git a/docs/tutorials/beginner_tutorial/img/bike_tutorial_preview_full_ride.png b/docs/tutorials/beginner_tutorial/img/bike_tutorial_preview_full_ride.png deleted file mode 100644 index 5886240b70..0000000000 Binary files a/docs/tutorials/beginner_tutorial/img/bike_tutorial_preview_full_ride.png and /dev/null differ diff --git a/docs/tutorials/beginner_tutorial/img/bike_tutorial_ride_list.png b/docs/tutorials/beginner_tutorial/img/bike_tutorial_ride_list.png deleted file mode 100644 index a02c2902fb..0000000000 Binary files a/docs/tutorials/beginner_tutorial/img/bike_tutorial_ride_list.png and /dev/null differ diff --git a/docs/tutorials/beginner_tutorial/img/bike_tutorial_ride_with_landmarks.png b/docs/tutorials/beginner_tutorial/img/bike_tutorial_ride_with_landmarks.png deleted file mode 100644 index 99343d3e8b..0000000000 Binary files a/docs/tutorials/beginner_tutorial/img/bike_tutorial_ride_with_landmarks.png and /dev/null differ diff --git a/docs/tutorials/beginner_tutorial/img/diagram_source/bike_tutorial_listing_web_v3.xml b/docs/tutorials/beginner_tutorial/img/diagram_source/bike_tutorial_listing_web_v3.xml deleted file mode 100644 index 742a5cab3a..0000000000 --- a/docs/tutorials/beginner_tutorial/img/diagram_source/bike_tutorial_listing_web_v3.xml +++ /dev/null @@ -1 +0,0 @@ -7Zpfb5swEMA/TR4bGZu/j03SdpM2tVuldXt0wSVeAWfGtMk+/UywA4Z0SpvQpBIviTkf5+PyOx9HGKFpurzieDH/yiKSjCCIliM0G0Fo2dCVX6VkVUk8LYg5jZRSLbilf4kSAiUtaERyQ1Ewlgi6MIUhyzISCkOGOWfPptoDS8xVFzgmHcFtiJOu9I5GYl5JfQfU8k+ExnO9sgXUTIq1shLkcxyx54YIXYzQlDMmqlG6nJKkDJ6OS3Xe5QuzG8c4ycQuJ4jrx+z7j8Kzr1erb7y4+/J55Z95lZUnnBTqgpWzYqUjQLLovAykPMpYJoWTuUgTeWTJIVlS8VOOgRr/Ksdjz1GHs2VjbrZqHNwQTlMiCFeyB5aJS5zSpFR6ZvyxdAJnuZq6ZQUPS4fmQshfHjroXH7Iay0/SoV8HDMWJwQvaD4OWbqeCPO16uVDZVgOlWkHTprG1cWCbkhVlElkUKICfEWYvAQuDYPnmg2NxryBhZZxkmBBn0y2sEI03pjbrHDDqPQEApVOCIExsFzPCTzPdZCLUGVB5ZblBOPAR9AGUtV2kQfNBfJ1EJXNJintZYBj2nWBaUhgHhPRMSQxwauG2qJUyJsactAIWy1ao/oKbP09sR1o2402AwMYgAPxZO/L027raId39svUl4PKg4Oia7lb2HUToegwIHb/FExPnOXr2ihBBJa9WNaTchSX3zjPSRmdytaoAlVPdtJDkKUwc4ITuQK+V2xKe4Vg1ZrraZzQOJPjUNJa7tqTJ8IFlYXyXE2kNIrKkyfqZ5LLOJORMyv9p0kyZQnjdTLmgrNH0hJyVmQRiXYsCZs86jlpX8zTMgJkOfpfpmrS9F3PZqdWGdDIZHdLJsNWojST1thTX03htsJ/CArX8RwQPEEEvRaCfhdB+10R3FbED4HgOtADhCcJod+6pbBgB8JtdzT9QRj0BOHvlwmsxPd8YPI0mPR8k0nb6TCJ3pNJaA/dzTt0N62tyApaJnbubux2F9EydPRuGe77lGcAahegvMDgAFlg7LwVKXvcbmW9PaHaDd7a6V6bYNjXvd+iuE9oOJTeD1J69c6kKdel+FhtMezrdnB4OHPCFHomhQhsNu5jcYisLRwOFfvAFdu2WsUP+W+u2IHdqqNBP/W6vc7G5V7rNYI97Ys0xTEZWuUPslN2EkbX76Ptk0OrfIRWGeoo79sqdwwdvVVGwz/LxwDKccfozb1y+2UFv5/K22bXcfepu/KwfvWnUq9foEIX/wA= \ No newline at end of file diff --git a/docs/tutorials/beginner_tutorial/img/step5_admin_anonymous_policies_with_media_section.png b/docs/tutorials/beginner_tutorial/img/step5_admin_anonymous_policies_with_media_section.png deleted file mode 100644 index 4613495e2a..0000000000 Binary files a/docs/tutorials/beginner_tutorial/img/step5_admin_anonymous_policies_with_media_section.png and /dev/null differ diff --git a/docs/tutorials/beginner_tutorial/img/step5_admin_anonymous_policies_without_media_section.png b/docs/tutorials/beginner_tutorial/img/step5_admin_anonymous_policies_without_media_section.png deleted file mode 100644 index 12fbc125c5..0000000000 Binary files a/docs/tutorials/beginner_tutorial/img/step5_admin_anonymous_policies_without_media_section.png and /dev/null differ diff --git a/docs/tutorials/beginner_tutorial/img/step8_admin_anonymous_policies.png b/docs/tutorials/beginner_tutorial/img/step8_admin_anonymous_policies.png deleted file mode 100644 index 239b7ea32a..0000000000 Binary files a/docs/tutorials/beginner_tutorial/img/step8_admin_anonymous_policies.png and /dev/null differ diff --git a/docs/tutorials/beginner_tutorial/img/step8_register_page.png b/docs/tutorials/beginner_tutorial/img/step8_register_page.png deleted file mode 100644 index a6ad1524a5..0000000000 Binary files a/docs/tutorials/beginner_tutorial/img/step8_register_page.png and /dev/null differ diff --git a/docs/tutorials/beginner_tutorial/img/step_8_role_mgmt_screen.png b/docs/tutorials/beginner_tutorial/img/step_8_role_mgmt_screen.png deleted file mode 100644 index 4530895cd0..0000000000 Binary files a/docs/tutorials/beginner_tutorial/img/step_8_role_mgmt_screen.png and /dev/null differ diff --git a/docs/tutorials/generic_field_type/1_implement_the_point2d_value_class.md b/docs/tutorials/generic_field_type/1_implement_the_point2d_value_class.md deleted file mode 100644 index 77f6d21094..0000000000 --- a/docs/tutorials/generic_field_type/1_implement_the_point2d_value_class.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -description: Learn how to create a Value class that stores the value of the field. ---- - -# Step 1 - Implement the Point 2D Value class - -## Project installation - -To start the tutorial, you need a clean [[= product_name =]] installation running in the `dev` environment. - -Open your project with a clean installation and create the base directory for a new Point 2D field type in `src/FieldType/Point2D`. - -## The Value class - -The Value class of a field type is by design very simple. -It's used to represent an instance of the field type within a content item. -Each field presents its data using an instance of the Type's Value class. -For more information about field type Value, see [Value handling](type_and_value.md#value-handling). - -!!! tip - - According to the convention, the class representing field type Value should be named `Value` and should be placed in the same namespace as the Type definition. - -[[= include_file('docs/snippets/simple_hash_value_caution.md') =]] - -The Point 2D Value class contains: - -- private properties, used to store the actual data -- an implementation of the `__toString()` method, required by the Value interface - -By default, the constructor from `FieldType\Value` is used. - -The Point 2D is going to store two elements (coordinates for point 2D): - -- `x` value -- `y` value - -At this point, it doesn't matter where they're stored. -You want to focus on what the field type exposes as an API. - -`src/FieldType/Point2D/Value.php` should have the following properties: - -``` php -[[= include_code('code_samples/field_types/2dpoint_ft/steps/step_1/Value.php', 10, 14, remove_indent=True) =]] -``` - -A Value class must also implement the `Ibexa\Contracts\Core\FieldType\Value` interface. -To match the `FieldType\Value` interface, you need to implement `__toString()` method. -You also need to add getters and setters for `x` and `y` properties. -This class represents the point 2D. - -The final code should look like this: - -``` php -[[= -include_file('code_samples/field_types/2dpoint_ft/src/FieldType/Point2D/Value.php', 0, 6) -~ include_file('code_samples/field_types/2dpoint_ft/src/FieldType/Point2D/Value.php', 7, 11) -~ include_file('code_samples/field_types/2dpoint_ft/src/FieldType/Point2D/Value.php', 12, 13) -~ include_file('code_samples/field_types/2dpoint_ft/src/FieldType/Point2D/Value.php', 14) -=]] -``` diff --git a/docs/tutorials/generic_field_type/2_define_point2d_field_type.md b/docs/tutorials/generic_field_type/2_define_point2d_field_type.md deleted file mode 100644 index 0d8f8ed6d6..0000000000 --- a/docs/tutorials/generic_field_type/2_define_point2d_field_type.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -description: Learn how to create the Type class which contains the logic for the field. ---- - -# Step 2 - Define the Point 2D field type - -## The Type class - -The Type contains logic of the field type: validating data, transforming from various formats, describing the validators, and more. -In this example Point 2D field type extends the `Ibexa\Contracts\Core\FieldType\Generic\Type` class. - -For more information about the Type class of a field type, see [Type class](type_and_value.md#type-class). - -## Field type identifier - -First, create `src/FieldType/Point2D/Type.php`. -Add a `getFieldTypeIdentifier()` method to it. -The new method returns the string that **uniquely** identifies your field type, in this case `point2d`: - -``` php -[[= include_code('code_samples/field_types/2dpoint_ft/steps/step_2/Type.php') =]] -``` - -## Add a new service definition - -Next, add the `ibexa.field_type` tag to `config/services.yaml`: - -```yaml -services: -[[= include_file('code_samples/field_types/2dpoint_ft/config/services.yaml', 33, 36) =]] -``` diff --git a/docs/tutorials/generic_field_type/3_create_form_for_point2d.md b/docs/tutorials/generic_field_type/3_create_form_for_point2d.md deleted file mode 100644 index 1c032d65ad..0000000000 --- a/docs/tutorials/generic_field_type/3_create_form_for_point2d.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -description: Learn how to create a form used for editing a custom field definition. ---- - -# Step 3 - Create a form for editing field type - -## Create a form - -To edit your new field type, create a `Point2DType.php` form in the `src/Form/Type` directory. -Next, add a `Point2DType` class that extends the `AbstractType` and implements the `buildForm()` method. -This method adds fields for `x` and `y` coordinates. - -``` php -[[= include_file('code_samples/field_types/2dpoint_ft/steps/step_3/Point2DType.php', 0, 18) =]][[= include_file('code_samples/field_types/2dpoint_ft/steps/step_3/Point2DType.php', 25, 26) =]] -``` - -## Add a Form Mapper Interface - -The FormMapper adds the field definitions into Symfony forms using the `add()` method. -The `FieldValueFormMapperInterface` provides an edit form for your field type in the administration interface. - -For more information about the FormMappers, see [field type form and template](form_and_template.md). - -First, implement a `FieldValueFormMapperInterface` interface (`Ibexa\Contracts\ContentForms\FieldType\FieldValueFormMapperInterface`) to field type definition in the `src/FieldType/Point2D/Type.php`. - -Next, implement a `mapFieldValueForm()` method and invoke `FormInterface::add` method with the following arguments (highlighted lines): - -- Name of the property the field value maps to: `value` -- Type of the field: `Point2DType::class` -- Custom options: `required` and `label` - -Final version of the Type class should have the following statements and functions: - -``` php hl_lines="7 10 19-26" -[[= include_code('code_samples/field_types/2dpoint_ft/steps/step_3/Type.php') =]] -``` - -Finally, add a `configureOptions` method and set default value of `data_class` to `Value::class` in `src/Form/Type/Point2DType.php`. -It allows your form to work on this object. - -``` php hl_lines="20-25" -[[= include_code('code_samples/field_types/2dpoint_ft/src/Form/Type/Point2DType.php') =]] -``` - -## Add a new tag - -Next, add the `ibexa.admin_ui.field_type.form.mapper.value` tag to `config/services.yaml`: - -```yaml hl_lines="4" -[[= include_file('code_samples/field_types/2dpoint_ft/config/services.yaml', 33, 37) =]] -``` diff --git a/docs/tutorials/generic_field_type/4_introduce_a_template.md b/docs/tutorials/generic_field_type/4_introduce_a_template.md deleted file mode 100644 index 3314935335..0000000000 --- a/docs/tutorials/generic_field_type/4_introduce_a_template.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -description: Learn how to add a template for rendering the custom field on the site front. ---- - -# Step 4 - Introduce a template - -## Point 2D template - -To display data from the field type, you need to create and register a template for it. -Each field type template receives a set of variables that can be used to achieve the desired goal. -In this case the most important variable is the `field`, an instance of `Ibexa\Contracts\Core\Repository\Values\Content\Field`. -In addition to its own metadata (for example, `id` or `fieldDefIdentifier`), it exposes the field Value through the `value` property. - -Remember that field type templates can be overridden to tweak what is displayed and how. - -For more information, see [field type templates](form_and_template.md#content-view-templates). - -First, create a `point2d_field.html.twig` template in the `templates` directory. -It defines the default display of a Point 2D. -Your basic template for Point 2D should look like this: - -```html+twig -[[= include_file('code_samples/field_types/2dpoint_ft/steps/step_4/point2d_field.html.twig') =]] -``` - -## Template mapping - -Next, provide the template mapping in `config/packages/ibexa.yaml`: - -```yaml -[[= include_file('code_samples/field_types/2dpoint_ft/config/packages/field_templates.yaml', 0, 5) =]] -``` diff --git a/docs/tutorials/generic_field_type/5_add_a_field.md b/docs/tutorials/generic_field_type/5_add_a_field.md deleted file mode 100644 index c1ef9bea15..0000000000 --- a/docs/tutorials/generic_field_type/5_add_a_field.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -description: Learn how to use your custom field type by adding a field to a content type and creating an instance. ---- - -# Step 5 - Add a new Point 2D field - -All actions in this step are done in the admin interface also called the back office. -Go to the admin interface (`/admin`) and log in with the default username: `admin` using the password specified during installation. - -## Add new content type - -In the back office, the main menu, go to the **Content types** page. -Under **Content** category, create a new content type: - -![Creating new content type](create_new_content_type.png) - -New content type should have the following settings: - -- **Name:** Point 2D -- **Identifier:** point_2d -- **Fields:** point2d.name - -![Adding new field](point2d_field_definition.png) - -Next, define **point2d** with the following fields: - -|Field type|Name|Identifier|Required|Translatable| -|----------|----|----------|--------|------------| -| point2d |Point 2D|`point_2d` | yes | no| - -![Defining Point 2D](new_field_definition.png) - -Save everything and go back to the **Content/Content structure** tab. - -## Create your content - -In **Content structure**, select **Create content**. There, under **Content**, you should see Point 2D content type you added. -Click it to create new content. - -![Selecting Point 2D from sidebar](menu_point2d.png) - -Here, you can fill in coordinates of your point, for example, 3, 5. -Provided coordinates are used as a title for a new point. - -![Creating Point 2D](creating_new_point2d.png) - -Click **Publish**. Now, you should see a new **(3,5)** point in the content tree. - -!!! tip - - If you cannot see the results or encounter an error, clear the cache and reload the application. - -![New Point 2D](new_point2d.png) diff --git a/docs/tutorials/generic_field_type/6_settings.md b/docs/tutorials/generic_field_type/6_settings.md deleted file mode 100644 index e659b9221c..0000000000 --- a/docs/tutorials/generic_field_type/6_settings.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -description: Learn how to add settings that format the field value. ---- - -# Step 6 - Implement Point 2D settings - -Implementing settings enables you to define the format for displaying the field on the page. -To do so, create the `format` field where you're able to change the way coordinates for Point 2D are displayed. - -## Define field type format - -In this step you create the `format` field for Point 2D coordinates. -To do that, you need to define a `SettingsSchema` definition. -You also specify coordinates as placeholder values `%x%` and `%y%`. - -Open `src/FieldType/Point2D/Type.php` and add a `getSettingsSchema` method according to the following code block: - -``` php hl_lines="18-27" -[[= include_code('code_samples/field_types/2dpoint_ft/steps/step_6/Type.php') =]] -``` - -## Add a format field - -In this part you define and implement the edit form for your field type. - -Define a `Point2DSettingsType` class and add a `format` field in `src/Form/Type/Point2DSettingsType.php`: - -``` php -[[= include_code('code_samples/field_types/2dpoint_ft/src/Form/Type/Point2DSettingsType.php') =]] -``` - -## FieldDefinitionFormMapper Interface - -Now, enable the user to add the coordinates which are validated. -In `src/FieldType/Point2D/Type.php` you: - -- implement the `FieldDefinitionFormMapperInterface` interface -- add a `mapFieldDefinitionForm` method at the end that defines the field settings - -``` php -[[= include_file('code_samples/field_types/2dpoint_ft/src/FieldType/Point2D/Type.php', 0, 4) =]]// ... -[[= include_file('code_samples/field_types/2dpoint_ft/src/FieldType/Point2D/Type.php', 7, 9) =]][[= include_file('code_samples/field_types/2dpoint_ft/src/FieldType/Point2D/Type.php', 10, 16) =]]// ... -[[= include_file('code_samples/field_types/2dpoint_ft/src/FieldType/Point2D/Type.php', 41, 48) =]] -``` - -
-Complete Type.php code -``` php -[[= include_code('code_samples/field_types/2dpoint_ft/src/FieldType/Point2D/Type.php') =]] -``` -
- -## Add a new tag - -Next, add `FieldDefinitionFormMapper` as an extra tag definition for `App\FieldType\Point2D\Type` in `config/services.yaml`: - -```yaml hl_lines="5" -[[= include_file('code_samples/field_types/2dpoint_ft/config/services.yaml', 33, 38) =]] -``` - -## Field type definition - -To be able to display the new `format` field, you need to add a template for it. -Create `templates/point2d_field_type_definition.html.twig`: - -```html+twig -[[= include_file('code_samples/field_types/2dpoint_ft/templates/point2d_field_type_definition.html.twig') =]] -``` - -### Add configuration for the format field - -Next, provide the template mapping in `config/packages/ibexa.yaml`: - -```yaml hl_lines="6 7" -[[= include_file('code_samples/field_types/2dpoint_ft/config/packages/field_templates.yaml') =]] -``` - -## Redefine template - -Finally, redefine the Point 2D template, so it accommodates the new `format` field. - -In `templates/point2d_field.html.twig` replace the content with: - -```html+twig -[[= include_file('code_samples/field_types/2dpoint_ft/templates/point2d_field.html.twig') =]] -``` - -## Edit the content type - -Now, in the back office, you can go to **Content types** and see the results of your work by editing the Point 2D content type. - -!!! tip - - If you cannot see the results or encounter an error, clear the cache and reload the application. - -Add new format `(%x%, %y%)` in the **Format** field as shown in the screen below. - -![Point 2D definition with format field](field_definition_format_field.png) diff --git a/docs/tutorials/generic_field_type/7_add_a_validation.md b/docs/tutorials/generic_field_type/7_add_a_validation.md deleted file mode 100644 index cab21ebb35..0000000000 --- a/docs/tutorials/generic_field_type/7_add_a_validation.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -description: Learn how to validate custom field data. ---- - -# Step 7 - Add basic validation - -To provide basic validation that ensures both coordinates are provided, add assertions to the `src/FieldType/Point2D/Value.php`: - -``` php hl_lines="12 14" -[[= include_code('code_samples/field_types/2dpoint_ft/src/FieldType/Point2D/Value.php') =]] -``` - -As a result, if a user tries to publish the Point 2D with one value, they receive an error message. - -![Point 2D validation](point2d_validation.png) diff --git a/docs/tutorials/generic_field_type/8_data_migration.md b/docs/tutorials/generic_field_type/8_data_migration.md deleted file mode 100644 index dd3b5330d3..0000000000 --- a/docs/tutorials/generic_field_type/8_data_migration.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -description: Learn how to serialize and deserialize field data to enable sorting or search. ---- - -# Step 8 - Data migration between field type versions - -Adding data migration enables you to change the output of the field type to fit your current needs. -This process is important when a field type needs to be compared for sorting and searching purposes. -Serialization allows changing objects to array by normalizing them, and then to the selected format by encoding them. -In reverse, deserialization changes different formats into arrays by decoding and then denormalizing them into objects. - -For more information on Serializer Component, see [Symfony documentation]([[= symfony_doc =]]/serializer.html). - -## Normalization - -First, you need to add support for normalization in a `src/Serializer/Point2D/ValueNormalizer.php`: - -``` php -[[= include_code('code_samples/field_types/2dpoint_ft/src/Serializer/Point2D/ValueNormalizer.php') =]] -``` - -!!! note - - The `ValueDenormalizer` and `ValueNormalizer` service definitions are automatically registered by Symfony as services in `config/services.yaml`, without the need to manually define them. - -## Backward compatibility - -To accept old versions of the field type you need to add support for denormalization in a `src/Serializer/Point2D/ValueDenormalizer.php`: - -``` php -[[= include_code('code_samples/field_types/2dpoint_ft/src/Serializer/Point2D/ValueDenormalizer.php') =]] -``` - -## Change format on the fly - -To change the format on the fly, you need to replace the constructor and class properties in `src/FieldType/Point2D/Value.php`: - -``` php -[[= include_code('code_samples/field_types/2dpoint_ft/src/FieldType/Point2D/ValueFinal.php', 11, 24, remove_indent=True) =]] -``` - -Now you can change the internal representation format of the Point 2D field type. diff --git a/docs/tutorials/generic_field_type/creating_a_point2d_field_type.md b/docs/tutorials/generic_field_type/creating_a_point2d_field_type.md deleted file mode 100644 index 7a98186816..0000000000 --- a/docs/tutorials/generic_field_type/creating_a_point2d_field_type.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -description: Go through a field type tutorial to learn how to create a custom field type based on the built-in Generic field type. ---- - -# Creating a Point 2D field type - -This tutorial covers the creation and development of a custom [[= product_name =]] [field type](create_custom_generic_field_type.md). -The Generic field type is a powerful extension point. -It enables you to build complex solutions on a ready-to-go field type template. - -Field types are responsible for: - -- Storing data, either using the native storage engine mechanisms or specific means -- Validating input data -- Making the data searchable (if applicable) -- Displaying fields - -For more information, see [field type documentation](field_types.md). -It describes how each component of a field type interacts with the various layers of the system, and how to implement them. - -## Intended audience - -This tutorial is aimed at developers who are familiar with [[= product_name =]] and are comfortable with operating in PHP and Symfony. - -## Content of the tutorial - -This tutorial shows you how to use the Generic field type as a template for a custom field type. -You: - -- create a custom Point 2D field type with two coordinates as input, for example '4,5' -- register the new field type as a service and define its template -- add basic validation to your Point 2D -- add data migration to the field type so you're able to change its output - -## Steps - -In this tutorial you go through the following steps: - -- [1. Implement the Point 2D Value class](1_implement_the_point2d_value_class.md) -- [2. Define the Point 2D field type](2_define_point2d_field_type.md) -- [3. Create form for editing field type](3_create_form_for_point2d.md) -- [4. Introduce a template](4_introduce_a_template.md) -- [5. Add a new Point 2D field](5_add_a_field.md) -- [6. Implement Point 2D settings](6_settings.md) -- [7. Add basic validation](7_add_a_validation.md) -- [8. Data migration between field type versions](8_data_migration.md) diff --git a/docs/tutorials/generic_field_type/img/create_new_content_type.png b/docs/tutorials/generic_field_type/img/create_new_content_type.png deleted file mode 100644 index afca59e131..0000000000 Binary files a/docs/tutorials/generic_field_type/img/create_new_content_type.png and /dev/null differ diff --git a/docs/tutorials/generic_field_type/img/creating_new_point2d.png b/docs/tutorials/generic_field_type/img/creating_new_point2d.png deleted file mode 100644 index 3227e9dd4d..0000000000 Binary files a/docs/tutorials/generic_field_type/img/creating_new_point2d.png and /dev/null differ diff --git a/docs/tutorials/generic_field_type/img/field_definition_format_field.png b/docs/tutorials/generic_field_type/img/field_definition_format_field.png deleted file mode 100644 index d5978e596b..0000000000 Binary files a/docs/tutorials/generic_field_type/img/field_definition_format_field.png and /dev/null differ diff --git a/docs/tutorials/generic_field_type/img/menu_point2d.png b/docs/tutorials/generic_field_type/img/menu_point2d.png deleted file mode 100644 index 577ee8623a..0000000000 Binary files a/docs/tutorials/generic_field_type/img/menu_point2d.png and /dev/null differ diff --git a/docs/tutorials/generic_field_type/img/new_field_definition.png b/docs/tutorials/generic_field_type/img/new_field_definition.png deleted file mode 100644 index c498bf9903..0000000000 Binary files a/docs/tutorials/generic_field_type/img/new_field_definition.png and /dev/null differ diff --git a/docs/tutorials/generic_field_type/img/new_point2d.png b/docs/tutorials/generic_field_type/img/new_point2d.png deleted file mode 100644 index 93e69d05fe..0000000000 Binary files a/docs/tutorials/generic_field_type/img/new_point2d.png and /dev/null differ diff --git a/docs/tutorials/generic_field_type/img/point2d_field_definition.png b/docs/tutorials/generic_field_type/img/point2d_field_definition.png deleted file mode 100644 index ea678b24da..0000000000 Binary files a/docs/tutorials/generic_field_type/img/point2d_field_definition.png and /dev/null differ diff --git a/docs/tutorials/generic_field_type/img/point2d_validation.png b/docs/tutorials/generic_field_type/img/point2d_validation.png deleted file mode 100644 index 1ee4e08966..0000000000 Binary files a/docs/tutorials/generic_field_type/img/point2d_validation.png and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/1_get_a_starter_website.md b/docs/tutorials/page_and_form_tutorial/1_get_a_starter_website.md deleted file mode 100644 index ffd42da3dc..0000000000 --- a/docs/tutorials/page_and_form_tutorial/1_get_a_starter_website.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -description: Start the tutorial by getting a clean installation of Ibexa Experience and preparing initial content. -edition: experience ---- - -# Step 1 — Get a starter website - -To set up the starter website, you need to follow these steps: - -## Get a clean [[= product_name =]] installation - -To begin the tutorial, you need a clean installation of [[= product_name_exp =]]. - -## Add content types - -Log in to the back office – add `/admin` to your installation's address (`/admin`) and log in as `admin` user using the password specified during installation. -Disable the Focus mode, go to content types screen and in the Content group add two content types with the following settings: - -### Dog Breed - -- **Name:** Dog Breed -- **Identifier:** `dog_breed` -- **Fields:** - -| Field type | Name | Identifier | Required | Searchable | Translatable | -|------------|-------------------|---------------------|----------|------------|--------------| -| Text line | Name | `name` | yes | yes | yes | -| Text line | Short Description | `short_description` | yes | yes | yes | -| Image Asset | Photo | `photo` | yes | no  | no  | -| RichText | Full Description | `full_description` | yes | yes | yes | - -### Tip - -- **Name:** Tip -- **Identifier:** `tip` -- **Fields:** - -| Field type | Name | Identifier | Required | Searchable | Translatable | -|-------------|-------|------------|----------|------------|--------------| -| Text line | Title | `title` | yes | yes | yes | -| Text block | Body | `body` | no  | no  | yes | - -### Modify existing Article content type - -You also need to modify the built-in Article content type. -It makes inserting photos into articles easier. -Edit it to remove the Image field that has a Content Relation (ibexa_object_relation) type, and create a new field in its place: - -| Field type | Name | Identifier | Required | Searchable | Translatable | -|------------|-------|------------|----------|------------|--------------| -| Image Asset | Image | `image` |yes   |no | no | - -![New image field in the Article content type](enterprise_tut_image_in_article_ct.png) - -## Add template, configuration and style files - -!!! tip - - For an introduction on how to use templates in [[= product_name =]], see [Beginner tutorial](beginner_tutorial.md). - -First, to remove the welcome page, go to `config/packages/` and delete the `ibexa_welcome_page.yaml` file. - -Place the [`pagelayout.html.twig`](https://github.com/ibexa/documentation-developer/blob/6.0/code_samples/tutorials/page_tutorial_starting_point/templates/pagelayout.html.twig) and [`pagelayout_menu.html.twig`](https://github.com/ibexa/documentation-developer/blob/6.0/code_samples/tutorials/page_tutorial_starting_point/templates/pagelayout_menu.html.twig) files in the `templates` folder. -Create a new folder, called `full`, in `templates`. -Place further template files in it: - -- [`article.html.twig`](https://github.com/ibexa/documentation-developer/blob/6.0/code_samples/tutorials/page_tutorial_starting_point/templates/full/article.html.twig) -- [`dog_breed.html.twig`](https://github.com/ibexa/documentation-developer/blob/6.0/code_samples/tutorials/page_tutorial_starting_point/templates/full/dog_breed.html.twig) -- [`folder.html.twig`](https://github.com/ibexa/documentation-developer/blob/6.0/code_samples/tutorials/page_tutorial_starting_point/templates/full/folder.html.twig) -- [`tip.html.twig`](https://github.com/ibexa/documentation-developer/blob/6.0/code_samples/tutorials/page_tutorial_starting_point/templates/full/tip.html.twig) - -Place two configuration files in the `config/packages` folder: - -- [`views.yaml`](https://github.com/ibexa/documentation-developer/blob/6.0/code_samples/tutorials/page_tutorial_starting_point/config/packages/views.yaml) -- [`image_variations.yaml`](https://github.com/ibexa/documentation-developer/blob/6.0/code_samples/tutorials/page_tutorial_starting_point/config/packages/image_variations.yaml) - -In the `assets` folder in the project root: - -- in the `css` folder add the following stylesheet: [`style.css`](https://github.com/ibexa/documentation-developer/blob/6.0/code_samples/tutorials/page_tutorial_starting_point/assets/css/style.css) to it -- add the [`header.jpg`](https://github.com/ibexa/documentation-developer/blob/6.0/code_samples/tutorials/page_tutorial_starting_point/assets/images/header.jpg) file to the `assets/images` folder - -In the `webpack.config.js` file in the project root folder, add the following line after `Encore.addEntry('app', './assets/app.js');`: - -``` js -Encore.addStyleEntry('tutorial', [path.resolve(__dirname, './assets/css/style.css')]); -``` - -Next, in the terminal run the commands: - -``` bash -yarn encore -php bin/console cache:clear -``` - -!!! tip - - Compiling assets with Webpack Encore is explained in [the beginner tutorial](3_customize_the_front_page.md#configuring-webpack). - -In the `src` folder create a `QueryType` subfolder and add [`MenuQueryType.php`](https://github.com/ibexa/documentation-developer/blob/6.0/code_samples/tutorials/page_tutorial_starting_point/src/QueryType/MenuQueryType.php) to it. - -This file takes care of displaying the top menu (for more information, see [the documentation](content_queries.md#query-types)). - -The structure of the new and modified files should look like: - -![File structure](enterprise_tut_file_structure.png) - -## Create content - -Now return to the back office and create some content for your website. - -First, you can hide unneeded content items from the project root. - -Go to **Content structure** and select "[[= product_name_base =]] Digital Experience Platform". -In the **Sub-items** tab, select all the current sub-items and click the **Hide Location** icon: - -![Hiding content items you don't need](enterprise_tut_hide_content.png) - -Next, under "[[= product_name_base =]] Digital Experience Platform", create three Folders. -Call them *All Articles*, *Dog Breed Catalog* and *All Tips*. -Remember that you can **Save and close** them, but you should use the **Publish** button. - -Next, create a few content items of proper content types in each of these folders: - -- 4 Articles (at least, to best see the effects of the Content Scheduler block that you can create in step 3.) -- 3 Dog Breeds -- 3 Tips - -### Add images - -When you need an image, you can use one from [this image pack](img/photos.zip). -This lets you compare effects of your work to screenshots in the tutorial. - -At this point you're ready to proceed with the next step. diff --git a/docs/tutorials/page_and_form_tutorial/2_prepare_the_landing_page.md b/docs/tutorials/page_and_form_tutorial/2_prepare_the_landing_page.md deleted file mode 100644 index 1fd98fbcf3..0000000000 --- a/docs/tutorials/page_and_form_tutorial/2_prepare_the_landing_page.md +++ /dev/null @@ -1,137 +0,0 @@ ---- -description: Learn how to build a Page with a custom layout. -edition: experience ---- - -# Step 2 — Prepare the Page - -In this step you can prepare and configure your front page, together with its layout and templates. - -## Create Page layout - -Go to the front page of your website (``). -You can see that it looks unfinished. -However, you can still use the menu and look around the existing content in the website. - -![It's a Dog's World - Starting point](enterprise_tut_starting_point.png "It's a Dog's World - Starting point") - -!!! tip - - At any point in the tutorial if you don't see the results of your last actions, try clearing the cache and regenerating assets: - - `php bin/console cache:clear` - - `yarn encore ` - -Log in to the back office. Go to **Content Structure**. -The **Ibexa Digital Experience Platform** content item is the first page that is shown to the visitor. -Here you can check what content type it belongs to: it's a *Landing page*. - -![Ibexa Digital Experience Platform is a landing page](enterprise_tut_home_is_an_lp.png) - -The page is displayed without any template. -Click **Edit** to enter a mode that enables you to work with pages. -You can see that the home page has only one drop zone. - -![Empty Page with default layout](enterprise_tut_empty_single_block.png) - -Click the **Fields** button on the left of the top bar to switch to editing page fields. -Change the Title of the page to "Home". -Then, publish the page to update its name. - -The design for the website you're making needs a layout with two zones: a main column and a narrower sidebar. -[[= product_name_exp =]] provides only a one-zone default layout, so you need to create a new one. - -Preparing a new layout requires three things: - -- entry in configuration -- thumbnail -- template - -### Add entry in configuration - -First create a new file for layout configuration, `config/packages/ibexa_fieldtype_page.yaml`: - -``` yaml hl_lines="3 5 7 8" -[[= include_file('code_samples/tutorials/page_tutorial/config/packages/ibexa_fieldtype_page.yaml', 0, 13) =]] -``` - -### Add thumbnail - -!!! tip - - For a detailed description of creating a Page layout, see [Page layouts](render_page.md#render-a-layout). - -The `sidebar` (line 3) is the internal key of the layout. -`name` (line 5) is displayed in the interface when the user selects a layout. -The `thumbnail` (line 7) points to an image file that is shown when creating a new landing page next to the name. -Use the [supplied thumbnail file](https://github.com/ibexa/documentation-developer/blob/6.0/code_samples/tutorials/page_tutorial_starting_point/public/assets/images/layouts/sidebar.png) and place it in the `public/assets/images/layouts/` folder. - -The `template` (line 8) points to the Twig file containing the template for this layout. - -### Create page template - -Configuration points to `sidebar.html.twig` as the template for the layout. -The template defines what zones are available in the layout. - -Create a `templates/layouts/sidebar.html.twig` file: - -``` html+twig hl_lines="2 7 19 24" -[[= include_file('code_samples/tutorials/page_tutorial/templates/layouts/sidebar.html.twig') =]] -``` - -The above template creates two columns and defines their widths. -Each column is at the same time a zone, and each zone renders the blocks that it contains. - -!!! tip - - In sites with multiple layouts you can separate the rendering of zones into a separate `zone.html.twig` template to avoid repeating the same code in every layout. - -!!! note - - A zone in a layout template **must have** the `data-ibexa-zone-id` attribute (lines 2 and 19). - A block **must have** the `data-ibexa-block-id` attribute (lines 7 and 24). - -With these three elements: configuration, icon and template, the new layout is ready to use. - -### Change Home Page layout - -Now you can change the Home Page to use the new layout. -Edit Home and in the top bar select **Switch layout**. -Choose the new layout called "Main section with sidebar on the right". -The empty zones you defined in the template are visible in the editor. - -![Select layout window](enterprise_tut_select_layout.png) - -!!! tip - - If the new layout isn't available when editing the page, you may need to clear the cache (using `php bin/console cache:clear`) and/or reload the app. - -![Empty page with new layout](enterprise_tut_new_layout.png) - -Publish the Home page. -You can notice that it still has some additional text information. -This is because the looks of a page are controlled by two separate template files, and you have only prepared one of those. -The `sidebar.html.twig` file defines how zones are organized and how content is displayed in them. -But you also need a general template file that is used for every page, regardless of its layout. - -Add this new template, `templates/full/landing_page.html.twig`: - -``` html+twig -[[= include_file('code_samples/tutorials/page_tutorial/templates/full/landing_page.html.twig') =]] -``` - -This template renders the page content. -If there is any additional content or formatting you would like to apply to every page, it should be placed in this template. - -Now you need to tell the app to use this template to render pages. -Edit the `config/packages/views.yaml` file and add the following code under the `full:` key: - -``` yaml -[[= include_file('code_samples/tutorials/page_tutorial/config/packages/views.yaml', 35, 39) =]] -``` - -After adding this template you can check the new page. -The part between menu and footer should be empty, because you haven't added any content to it yet. - -![Empty Page](enterprise_tut_empty_page.png) diff --git a/docs/tutorials/page_and_form_tutorial/3_use_existing_blocks.md b/docs/tutorials/page_and_form_tutorial/3_use_existing_blocks.md deleted file mode 100644 index 74e17cbbae..0000000000 --- a/docs/tutorials/page_and_form_tutorial/3_use_existing_blocks.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -description: Learn how to use and customize built-in Page blocks. -edition: experience ---- - -# Step 3 — Use existing blocks - -In this step you can add a Content List block and a Content Scheduler block and customize them. - -## Add a Content List block - -First, create an override template for the Content List block: `templates/blocks/contentlist/default.html.twig`: - -``` html+twig hl_lines="10" -[[= include_file('code_samples/tutorials/page_tutorial/templates/blocks/contentlist/default.html.twig') =]] -``` - -Then add a configuration that tells the app to use this template instead of the default one. -In `config/packages/ibexa_fieldtype_page.yaml` add the following code at the end of the file, under the `ibexa_fieldtype_page` key on the same level as `layouts`: - -``` yaml -[[= include_file('code_samples/tutorials/page_tutorial/config/packages/ibexa_fieldtype_page.yaml', 13, 19) =]] -``` - -The template makes use of an [image variation](images.md) (line 10). -It's the thumbnail of the Dog Breed image that is displayed in the block. -To configure this variation, open the `config/packages/image_variations.yaml` file and add the following code under the `image_variations` key: - -``` yaml -[[= include_file('code_samples/tutorials/page_tutorial/config/packages/image_variations.yaml', 13, 18) =]] -``` - -Finally, add some styling to the block. Add the following CSS to the end of the `assets/css/style.css` file: - -``` css -[[= include_file('code_samples/tutorials/page_tutorial/assets/css/style.css', 153, 176) =]] -``` - -Run `yarn encore ` to regenerate assets. - -At this point you can start adding blocks to the page. -You do it in the page's Edit mode by dragging a block from the menu on the right to the correct zone on the page. - -Drag a *Content List* block from the menu to the left zone on the page. -Click the block and fill in the form. -Here you name the block and decide what it displays. -Choose the *Dog Breed Catalog* folder as the Parent, select *Dog Breed* as the content type to be displayed, and choose a limit (3). -This block will display the first three Dog Breeds from the database. - -![Window with Content List options](enterprise_tut_content_list_window.png) - -Click **Submit** and you should see a preview of what the block looks like with the dog breed information displayed. - -![Content List Styled](enterprise_tut_content_list_styled.png "Content List Styled") - -The block is displayed using the new template. -Built-in blocks have default templates included in a clean installation, but you can override them. -Publish the page now and move on to creating another type of block. - -## Create a Content Scheduler block for featured articles - -The next block is the Content Scheduler block that airs articles at predetermined times. - -First, add a configuration that points to the layout. -Go to `config/packages/ibexa_fieldtype_page.yaml` again and add the following code under `blocks` on the same level as the `contentlist` key: - -``` yaml -[[= include_file('code_samples/tutorials/page_tutorial/config/packages/ibexa_fieldtype_page.yaml', 19, 24) =]] -``` - -The configuration defines one view for the Schedule block called `featured` and points to a `featured.html.twig` template. -Create the new file `templates/blocks/schedule/featured.html.twig`: - -``` html+twig hl_lines="11" -[[= include_file('code_samples/tutorials/page_tutorial/templates/blocks/schedule/featured.html.twig') =]] -``` - -When you look at the template, you can see three blocks, each of which render the content items using the `featured` view (line 11). -So far you only have templates for `full` view for Articles. -This means you need to create a `featured` view template, otherwise you get an error when trying to add content to the block. - -You need to modify the `config/packages/views.yaml` file to indicate when to use the template. -Add the following code to this file, on the same level as the `full` key: - -``` yaml -[[= include_file('code_samples/tutorials/page_tutorial/config/packages/views.yaml', 39, 44) =]] -``` - -Now create a `templates/featured/article.html.twig` file: - -``` html+twig -[[= include_file('code_samples/tutorials/page_tutorial/templates/featured/article.html.twig') =]] -``` - -Like in the case of the Content List block, the template specifies an image variation. -Add it in `config/packages/image_variations.yaml` under the `image_variations` key: - -``` yaml -[[= include_file('code_samples/tutorials/page_tutorial/config/packages/image_variations.yaml', 18, 22) =]] -``` - -The Block is already operational, but first update the stylesheet. -Add the following CSS at the end of the `assets/css/style.css` file: - -``` css -[[= include_file('code_samples/tutorials/page_tutorial/assets/css/style.css', 177, 207) =]] -``` - -Run `yarn encore ` to regenerate assets. - -At this point you can add a new Content Scheduler block to your page and fill it with content to see how it works. - -!!! tip - - If you don't see the featured block template, you may need to clear the cache (using `php bin/console cache:clear`) and/or reload the app. - -Go back to editing the Home page and drag a *Content Scheduler* block from the pane on the right to the main zone in the layout, above the *Content List* block. -Select the block and click the **Block Settings** icon. - -Set the *Limit* to 3 and click **Select Content**. -Navigate to the "All Articles" folder and select the articles you had created and confirm. - -![Selecting Articles for the Schedule Block](enterprise_tut_select_articles.png) - -Accept the suggested airtime and click **Submit**. - -Now click the Airtime button next to one of the Articles and choose a time in the future. -This article is listed in the queue. - -![Content Scheduler with scheduled content](enterprise_tut_choosing_airtime.png) - -Publish the page. - -Return to the editing page. -Click the **Schedule** button on the left of the top bar, click the **Show timeline** button, and close. -You can now see a slider at the top of the page. -You can move it to different times and preview what the *Content Scheduler* block looks like at different hours. -Content is shown when you move the slider to the point when it airs. - -!!! tip - - At this point you have configured the Content Scheduler block to work with Articles only. - If you try to add Content of any other type, you can see an error. - This is because there is no `featured` view for content other than Articles defined at the moment. - -![Front page after adding Featured Block](enterprise_tut_page_with_featured_articles.png "Front page after adding Featured Block") diff --git a/docs/tutorials/page_and_form_tutorial/4_create_a_custom_block.md b/docs/tutorials/page_and_form_tutorial/4_create_a_custom_block.md deleted file mode 100644 index 651ca35faf..0000000000 --- a/docs/tutorials/page_and_form_tutorial/4_create_a_custom_block.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -description: Try creating a custom page block with specific logic. -edition: experience ---- - -# Step 4 — Create a custom block - -This step guides you through creating a custom block. -The custom block displays a randomly chosen content item from a selected folder. - -To create a custom block from scratch you need four elements: - -- block configuration -- a template -- a listener -- the listener registered as a service - -## Block configuration - -In `config/packages/ibexa_fieldtype_page.yaml` add the following block under the `blocks` key: - -``` yaml hl_lines="10" -[[= include_file('code_samples/tutorials/page_tutorial/config/packages/ibexa_fieldtype_page.yaml', 24, 42) =]] -``` - -This configuration defines one attribute, `parent`. -Use it to select the folder containing tips. - -## Block template - -You also need to create the block template, `templates/blocks/random/default.html.twig`: - -``` html+twig -[[= include_file('code_samples/tutorials/page_tutorial/templates/blocks/random/default.html.twig') =]] -``` - -## Block listener - -Block listener provides the logic for the block. -It's contained in `src/Event/RandomBlockListener.php`: - -``` php -[[= include_code('code_samples/tutorials/page_tutorial/src/Event/RandomBlockListener.php') =]] -``` - -At this point the new custom block is ready to be used. - -You're left with the last cosmetic changes. -First, the new Block has a broken icon in the **Page blocks** toolbox in page mode. -This is because you haven't provided this icon yet. -If you look back to the YAML configuration, you can see the icon file defined as `random_block.svg` (line 4). Download [the provided file](https://github.com/ibexa/documentation-developer/blob/6.0/code_samples/tutorials/page_tutorial_starting_point/public/assets/images/blocks/random_block.svg) and place it in `public/assets/images/blocks`. - -Finally, add some styling for the new block. Add the following to the end of the `assets/css/style.css` file: - -``` css -[[= include_file('code_samples/tutorials/page_tutorial/assets/css/style.css', 208, 228) =]] -``` - -Run `yarn encore ` to regenerate assets. - -Go back to editing the front page. -Drag a Random Block from the **Page blocks** toolbox on the right to the page's side column. -Access the block's settings and choose the "All Tips" folder from the menu. Save and publish all the changes. - -Refresh the home page. -The Tip of the Day block displays a random Tip from the "Tips" folder. -Refresh the page a few more times and you can see the tip change randomly. - -![Random Block with a Tip](enterprise_tut_random_block.png "Random Block with a Tip") - -To learn more about custom Page Builder blocks, see [Create custom page block](create_custom_page_block.md). diff --git a/docs/tutorials/page_and_form_tutorial/5_create_newsletter_form.md b/docs/tutorials/page_and_form_tutorial/5_create_newsletter_form.md deleted file mode 100644 index 7754fcf493..0000000000 --- a/docs/tutorials/page_and_form_tutorial/5_create_newsletter_form.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -description: Learn how to create a sign-up form and how to view and manage its submissions. -edition: experience ---- - -# Step 5 — Create a newsletter form - -The final step of this tutorial assists you in adding to the home page a Form block for signing up to a newsletter. - -[[% include 'snippets/forms_caution.md' %]] - -## Add a Form block - -Start with creating a Form content item. -In the main menu, go to **Content** -> **Forms**, click **Create content** and select **Form**. -Provide the title, for example, "Sign up for Newsletter" and click **Build form**. - -In the Form Builder, add and configure (using the **Basic** and **Validation** tabs) the following form fields: - -|Form field|Name|Required|Additional properties| -|-----|----|--------|---------------------| -|Single line input|Name|yes|Minimum length = 3| -|Single line input|Surname|no|Minimum length = 3| -|Dropdown|Select topic|yes|Options:
- News
- Tips
- Articles| -|Email|Email address|yes|—| -|Captcha|CAPTCHA|—|—| -|Button|Sign up!|—|Action: Show a message
Message to display: Thank you!| - -The configuration should look like this: - -![Adding fields to Newsletter Form](enterprise_tut_form_creation.png "Adding fields to Newsletter Form") - -When you add all the fields, save the form and click **Publish**. -Now you can edit the front page and add a Form block below the Random block. -Edit the block and select the form you created. Click **Submit**. - -The Page should refresh with the Form block. - -![Newsletter Form Block](enterprise_tut_first_form.png "Raw Newsletter Form Block") - -It clearly differs from the page design, so you also need to customize the block's layout. - -## Change the block template - -First, add a new template for the Form block to align it with the Random block design. -Create a `newsletter.html.twig` file in `templates/blocks/form/`: - -``` html+twig hl_lines="1" -[[= include_file('code_samples/tutorials/page_tutorial/templates/blocks/form/newsletter.html.twig') =]] -``` - -This template extends the default block layout by adding an additional class (line 1) that shares CSS styling with the Random block. - -Append the new template to the block by adding it to `config/packages/ibexa_fieldtype_page.yaml`. -Add the following configuration under the `blocks` key at the same level as other block names, for example, `random`: - -``` yaml hl_lines="1" -[[= include_file('code_samples/tutorials/page_tutorial/config/packages/ibexa_fieldtype_page.yaml', 42, 47) =]] -``` - -Now you have to apply the template to the block. -Go back to editing the page. -Edit the Form block again. -In the **Design** tab, select the **Newsletter Form View** and click **Submit**. - -The block remains unchanged, but the results are visible when you add CSS styling. - -## Change the field template - -At this point, you need to change the field template. -This results in alternating the position and design of the Form fields. - -Create a `form_field.html.twig` file in `templates/fields/`: - -``` html+twig -[[= include_file('code_samples/tutorials/page_tutorial/templates/fields/form_field.html.twig') =]] -``` - -Next, assign the template to the page. -In `config/packages/views.yaml`, at the same level as `page_layout`, add: - -``` yaml -[[= include_file('code_samples/tutorials/page_tutorial/config/packages/views.yaml', 7, 9) =]] -``` - -Clear the cache by running `bin/console cache:clear` and refresh the page to see the results. - -## Configure the Form field - -Before applying the final styling of the block, you need to configure the [CAPTCHA field](work_with_forms.md#captcha-field). -In `config/packages`, add a `gregwar_captcha.yaml` file with the following configuration: - -``` yaml -[[= include_file('code_samples/tutorials/page_tutorial/config/packages/gregwar_captcha.yaml') =]] -``` - -The configuration resizes the CAPTCHA image (line 2), changes the error message (line 3), and shortens the authentication code (line 4). - -## Add stylesheet - -The remaining step in configuring the block is adding CSS styling. -Add the following code to `assets/css/style.css`: - -``` css -[[= include_file('code_samples/tutorials/page_tutorial/assets/css/style.css', 229, 277) =]] -``` - -Reinstall the assets and clear the cache by running the following commands: - -``` bash -yarn encore -php bin/console cache:clear -``` - -Your newsletter form block is ready. - -![Newsletter Form Block](enterprise_tut_final_form.png "Newsletter Form Block") - -Refresh the page and enter a couple of mock submissions. - -## Manage the submissions - -You can view all submissions in the back office. -Go to **Forms** page. -From the content tree, select the Form and click the **Submissions** tab. -There, after selecting submission(s), click **Download submissions** or **Delete submission**. -To see details about a submission, click the view icon. - -![Collect Form Submissions](enterprise_tut_form_collect_sub.png "Collect Form Submissions") - -For more information, see [viewing form results]([[= user_doc =]]/content_management/work_with_forms/#view-results). - -## Congratulations! - -You have finished the tutorial and created your first customized page. - -You have learned how to: - -- Create and customize a Page -- Make use of existing blocks and adapt them to your needs -- Plan content airtime using the Content Scheduler block -- Create custom blocks -- Use Form Builder and configure your form -- Apply custom styling to blocks - -![Final result of the tutorial](enterprise_tut_main_screen.png "Final result of the tutorial") diff --git a/docs/tutorials/page_and_form_tutorial/img/diagram_source/enterprise_tut_file_structure.xml b/docs/tutorials/page_and_form_tutorial/img/diagram_source/enterprise_tut_file_structure.xml deleted file mode 100644 index 95d7169662..0000000000 --- a/docs/tutorials/page_and_form_tutorial/img/diagram_source/enterprise_tut_file_structure.xml +++ /dev/null @@ -1 +0,0 @@ -7V1Rd5s2FP41fgwHCQT4MU6abt16mq5b2z31EKNgFowYyLHZr58wyAahdI6NMO70koAQV4r06btX916RiXWz3LzN/HTxngQ4nkAz2Eys2wmEwHEt9qssKaqSqTutCsIsCupK+4JP0T+4LjTr0lUU4LxVkRIS0yhtF85JkuA5bZX5WUbW7WqPJG63mvoh7hR8mvtxt/RLFNBFVeohc1/+E47CBW8ZmPWTpc8r1wX5wg/IulFkvZlYNxkhtLpabm5wXA4eH5fqvbsXnu46luGEHvIC/fCU/PZ55dofiuJjtvry68+Fd+VWUp79eFX/wXVnacFHACfBdTmQ7C4hCSucLegyZneAXT6ShN75yygup3dNsqfyXT/J60efyCqbl3IWlLIJg8i6Zj9YF8sfZYXcCAkJY+ynUW7MyXL7YJ5vq949VoLZZS0awVlTeN1HszsS9eDgoDW59bi8xWSJacYEm+v9lPIZXTRmk5dlOPZp9NyGhF8jK9yJ27VwTyLWE2jWq2Baiynat1xAvh2k+p3mBApiXPRdMdTPQkw7Ytjc+UWjWlpWyJs12EVjUPZFW/y8AkveiVjCm4h+ZddXpmECuy74s5xgA6H69naznfD6pmjc3OMsYn8BzuqycSMz582/NJjQGxWEd7RWg2/HaieC2D0VxAe1Ah3rNZ0CbSZlF1X7va4W4EiWixPTGkKtdeP8vSL8wVW+1ZEMrWyRpJv9Q3YVlr/9PMfl2FSyJhWa+cPOiqR4Q9vLMMOsBf+hBjCTt6KkanP72I+jMGHXcwbpcrHNnnFGI6Ywr+sHyygIypdn9SSxZtBsgm7L/kdxfENiku3Xf04z8oSFwoyskgAHB67k3WJTvLJfXMzlCODN5HurlGsCpwU0r0Z/Yw07kjUsrrXmcm2R+KsxKFP/fWBwO5oagOMDILDbCASgC0F7UAhOFUEwWjLT/GUUVsUPmcblOHCJQBuXrmeg85IjtE+0Z8dtgY7FsERtwxKIIg41LAEQjThB0Nn3R1C2QepF25LkMQo11V0G1Qk2IETg3Exnnbpz10x3CNPZAkEd6wcSmW7qnUh0BxLqtN9dMXgXFqZ3ffcQPv5B383ou/XVTOpD6oMiU3/+1LQHm2yo9ynjI0lgte1BOHUlLOkpYkkpNIHMHuwDm88RXudG4TNgaXReBjoFj76Furvo6ZDYhJbW4ANocK5p62m3zanBXcevVuKO3YYQRAYUZPWlyIWmGt1WqsuhKg/31rXz7dnPIjabJNHceVHc6TkCGrvcCVRtf+Q41UHwYcjTaG8oLMR4yDmWPq0DpA3p8pFCi1uxvcTEIQ+CVzFxd/LjhsTlg+mMCtCCDYg8aBxpC3Si1UCUpCYsbiNbvRVgqbIC8myuXZ6XofMFl6dtd1W+qqCjFJMIaY0/hMNT1PgIdJjtcKenqPBtRblD3Zb23VbKlEgVU35c4az4vUix3iNdBl8C5IoQNGVRokF9TEhHiQYgTQhMceodYUYPpkzB3ENQlV3JWnqh00oJkw9M74T5HierHWka6SLVxHkZxAlNRwSixDUPZOtXGW86Mh9AHyileJkyrtFJbpeCzp3FytN/nQ40B41oOlARMh9XsfbHXwgoEZy2QAmgLPNy0O25I4tm9nI0ooRFjI0SWgZd73PmNEhHDlJPACkPaTa1ujUoRlVlgwQk/PaQYRxolF48SqfuuW1PmaOzn3y6kO1zC7Ki35Zss6SxenFYtdpYtSxZgh00B0WrQg8TG6msKCOppgGRwwvKSCowIL/dh1K3d0XzTgymNiOzpj1pRmYd97jjymMPwHI2qbxG36s4Lp8a4kd5ONbFyMGhHjVbJHhbTQjCfiG/UK03TXYST/t3+8aiJ2TVu5bhHZkEg8SzU659Ihz7zn9xZR5ajaneMSV8nME98gwdsgV+Q5YSfhPb4R1Wym+uzNulsaha15quYR3Jb6K6lck6P8Xp1PsBYGU7gto0jzXhBJ3JP0fWtwUnqmZzAAvOVZVAUn41DWd6k9/Z5MdR+rmxjEe94RfIFHJ3adM5BYfc7ruqvj5Do1Rj9YfCKo8INbE6qGvK1clP59jIWNPeNscyWWc3Hr1Tz4doWB3hcymzhHqDlUTW+WGlKoC+D/toBXt5EZ/2zlz+SYVhj156p35jaxfW2R6Qa4Z1TGMX5XlNWGfchPrfkRc4KuYVAxnANo89ANLxAFjeydnMvfPuqSeJ/0fHPUeC0DL+IgCLp/a8Ot8eieeddilJfefbd1tyBjjK6an6OtP2NaPx0VhtS4zblgDCRg1IsuzdIQ0Jrmc0814w8zKT9OjjoV1GnCJVp506be07rpR/p6pOkiywX/r3/0r1Zu5CCRiCbqqpqtOhaH37y/1v/vLr5+zm/eZ+kT5ZxRU8kX9HRJkCP0pm6myUabU/pGABIT/j8NP0wkdoPUFQb2fp5R0+kibZ7f7/JVXV9/91ynrzLw== \ No newline at end of file diff --git a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_choosing_airtime.png b/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_choosing_airtime.png deleted file mode 100644 index 4b638433d4..0000000000 Binary files a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_choosing_airtime.png and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_content_list_styled.png b/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_content_list_styled.png deleted file mode 100644 index 050e693a7b..0000000000 Binary files a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_content_list_styled.png and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_content_list_window.png b/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_content_list_window.png deleted file mode 100644 index 3470945fdb..0000000000 Binary files a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_content_list_window.png and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_empty_page.png b/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_empty_page.png deleted file mode 100644 index e535c682c2..0000000000 Binary files a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_empty_page.png and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_empty_single_block.png b/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_empty_single_block.png deleted file mode 100644 index 1530009f1e..0000000000 Binary files a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_empty_single_block.png and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_file_structure.png b/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_file_structure.png deleted file mode 100644 index 293be11940..0000000000 Binary files a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_file_structure.png and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_final_form.png b/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_final_form.png deleted file mode 100644 index 9c6d5a1196..0000000000 Binary files a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_final_form.png and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_first_form.png b/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_first_form.png deleted file mode 100644 index 9690c78f59..0000000000 Binary files a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_first_form.png and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_form_collect_sub.png b/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_form_collect_sub.png deleted file mode 100644 index 8265978bc3..0000000000 Binary files a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_form_collect_sub.png and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_form_creation.png b/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_form_creation.png deleted file mode 100644 index a40db268dc..0000000000 Binary files a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_form_creation.png and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_hide_content.png b/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_hide_content.png deleted file mode 100644 index 164e30de3e..0000000000 Binary files a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_hide_content.png and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_home_is_an_lp.png b/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_home_is_an_lp.png deleted file mode 100644 index 59928a53da..0000000000 Binary files a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_home_is_an_lp.png and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_image_in_article_ct.png b/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_image_in_article_ct.png deleted file mode 100644 index 3ae57bca7a..0000000000 Binary files a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_image_in_article_ct.png and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_main_screen.png b/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_main_screen.png deleted file mode 100644 index 08af63acf9..0000000000 Binary files a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_main_screen.png and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_new_layout.png b/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_new_layout.png deleted file mode 100644 index c7d0a12f7b..0000000000 Binary files a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_new_layout.png and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_page_with_featured_articles.png b/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_page_with_featured_articles.png deleted file mode 100644 index 7d4a2162ac..0000000000 Binary files a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_page_with_featured_articles.png and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_random_block.png b/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_random_block.png deleted file mode 100644 index 07e7a983f1..0000000000 Binary files a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_random_block.png and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_random_block.svg b/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_random_block.svg deleted file mode 100644 index f79a604c32..0000000000 --- a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_random_block.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_select_articles.png b/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_select_articles.png deleted file mode 100644 index bba145ca64..0000000000 Binary files a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_select_articles.png and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_select_layout.png b/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_select_layout.png deleted file mode 100644 index b965e3e17e..0000000000 Binary files a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_select_layout.png and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_starting_point.png b/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_starting_point.png deleted file mode 100644 index cb7d5bbb94..0000000000 Binary files a/docs/tutorials/page_and_form_tutorial/img/enterprise_tut_starting_point.png and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/img/photos.zip b/docs/tutorials/page_and_form_tutorial/img/photos.zip deleted file mode 100644 index 75919cdf73..0000000000 Binary files a/docs/tutorials/page_and_form_tutorial/img/photos.zip and /dev/null differ diff --git a/docs/tutorials/page_and_form_tutorial/page_and_form_tutorial.md b/docs/tutorials/page_and_form_tutorial/page_and_form_tutorial.md deleted file mode 100644 index 23cf72df9b..0000000000 --- a/docs/tutorials/page_and_form_tutorial/page_and_form_tutorial.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -description: Go through a Page and Form tutorial to learn how to create modular Sites and how to manage forms and their submissions. -edition: experience ---- - -# Page and Form tutorial - -This tutorial is a step-by-step guide to building an advanced website with [[= product_name_exp =]]. -It focuses on creating a front page using a feature called **Page Builder**. - -## Intended audience - -This tutorial is intended for users who have basic knowledge of [[= product_name =]]. -Ideally, you should be familiar with the concepts covered in the [Beginner tutorial](beginner_tutorial.md). - -## Learning outcomes - -After finishing this tutorial, you: - -- have a working knowledge of the Page functionality and architecture -- are able to create a Page and customize its layout -- are able to prepare and customize Page blocks -- are able to create a custom block -- know how to use Form Builder and configure your form -- know how to apply custom styling to blocks - -## Scenario - -In the course of this scenario you can build a website for a magazine for dog owners called 'It's a Dog's World'. - -You can create a welcome page that showcases the magazine's three most important types of content: articles, dog breed information and tips. - -You do this by means of a Page, making use of its specific blocks, and crafting your own as well. - -![It's a Dog's World - final result](enterprise_tut_main_screen.png "It's a Dog's World - final result") - -## Steps - -In this tutorial you go through the following steps: - -1. [Get a starter website](1_get_a_starter_website.md) -1. [Prepare the Page](2_prepare_the_landing_page.md) -1. [Use existing blocks](3_use_existing_blocks.md) -1. [Create a custom block](4_create_a_custom_block.md) -1. [Create a newsletter form](5_create_newsletter_form.md) diff --git a/docs/tutorials/tutorials.md b/docs/tutorials/tutorials.md deleted file mode 100644 index f8e2cc4d9d..0000000000 --- a/docs/tutorials/tutorials.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -description: Get started with tutorials to learn how to create a site with Cohesivo -page_type: landing_page ---- - -# Tutorials - -Get started with tutorials to learn how to create a site with [[= product_name =]]. - -!!! note - - Remember that each tutorial should be performed on a clean project to avoid conflicts with added or modified files. - -[[= cards([ - "tutorials/beginner_tutorial/beginner_tutorial", - "tutorials/page_and_form_tutorial/page_and_form_tutorial", - "tutorials/generic_field_type/creating_a_point2d_field_type", -], columns=3) =]] diff --git a/docs/users/user_registration.md b/docs/users/user_registration.md index ae02535ba1..b7c12b8b5a 100644 --- a/docs/users/user_registration.md +++ b/docs/users/user_registration.md @@ -6,7 +6,7 @@ description: Register new users. You can allow your users to create accounts by using the `/register` route. This route leads to a registration form that, when filled in, creates a new user content item in the repository. -To give your users a possibility to register themselves, follow the instructions on [enabling account registration](8_enable_account_registration.md). +To give anonymous users the possibility to register themselves, grant the anonymous user the `user` / `register` [policy](/permissions/policies.md). ## User types diff --git a/mkdocs.yml b/mkdocs.yml index 78b2e261c0..c437ba20a9 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -27,35 +27,6 @@ nav: - Getting started: - Getting started: getting_started/getting_started.md - First steps: getting_started/first_steps.md - - Tutorials: - - Tutorials: tutorials/tutorials.md - - Beginner tutorial: - - Beginner tutorial: tutorials/beginner_tutorial/beginner_tutorial.md - - 1. Get ready: tutorials/beginner_tutorial/1_get_ready.md - - 2. Create the content model: tutorials/beginner_tutorial/2_create_the_content_model.md - - 3. Customize the front page: tutorials/beginner_tutorial/3_customize_the_front_page.md - - 4. Display a single content item: tutorials/beginner_tutorial/4_display_single_content_item.md - - 5. Display a list of content items: tutorials/beginner_tutorial/5_display_a_list_of_content_items.md - - 6. Improve configuration: tutorials/beginner_tutorial/6_improve_configuration.md - - 7. Embed content: tutorials/beginner_tutorial/7_embed_content.md - - 8. Enable account registration: tutorials/beginner_tutorial/8_enable_account_registration.md - - Page and Form tutorial: - - Page and Form tutorial: tutorials/page_and_form_tutorial/page_and_form_tutorial.md - - 1. Get a starter website: tutorials/page_and_form_tutorial/1_get_a_starter_website.md - - 2. Prepare the landing page: tutorials/page_and_form_tutorial/2_prepare_the_landing_page.md - - 3. Use existing blocks: tutorials/page_and_form_tutorial/3_use_existing_blocks.md - - 4. Create a custom block: tutorials/page_and_form_tutorial/4_create_a_custom_block.md - - 5. Create a newsletter form: tutorials/page_and_form_tutorial/5_create_newsletter_form.md - - Generic field type: - - Creating Point 2D field type: tutorials/generic_field_type/creating_a_point2d_field_type.md - - 1. Implement Value class: tutorials/generic_field_type/1_implement_the_point2d_value_class.md - - 2. Define field type: tutorials/generic_field_type/2_define_point2d_field_type.md - - 3. Create a form: tutorials/generic_field_type/3_create_form_for_point2d.md - - 4. Introduce a template: tutorials/generic_field_type/4_introduce_a_template.md - - 5. Add a new Field: tutorials/generic_field_type/5_add_a_field.md - - 6. Implement settings: tutorials/generic_field_type/6_settings.md - - 7. Add basic validation: tutorials/generic_field_type/7_add_a_validation.md - - 8. Data migration: tutorials/generic_field_type/8_data_migration.md - API: - API: api/api.md - PHP API: