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
Related
I hope you are good.
I'm having trouble to customise my label with amcharts.
I'm trying to put on a map, the date and the place of an event as a label like that:
https://codepen.io/acivita/pen/BarvPzZ
<div class="main2">
<div class="container">
<div class="element">713</div>
<div class="element2">Pampelune</div>
</div>
</div>
When I exported this code on amcharts, it works well but it's too big:
https://codepen.io/acivita/pen/KKobeXm
var label = labelSeries.mapImages.create();
label.latitude = element.latitude;
label.date = tmpData[0].eventInfo.date;
label.city = tmpData[0].eventInfo.specific;
label.longitude = element.longitude;
label.interactionsEnabled = false;
label.children.getIndex(0).html = `
<div class="main2">
<div class="container">
<div class="element">713</div>
<div class="element2">Pampelune</div>
</div>
</div>`
Example :
I added a red background to see why it wasn't aligned with the dot.
https://codepen.io/acivita/pen/vYRmzgO
So when I try to reduce it, there are some issues:
the text is not vertically aligned anymore.
it seems to have some margin .
It looks like if I put too small properties for my text the behaviour get weird.
It may be a css/html error because I'm not very good at positioning stuff.
Thanks for the help and have a nice day.
I want to pull the text inside the span tags but when I try and use .text or get_text() I get errors (either after print spans or in the for loop). What am I missing? I have it set just now to just do this for the first div of class col, just to test if it is working, but I will want it to work for the 2nd aswell.
Thanks
My Code -
premier_soup1 = player_soup.find('div', {'class': 'row-table details -bp30'})
premier_soup_tr = premier_soup1.find_all('div', {'class': 'col'})
for x in premier_soup_tr[0]:
spans = x.find('span')
print (spans)
Output
-1
<span itemprop="name">Alisson Ramses Becker</span>
-1
<span itemprop="birthDate">02/10/1992</span>
-1
<span itemprop="nationality"> Brazil</span>
-1
>>>
The HTML
<div class="col">
<p>Name: <strong><span itemprop="name">Alisson Ramses Becker</span> </strong></p>
<p>Date of birth:<span itemprop="birthDate">02/10/1992</span></p>
<p>Place of birth:<span itemprop="nationality"> Brazil</span></p>
</div>
<div class="col">
<p>Club: <span itemprop="affiliation">Liverpool</span></p>
<p>Squad: 13</p><p>Position: Goal Keeper</p>
</div>
If you just want the text in the spans you can search specifically for the spans:
soup = BeautifulSoup(html, 'html.parser')
spans = soup.find_all('span')
for span in spans:
print(span.text)
If you want to find the spans with the specific divs, then you can do:
divs = soup.find_all( 'div', {'class': 'col'})
for div in divs:
spans = div.find_all('span')
for span in spans:
print(span.text)
If you just want all of the values after the colons, you can search for the paragraph tags:
soup = BeautifulSoup(html, 'html.parser')
divs = soup.find_all( 'div', {'class': 'col'})
for div in divs:
ps = div.find_all('p')
for p in ps:
print(p.text.split(":")[1].strip())
Kyle's answer is good, but to avoid printing the same value multiple times like you said happened, you need to change up the logic a little bit. First you parse and add all matches you find to a list and THEN you loop through the list with all the matches and print them.
Another thing that you may have to consider is this problem:
<div class=col>
<div class=col>
<span/>
</div>
</div>
By using a list instead of printing right away, you can handle any matches that are identical to any existing records
in the above html example you can see how the span could be added twice with how you find matches in the answer suggested by Kyle. It's all about making sure you create a logic that will only find the matches you need. How you do it is often/always dependant on how the html is formatted, but its also important to be creative!
Good luck.
the main idea is showing picture according to selected id:
<div *ngIf="t">
<h2>{{t.name}} details!</h2>
<h3>{{t.description}}</h3>
<img src="images/inside/1.jpg" class = "grid grid-pad">
</div>
instead of 1.jpg i would like to use t.filename? How can i do this?
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
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.