Typo3 change how objects are rendered (typo3 beginner)

0
votes

I'm fairly new to typo3 and I have an issue that i don't find an explanation on how to change it. I'm sure there are already some helpful tutorials but i have issues finding them. I am making a website and I have already made a template for fontend and backend. It is a very simple test template that consists only of one slider and one text element. The slider is handmade and should have the following layout:

<section class="custom-slider">
  <img src="img1.jpg">
  <img src="img2.jpg">
  ...
</section>

Thought easy, i have my slider place in my template, just need to add plain images. but typo3 gives me:

<section class="custom-slider">
    <div id="c3" class="frame frame-default frame-type-image frame-layout-0"><header><h2 class=""></h2></header><div class="ce-image ce-center ce-above"><div class="ce-gallery" data-ce-columns="1" data-ce-images="1"><div class="ce-outer"><div class="ce-inner"><div class="ce-row"><div class="ce-column"><figure class="image"><img class="image-embed-item" src="fileadmin/_processed_/1/2/csm_slider1_c3fdcdcaf5.jpg" width="600" height="187" alt="" /></figure></div></div></div></div></div></div></div>
</section>

Now i search how i can make my own custom elements or render existing elements different. I have found a lot of tutorials but they all are based on 'Extension Builder' or 'Builder' and require a custom extention. These don't seem to work on Typo3 8.7.x. Is there a different solution or can someone give me a good tutorial link?

Thank you in advanst:)

Ps: since i will have the same problem with styled text elements i would like to ask if there is a way to declare in the themplate how different predeterment elements are rendered?

1
typo3typo3-extensions
In which TYPO3 version are you use? – Pravin Vavadiya
I'm using Typo3 8.7.8 but I all ready have found the answer in writing my own extention:) – Nyxeen
@Bernd Wilke πφ answer best solution for the change layout – Pravin Vavadiya

1 Answers

1
votes

In TYPO3 8.7 (I assume) your rendering is done with FSC (fluid_styled_content), so you have to understand the mechanism of FSC to render a CE (ContentElement).

As the name suggests Fluid is used. Fluid uses different templates organized in three categories (each with it's own folder):

  • Layouts
  • Templates
  • Partials

The call goes to a template (in the folder 'templates') where a tag can be inserted to use a specific layout (from floder 'Layouts'). if this tag is given the rendering starts with the given layout. In the layout different sections and partials can be called. Sections belong to the template, partials need to have an own partial file (in folder 'Partials').
You can override single files from the given declaration to individulize the behaviour.

In your example you may evaluate the field layout in layout, template and partial to avoid the default wrapping of any content (your images) in different div tags.