CODEWITHSUNDEEP
cssimagetypo3
user2749184
user2749184

Reputation: 25

Creating custom layouts for Images in page content TYPO3 6

Typo3 provides option to add multiple images to a page content, but all the images are wrapped under some default <div> tags. I want these images to be wrapped under <ul> and <li> tags instead and giving my own custom CSS ids and classes to it.

There are not many resources on TYPO3 for me to approach this issue. Can TYPO3 allow to use custom tags for the page content elements?

UPDATE

From Jost's answer was able to get my images displayed, but how do I split the image details?

My each image will have title, alt-text, image-path and image-link. Now, using TypoScript how do I retrieve this, because each details has to go in separate tags.

Upvotes: 0

Views: 3353

Answers (2)

Ralf Merz
Ralf Merz

Reputation: 111

This post is a bit older but I want to add the following:

If you want to understand how the different content elements are wrapped, you may have a look into the css_styled_content extension. I assume that you have included the "Static Template (from extension)" in your main Typoscript template. You can find the setup.txt here: typo3/sysext/css_styled_content/static/setup.txt

There you´ll find the line Jost mentioned in line 860 (TYPO3 version 6.1), for example. And of course a lot of other definitions, too. But check to read the documentation and tutorials on typo3.org.

HTH merzilla

Upvotes: 1

Jost
Jost

Reputation: 5840

Check the TypoScript object browser. There you will find the object tt_content, which contains the rendering definitions for content elements. The rendering definition for images is found at tt_content.image.20, for example

tt_content.image.20.imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap" style="width:{register:totalwidth}px;"> | </div>

The default definitions given there are usually provided by the static TypoScript of CSS-styled-content. You can overwrite them in your own TS, but when updating to a newer TYPO3-version, the default template may change, which could result in additional wrappers.

Update

Most content rendering in TYPO3 is defined in the TypoScript object tt_content. You can browse all TS-objects that will be used on a page by selecting the "Template" module and the page in question, and then choose "TypoScript Object Browser" in the selectbox at the top of the window. To understand what that stuff means, knowledge of TypoScript is necessary (Tutorial, Reference).

You can add your own TypoScript, which may override existing settings. You can do that in the Template-module too, but usually this is done by creating a file containing the script somewhere in the fileadmin folder and including it from the Template module.

The above enables you to edit the markup of the page. (Additional) CSS is usually defined in external files, that are included by a PAGE object (see the reference about that).

Upvotes: 1

Related Questions