You can find all files used and modified in this step on GitHub.
We are now left with the last of the planned Landing Page elements. We w= ill create it by building a custom block for the Landing Page. You can util= ize the possibility of creating custom blocks in many ways, with many compl= ex configurations fitting your project. In this tutorial we will show the p= rocess of creating a block on a very simple example: we will display a rand= omly chosen Content item from a selected folder.
The procedure we will go through is based on (and uses parts of) a post written on the= eZ Community Blog. You can take a look there for more detailed explana= tion.
To create a custom block from scratch we will need four elements:
- a block definition
- a template for the block
- a block extension class
- block configuration for the services and templates config
Block defi= nition and template
A block definition contains block structure and the information that is =
passed from it to the template. Our definition will be contained in a src/AppBundle/Block fo=
lder.
<?php
namespace AppBundle\Block;
use EzSystems\LandingPageFieldTypeBundle\Exception\InvalidBlockAttributeExc=
eption;
use EzSystems\LandingPageFieldTypeBundle\FieldType\LandingPage\Definition\B=
lockDefinition;
use EzSystems\LandingPageFieldTypeBundle\FieldType\LandingPage\Definition\B=
lockAttributeDefinition;
use EzSystems\LandingPageFieldTypeBundle\FieldType\LandingPage\Model\Abstra=
ctBlockType;
use EzSystems\LandingPageFieldTypeBundle\FieldType\LandingPage\Model\BlockV=
alue;
use eZ\Publish\API\Repository\ContentService;
use eZ\Publish\API\Repository\LocationService;
use eZ\Publish\API\Repository\SearchService;
use eZ\Publish\API\Repository\Values\Content\Query\Criterion;
use eZ\Publish\API\Repository\Values\Content\LocationQuery;
class RandomBlock extends AbstractBlockType
{
/**
* Content ID regular expression.
*
* @example 16
*
* @var string
*/
const PATTERN_CONTENT_ID =3D '/[0-9]+/';
/** @var \eZ\Publish\API\Repository\LocationService */
private $locationService;
/** @var \eZ\Publish\API\Repository\ContentService */
private $contentService;
/** @var \eZ\Publish\API\Repository\SearchService */
private $searchService;
/**
* @param \eZ\Publish\API\Repository\LocationService $locationService
* @param \eZ\Publish\API\Repository\ContentService $contentService
* @param \eZ\Publish\API\Repository\SearchService $searchService
*/
public function __construct(
LocationService $locationService,
ContentService $contentService,
SearchService $searchService
) {
$this->locationService =3D $locationService;
$this->contentService =3D $contentService;
$this->searchService =3D $searchService;
}
public function getTemplateParameters(BlockValue $blockValue)
{
$attributes =3D $blockValue->getAttributes();
$contentInfo =3D $this->contentService->loadContentInfo($attr=
ibutes['parentContentId']);
$randomContent =3D $this->getRandomContent(
$this->getQuery($contentInfo->mainLocationId)
);
return [
'content' =3D> $randomContent,
];
}
/**
* Returns random picked Content.
*
* @param \eZ\Publish\API\Repository\Values\Content\LocationQuery $quer=
y
*
* @return \eZ\Publish\API\Repository\Values\Content\Content
*/
private function getRandomContent(LocationQuery $query)
{
$results =3D $this->searchService->findLocations($query);
$searchHits =3D $results->searchHits;
if (count($searchHits) > 0) {
shuffle($searchHits);
return $this->contentService->loadContentByContentInfo(
$searchHits[0]->valueObject->contentInfo
);
}
return null;
}
/**
* Returns LocationQuery object based on given arguments.
*
* @param int $parentLocationId
*
* @return \eZ\Publish\API\Repository\Values\Content\LocationQuery
*/
private function getQuery($parentLocationId)
{
$query =3D new LocationQuery();
$query->query =3D new Criterion\LogicalAnd([
new Criterion\Visibility(Criterion\Visibility::VISIBLE),
new Criterion\ParentLocationId($parentLocationId),
]);
=20
return $query;
}
public function createBlockDefinition()
{
return new BlockDefinition(
'random',
'Random',
'default',
'assets/images/blocks/random_block.svg',
[],
[
new BlockAttributeDefinition(
'parentContentId',
'Parent',
'embed',
self::PATTERN_CONTENT_ID,
'Choose a valid ContentID',
true,
false,
[],
[]
),
]
);
}
public function checkAttributesStructure(array $attributes)
{
if (!isset($attributes['parentContentId']) || preg_match(self::PATT=
ERN_CONTENT_ID, $attributes['parentContentId']) !=3D=3D 1) {
throw new InvalidBlockAttributeException('Parent container', 'p=
arentContentId', 'Parent ContentID must be defined.');
}
}
}=20
Now we need to define the block template. It will be placed in
<div class=3D"row random-block">
<h4 class=3D"text-right">{{ 'Tip of the Day'|trans }}</h4>
<h5>{{ ez_content_name(content) }}</h5>
<div class=3D"random-block-text">
{{ ez_render_field(content, 'body') }}
</div>
</div>=20
Block = extension and configuration
The next step is defining the extension that will provide block configur=
ation to the eZ Platform Enterprise Edition app. To do this you need t=
o make some additions to src/AppBundle/DependencyInjection/AppExtensi=
on.php.
First, add these three lines after remaining use statements=
:
use Symfony\Component\DependencyInjection\Extension\PrependExtensio= nInterface; use Symfony\Component\Yaml\Yaml; use Symfony\Component\Config\Resource\FileResource;=20
Second, append implements PrependExtensionInterface to=
the AppExtension extends Extension line, so that it looks li=
ke this:
class AppExtension extends Extension implements PrependExtensionInt= erface=20
Finally, add the following function at the end of the one existing class= :
public function prepend(ContainerBuilder $container)
{
$configFile =3D __DIR__ . '/../Resources/config/blocks.yml';
$config =3D Yaml::parse(file_get_contents($configFile));
$container->prependExtensionConfig('ez_systems_landing_page_field_ty=
pe', $config);
$container->addResource(new FileResource($configFile));
}=20
Next, you need to provide the block configuration in two files. Add this=
section in the services.yml file in src/AppBundle/Resou=
rces/config under the services key:
app.block.random:
class: AppBundle\Block\RandomBlock
arguments:
- '@ezpublish.api.service.location'
- '@ezpublish.api.service.content'
- '@ezpublish.api.service.search'
tags:
- { name: landing_page_field_type.block_type, alias: random }=
=20
Create a blocks.yml file in the same folder:
blocks:
random:
views:
random:
template: AppBundle:blocks:random.html.twig
name: Random Content Block View=20
At this point the new custom block is ready to be used.
Go back to editing your Front Page. You can see the new block in the Ele= ments menu on the right. Now drag it to the Landing Page side column. Acces= s the block's settings and choose the All Tips Folder from the menu.
We're left with the last cosmetic changes. First, you can see that the n=
ew Block has a broken icon in the Elements menu. This is because we haven't=
provided this icon yet. If you look back to the RandomBlock.php file, you can see the icon file defined as random_block.svg=
. Download the provided file and place it in web/a=
ssets/images/blocks.
![the provided file](3D"/download/attachments/32868249/random_block.svg?versi=){kind=link}
Finally, let's add some styling for the new block. Add the following to =
the end of the web/assets/css/style.css file:
/* Random block */
.random-block {
border: 1px solid #83705a;
border-radius: 5px;
padding: 0 25px 25px 25px;
margin-top: 15px;
}
.random-block h4 {
font-variant: small-caps;
font-size: .8em;
}
.random-block h5 {
font-size: 1.2em;
}
.random-block-text {
font-size: .85em;
}=20
Now go to this new home page from the front end. You can see the Tip of = the Day block display a random Tip from the Tips folder. Try to refresh the= page a couple of times and you will see the tip change randomly.
Congratulations!
You have finished the tutorial and created your first customized Landing= Page.
You have learned how to:
- Create and customize a Landing Page
- Make use of existing blocks and adapt them to your needs
- Plan content airtimes using Schedule Blocks
- Create custom blocks
=E2=AC=85 Previous: Step 3 - Using existing blocks
- =20