Sulu CMS – Custom Content Element and repeating template snippets – PHP training Symfony Framework

Sulu CMS – Custom Content Element and repeating template snippets – PHP training Symfony Framework


Hello friends of software entertainment
and welcome to a new series about the Sulu content management system on this
tutorial. I will show you how to add custom content elements to your
application. First I do new sub project here from our Basesulu repo. It is here
linked down in the video description. I just make an git clone on an ITCS folder,
because I will do a workshop there next week. With this project name so I do here a
little change on the DDEV config file. I renamed the name from basesulu to ITCS. After that as you can see here on our project readme file
I do a DDEV start. After that I import the SQL dump and made and “ddev composer
install”. And when I do this I have here now an http://itcs.ddev.site/ and I
also have an admin area with slash admin. I can login with the credentials admin:admin. Now here is the actual Sulu version and I can go here to my webspace and have here our startpage. So startpage is from the page
configuration home page. So our target for today is to ad here a custom content
elements for a linklist. OK, I will go to the config templates
pages homepage XML configuration file. Here you will see a homepage as key and
here is what the editor will see later on the backend. And we have here our
title and you can see it here. We have here this start page new and we can
remove it to startpage or to link overview. You have here a live preview what
is very good for the editor you can save it and publish and now we also will have
this on the frontend. This is working because we have here this title as a
property and here on our templates pages home page twig we render this content.title to an h1 tag. OK now we want to add a new content element. So we
have here a lot of properties and now we will add here a PhpStorm
live template for our Sulu section and I will call this “section link list” and
there will be a title link list for the editor. and I will add here two new textlines for a headline and
subline. So I just add here text link list headline. I will prefix it here
with linklist because there will be more headlines on one page. So I
have here a headline and now I will do subline link list subline and when
I will reload our admin area now I have here linked list headline and subline.
And I can enter here our link list and here are helpfull links for the community.
And I can publish it. So now I do not have this here on our preview and I
also don’t have it on the frontend because it’s not rendered on our twig
template file. So let’s check to the template file. And when I am working I use, sure I, use
the debug function of twig. And this is called dump. There are two ways to dump
variables on twig, This is here the most popular I think. What will render the
dump inline. And there is also a very useful feature the twig dump
internal. And we will check this both variants. So now I have here our inline
output, what has the linked list headline and our linked list subline. But I also
have here on the debug bar of Symfony now our twig variables, what is a much
better way to use, because you will not break your template. So far so good.
I have here now our linked list. So maybe we have here an h2 element and I just
get out content.linklist the link list list headline and here I have maybe our
description.linkList.subline. And now I will
have the problem that I always have this dump here inline. So it is easier when
you remove this in line down and you use the internal dump to check out what is
happening. This is a much better way to work with Twig I think. Ok now we want to
add an element what is repeatable. so we want to add the items of the link list. For this you will go back to the
configuration and add here a new property and repeatable elements on Sulu
are block elements. So here will be somewhere some block elements in the
block. And there will be the link list items. This
is here for the editor and now we have here some default type what is a link item. You can see the live template
function will write it to here and also to here. This is important that that will
match. You can also have an selection here on block elements, what is now not
so important. And I have here our item for the editor. And this item has two
properties. One property is what the actual link will be displayed. This is
such a text line here. So I have here link item to display and display. And
then there will also be a link. This is something like URL. linkItem.url. So now I defined a
block with link items and each link item has a property linkitem.display and
linkitem.URL. So when I check our template
I also dump all content variables to my internal dump, so when I’m on the backend
area and we’ll reload it here I have here add block. And with this ada block I
can say display is Never Code Alone and the link will be nevercoldalone.de. So when I enter it here the schema will
be add here and now I have Never Code Alone and see URL nevercodealone.de.
I can now save and publish it. And now we will have here our linked list items
as array with type link item Never Code Alone and the URL of https://nevercodealone.de. So when we go back to the admin area we will see when we
have here 10 or 15 link items this would be much space to scroll here.
So it could be better, when we have this here in one online. Ok, so we have a
chance to do this here when I add on colspan.
And this is here 12 column grid system. so I can do colspace=”6″ here
and colspan=”6″ here and when I save it and reload it, the link list here is in one line.
So I also can do something on the backend for the layout in the backend. Ok, now I have this here and I want to
render it. So I will think this here is in ul and in this
ul there will be items for the link items. So I have here 4 link item in
content dot, let me check the variable name, linklist.items and I can close this and here will be something like this.
There will be an a with linkitem.linktem.url and here will be linkitem.linkItemDisplay. Ok, and I can also say ok this
will be target _blank and maybe the norel, how is this called, I don’t know now
how is it no real. There is something for Google SEO what they
want. Ok, maybe this will work. Ok, this is working perfect. So let me enter the second link block. I think it’s here. Now you also see the preview here
because it’s working. Blog with Codeception tutorials. Save and publish. And
now I have this here on the front end. Ok, so my last thing to do is to remove
this here and that’s it. So now let us see what we’ve done. We installed a new
basesulu project, then we go to the configuration file here and add a
section called linkLists. In this link list we have an headline and the
subline and a repeatable block element for the link items, with display and URL
and on the front end just on the twig file. We have here our headline and our
subline and we use the link list as for row for loop on Twig to display
the link URL and the link display. Ok my friends for me it’s super easy to
make here some templates editable and here only two files, what I have to do is
a configuration file and a Twig file. This is super important for me because I
can do very fast new pages. Check out all the
links here in the video description and please follow this channel. Give me
feedback, because I have here a new webcam and a new microphone about the display and the sound of this video. And please share this video and
give this great content management system a push.
Thank you

Comments

  1. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *