remove autogenerated DIVs in TYPO3 - html

Have search the net and can't find a solution.
If im make a page in TYPO3 and add some content, i end up with this.
<div id="clear"> </div>
<!-- CONTENT ELEMENT, uid:4/html [begin] -->
<div id="c4" class="csc-default">
<!-- Raw HTML content: [begin] -->
<div id="topbilled_om"></div>
<!-- Raw HTML content: [end] -->
</div>
<!-- CONTENT ELEMENT, uid:4/html [end] -->
<!-- CONTENT ELEMENT, uid:2/html [begin] -->
<div id="c2" class="csc-default">
<!-- Raw HTML content: [begin] -->
<div id="LeftColumn">
And what i want is this
<div id="clear"></div>
<div id="topbilled_om"></div>
<div id="LeftColumn"></div>
How do i skip the extra added div's, my problem is that its make an error in my design, bc of the extra added div's ?

With TYPO3 7.6 and an enabled fluid_styled_content extension, this comes from fluid_styled_content/Resources/Private/Layouts/ContentFooter.html.
You have to add your own layout path in typoscript:
lib.fluidContent.layoutRootPaths.100 = EXT:foo/Resources/Private/Layouts/
and then copy and adjust the ContentFooter.html file in your extension.

You can delete the innerWrap of a cObject:
tt_content.stdWrap.innerWrap >
Yet I do not recommend it. It looks like you're trying to use HTML element as some kind of placeholders. You could use a field like "layout" (in the page properties) to define custom wraps instead of csc-default, e.g.:
tt_content.stdWrap.innerWrap.cObject = CASE
tt_content.stdWrap.innerWrap.cObject {
key.field = layout
1 = TEXT
1.value = <div class="my-layout-1">|</div>
2 = TEXT
2.value = <div class="my-layout-2">|</div>
}
and rename the layout in the backend:
TCEFORM.tt_content {
layout.altLabels.1 = My Layout 1
layout.altLabels.2 = My Layout 2
}

To remove comments disable them in your TS template:
page.config.disablePrefixComment = 1
To disable csc-* frames you can set it manually to the No frame on Appearance tab of each tt_content or better just set it as default with PageTS of root page:
TCAdefaults.tt_content.section_frame=66
Finally you can just overwrite whole CSC (CSS Styled Content) in your own template to remove unwanted wraps.

Related

I'm trying to distribute the content from *ngFor over different html elements, in different divs

I have a set of buttons that are created with the ngFor functionality.
Separate to these buttons there is a set of that are toggled to visible and invisible when you press these buttons.
What I am trying to achieve is that the content loaded in that second set of divs matches the content of the ngFor-created buttons.
All documentation I find online treates these problems with a table and table rows but that's always within the same Element.
the buttons
and the content
enter image description here
<div id="map" class="blue">
<!-- set of buttons filled with data from arrData:-->
<div *ngFor="let Lore of arrData" id="Content-knop" class="black knop" (click)="LoreToggle()">
{{Lore.Name}}
So what I am trying to do is load the rest of the data associated with Lore.Name on the component beneath, that is toggled to visible and invisible by the LoreToggle function in the element above.
<table>
<tr>Name <!--Load content from Content-Knop here--></tr>
<tr>Tribe <!--Load content from Content-Knop here--></tr>
<tr>Region <!--Load content from Content-Knop here--></tr>
</table>
<div class="green">
<p>Description <!--load content from Content-Knop here--></p>
</div>
I hope this makes sense. I know my code is missing some ng selected functionality somewhere but I can't find a clean, simple solution that matches my criteria,
I am still not quite certain that I fully understand your issue, but to me it sounds as simple as this:
example.component.ts:
const arrData = [
{ name: 'name1', tribe: 'tribe1', region: 'region1' },
{ name: 'name2', tribe: 'tribe2', region: 'region2' },
...
];
let visibleData;
public toggleVisibleData(data) {
this.visibleData = data;
}
example.component.html
<!-- set of buttons filled with data from arrData:-->
<div *ngFor="let lore of arrData" (click)="toggleVisibleData(lore)">
{{lore.name}}
</div>
...
<ng-container*ngIf="visibleData">
<table>
<tr>{{ visibleData.name }}</tr>
<tr>{{ visibleData.tribe }}</tr>
<tr>{{ visibleData.region }}</tr>
</table>
<div class="green">
<p>{{ visibleData.description }}</p>
</div>
</ng-container>
Please also notice that I corrected the code to stick to the Angular coding style guidelines.

html merge 2 columns in 1 with 100% width bootstrap 2

I have the following HTML markup in my .NET MVC project:
<div class="row">
<div class="span6">#Model.Data</div>
<div class="span6">#Model.OtherData</div>
</div>
I'm getting data from server. So I want to do the following:
If data is empty then show other data with width = 100%.
Just to clarify I want to do something like that:
<div class="row">
<div class="span12">#Model.OtherData</div>
</div>
Or vice versa.
Is there a way to do that? Maybe with using different HTML tags / CSS classes.
Essentially you just want conditionally display the #Model.Data only if it isn't null. You can also set the col class with a variable, and conditionally change that variable depending if #Model.Data exists or not. Try something like this:
# {
var colClass = 'span6';
if (#Model.Data == null) {
colClass = 'span12';
}
}
<div class="row">
#if (#Model.Data != null) {
<div class="#colClass">#Model.Data</div>
}
<div class="#colClass">#Model.OtherData</div>
</div>

Select specific html tags from a liste of html tag via an xpath selector

I want get some specific information from this html code :
<div class="main">
<div class="a"><div><a>linkname1</a></div></div> <!-- I DON'T want get the text of this 'a' tag -->
<div class="b">xxx</div>
<div class="c">xxx</div>
<div class="a"><div><a>linkname2</a></div></div> <!-- I want get the text of this 'a' tag -->
<div class="a"><div><a>linkname3</a></div></div> <!-- I want get the text of this 'a' tag -->
<div class="a"><div><a>linkname4</a></div></div> <!-- I want get the text of this 'a' tag -->
<div class="a"><div><a>linkname5</a></div></div> <!-- I want get the text of this 'a' tag -->
<div class="d"></div>
<div class="c">xxx</div>
<div class="a"><div><a>linkname6</a></div></div> <!-- I DON'T want get the text of this 'a' tag -->
<div class="a"><div><a>linkname7</a></div></div> <!-- I DON'T want get the text of this 'a' tag -->
<div class="a"><div><a>linkname8</a></div></div> <!-- I DON'T want get the text of this 'a' tag -->
<div class="d"></div>
<div class="c">xxx</div>
<div class="a"><div><a>linkname9</a></div></div> <!-- I DON'T want get the text of this 'a' tag -->
<div class="a"><div><a>linkname10</a></div></div> <!-- I DON'T want get the text of this 'a' tag -->
</div>
I want get in an array the list of the link's text in the 'second' 'a' (class) tags block (between the first div with the class 'c' and the second div with the class 'c') . How can I do that via an xpath selector ? is it possible ? I don't find how do..
With my example, the expected result is :
linkname2
linkname3
linkname4
linkname5
Thank you :)
Your question is a Set question like explained in this SO answer: How to perform set operations in XPath 1.0.
So applied to your specific situation you should use an intersection like this:
(: intersection :)
$set1[count(. | $set2) = count($set2)]
set1 should be the follow set after div[#class='c'] and
set2 should be the preceding set before div[#class='d'].
Now, putting both together according to the above formula with
set1 = "div[#class='c'][1]/following-sibling::*" and
set2 = "div[#class='d'][1]/preceding-sibling::*"
the XPath expression could look like this:
div[#class='c'][1]/following-sibling::*[count(. | current()/div[#class='d'][1]/preceding-sibling::*) = count(current()/div[#class='d'][1]/preceding-sibling::*)]
Output:
linkname2
linkname3
linkname4
linkname5
You can try this expression:
/div/div[position() > 3 and position() < 8]/div/a/text()
I found one possible solution :)
//following::div[#class='a' and count(preceding::div[#class="c"]) = 1]/div/a/text()

Nokogiri HTML Nested Elements Extract Class and Text

I have a basic page structure with elements (span's) nested under other elements (div's and span's). Here's an example:
html = "<html>
<body>
<div class="item">
<div class="profile">
<span class="itemize">
<div class="r12321">Plains</div>
<div class="as124223">Trains</div>
<div class="qwss12311232">Automobiles</div>
</div>
<div class="profile">
<span class="itemize">
<div class="lknoijojkljl98799999">Love</div>
<div class="vssdfsd0809809">First</div>
<div class="awefsaf98098">Sight</div>
</div>
</div>
</body>
</html>"
Notice that the class names are random. Notice also that there is whitespace and tabs in the html.
I want to extract the children and end up with a hash like so:
page = Nokogiri::HTML(html)
itemhash = Hash.new
page.css('div.item div.profile span').map do |divs|
children = divs.children
children.each do |child|
itemhash[child['class']] = child.text
end
end
Result should be similar to:
{\"r12321\"=>\"Plains\", \"as124223\"=>\"Trains\", \"qwss12311232\"=>\"Automobiles\", \"lknoijojkljl98799999\"=>\"Love\", \"vssdfsd0809809\"=>\"First\", \"awefsaf98098\"=>\"Sight\"}
But I'm ending up with a mess like this:
{nil=>\"\\n\\t\\t\\t\\t\\t\\t\", \"r12321\"=>\"Plains\", nil=>\" \", \"as124223\"=>\"Trains\", \"qwss12311232\"=>\"Automobiles\", nil=>\"\\n\\t\\t\\t\\t\\t\\t\", \"lknoijojkljl98799999\"=>\"Love\", nil=>\" \", \"vssdfsd0809809\"=>\"First\", \"awefsaf98098\"=>\"Sight\"}
This is because of the tabs and whitespace in the HTML. I don't have any control over how the HTML is generated so I'm trying to work around the issue. I've tried noblanks but that's not working. I've also tried gsub but that only destroys my markup.
How can I extract the class and values of these nested elements while cleanly ignoring whitespace and tabs?
P.S. I'm not hung up on Nokogiri - so if another gem can do it better I'm game.
The children method returns all child nodes, including text nodes—even when they are empty.
To only get child elements you could do an explicit XPath query (or possibly the equivalent CSS), e.g.:
children = divs.xpath('./div')
You could also use the children_elements method, which would be closer to what you are already doing, and which only returns children that are elements:
children = divs.element_children

How to remove div around an image in typo3?

I added an image in typo3. It showed up with extra div in page.
<div class="csc-textpic csc-textpic-center csc-textpic-above">
<div class="csc-textpic-imagewrap" data-csc-images="1" data-csc-cols="2">
<div class="csc-textpic-center-outer">
<div class="csc-textpic-center-inner">
<figure class="csc-textpic-image csc-textpic-last">
<img src="fileadmin/user_upload/aetuts.jpg" width="200" height="50" alt=""></figure>
</div>
</div>
</div>
</div>
I want something like this
<img src="fileadmin/user_upload/aetuts.jpg" width="200" height="50" alt="">
with no extra wrapper.
I can do something like this for removing extra wapper around content.
tt_content.stdWrap.innerWrap >
How to do it for image?
Regarding your specific question
The following code should remove all wraps around the image. Keep in mind that this also removes the positioning and floating abilities.
# Remove some wraps
tt_content.image.20.imageStdWrap.dataWrap >
tt_content.image.20.imageStdWrapNoWidth.dataWrap >
tt_content.image.20.imageColumnStdWrap.dataWrap >
# Redefine the layout switch with only one default case
tt_content.image.20.layout >
tt_content.image.20.layout = CASE
tt_content.image.20.layout.key.field = imageorient
tt_content.image.20.layout.default = TEXT
tt_content.image.20.layout.default.value = ###IMAGES### ###TEXT###
# Remove the wrap around the image subtext
tt_content.textpic.20.text.wrap = |
# Define a new rendering method without wraps
tt_content.image.20.rendering.noWraps {
imageRowStdWrap.dataWrap = |
noRowsStdWrap.wrap =
oneImageStdWrap.dataWrap = |
imgTagStdWrap.wrap = |
editIconsStdWrap.wrap = |
caption.wrap = |
}
# Set this as active rendering method
tt_content.image.20.renderMethod = noWraps
.
How to do that for any content element
Use the Template view in Typo3
Go to the page with your template
Edit your template
Select the Typoscript-Object-Browser at the top (instead of Info/Edit)
Use the search form to find a wrap, e.g. "csc-textpic"
Identify the wraps or templates that you want to remove
Overwrite or delete > them in you Typoscript code