typo3: Change style of h2 header - html

I'm still fiddling with typo3 (Version: 6.2.15) and I have gotten none of the code I found on the net to work. What I want to do, is define that a header is always converted into:
<h2 class="title-divider">
<span> {HEADERTEXT} <span class="de-em"></span></span>
<small>{SUBHEADER}</small>
</h2>
What I tried:
Based on this website: https://axelerant.com/change-typo3-header-layout-options/
I was able to add new Header types, but when I use the code for the styling from this website, my header just disappears...
I also tried to use the code that was published at http://www.typo3-addict.com/2010/03/a-custom-header-layout/ but first, it doesn't work for me, and second I don't really get how I could change it to display the subheader.
Can anyone point me in the right direction, or even better give me a code example that explains the concept that is followed, since it seems to be a misunderstanding of the concept.
Thanks in advance!

Alright, a couple of ours into the documentation and I have found a solution that works:
I added
stdheader.10.2 = COA
stdheader.10.2 {
setCurrent {
field = header
htmlSpecialChars = 1
}
key {
field = header_layout
ifEmpty = {$content.defaultHeaderType}
ifEmpty.override.data = register: defaultHeaderType
}
10 = TEXT
10.current = 1
20 = TEXT
20 {
field = subheader
stdWrap.noTrimWrap = | <span class="de-em"></span></span><small>|</small>|
stdWrap.required = 1
field.value =
}
stdWrap.dataWrap = <h2 class="title-divider">|</h2>
typolink.parameter.field = header_link
stdWrap.required = 1
}
stdheader.20.2 = COA
stdheader.20.2 {
wrap = <span style="display: none" class="hiddensubheader">|</span>
}
to the lib element in setup.ts.

Related

Rendering content element by Uid

I'm trying to render a content element only by having it's Uid.
It's supposed to be the login form of fe_login placed directly into a navigation Overlay.
I tried saving the element into a variable by using CONTENT. It did not work, obviously.
But I'm not even sure if I used used the correct syntax.
page.10.variables.contentLogin = CONTENT
page.10.variables.contentLogin {
table = tt_content
select.where {
uidInList = 32
pidInList = 0
}
}
And the same for lib.loginContent.
Added both respectively with
{contentLogin -> f:format.raw()}
<f:cObject typoscriptObjectPath="lib.loginContent"/>
But this only renders the object I already have on this page and not the element I am looking for globally.
EDIT: I found the solution. See my own answer.
I found the solution. The problem in my code is the select.where statement.
The working code is:
lib.loginContent = CONTENT
lib.loginContent {
table = tt_content
select {
uidInList.field = myUid
pidInList = 0
}
}
and in HTML
<f:cObject typoscriptObjectPath="lib.loginContent" data="{myUid: 32}"/>
The change I made was to just delete the ".where" from the select.
After checking the Doc again and again I finally realized my mistake. I hope other people will find this question and answer useful as I did not find anything on the internet that could help me with the problem.
Code for static content element:
lib.foo = CONTENT
lib.foo {
#tt_content is the default table. I just like to write down where Im looking for it
table = tt_content
select {
uidInList.field = Your ContentElement ID goes here!
pidInList = 0
}
}
<f:cObject typoscriptObjectPath="lib.loginContent">
That's it. Enjoy!
The f:cObject-viewhelper has a data-attribute for passing any data to the called TypoScript-object. The passed data is accessible as fields in TypoScript:
The Fluid part:
<f:cObject typoscriptObjectPath="lib.loginContent" data="{myUid: 123}"/>
And in TypoScript:
lib.loginContent = CONTENT
lib.loginContent {
table = tt_content
select.where {
uidInList.field = myUid
pidInList = 0
}
}

Typoscript: render HTML table with database values

Im completely new to typoscript therefore I have quite a hard time with the syntax but I think I am getting there.
My task is to render an HTML table and fill it with values from a database table (doesn't matter which one). In my case I took the tt_content table and tried to fill my HTML table with the "header" field and the "bodytext" field.
So I made a completely empty template and wrote the following code in the "setup" field of the template. I added some headers and texts to the sites I have to test my code but I get a completely empty page not even the "table" HTML tags are there.
After 4 days of research I still don't know what my problem is here so I am quite desperate.
Here is what I have so far:
page = PAGE
page.typeNum = 0
lib.object = COA_INT
lib.object {
10 = TEXT
10.value = <table>
20 = CONTENT
20.wrap = <tr>|</tr>
20 {
table = tt_content
select {
orderBy = sorting
}
renderObj = COA
renderObj {
10 = COA
10 {
10 = TEXT
10 {
field = header
wrap = <td>|</td>
}
20 = TEXT
20 {
field = bodytext
wrap = <td>|</td>
}
}
}
}
20 = TEXT
20.value = </table>
}
If someone could help me out here it would be much appreciated.
Thanks in advance.
Check if you have any 'template parser' running.
go to template -> choose 'Info/modify' and click on 'edit the whole ...'
There choose the includes tab and include css_styled_content' (Yes, there is another way of parsing your content, with fluid_styled_content'. you can choose that instead if you are on TYPO3 7.6.* or higher)
These 'parsers' will give you all the needed typoscript included to parse and render your content. Without these, nothing will be rendered when you want to render content from the backend.
second: your typoscript is wrong
You have made a content array (lib.content is a Content Object Array) and filled it with content. But you overwrite the content with key 20.
change
20 = TEXT
20.value = </table>
to
30 = TEXT
30.value = </table>
third: you have created a Page object but you did not add your COA into that page object.
Try this:
page = PAGE
page.10 < lib.object
What this does is include your lib.content in the Page Object at 'level' 10
you can also do
page.20 = TEXT
page.20.value = hello world
This will be rendered after your lib.content.
As you could notice. It is a bit as writing a big Array (because typoscript is a big Array ;)
Beware that you place your lib.content ABOVE the page object declaration. else it will not be able to include it.
There is also a slack channel for TYPO3 you can join if you have other questions. People over there are more then willing to help you.
https://forger.typo3.org/slack

TYPO3 templates and changes the div id

I have a Template in TYPO3 that i want to use to some pages, in here i have a DIV.
Is it possible depending on the page UID, to changes the DIV ID. its the only div thats changes content/image, and im looking to put this DIV inside my main.html template.
so if
UID = 2 <div id="topbanner_about"></div>
UID = 3 <div id="topbanner_drills"></div>
and so on....
Can i do this, and can i do it in TS (Typo Script) or how can i do this, so i dont need to make 5 templates.
You can do this by inserting a marker in your template. It would look somehow like this:
In the template:
[...]
<div id="topbanner_###ID_SUFFIX###"></div>
[...]
In the TypoScript, where the template is inserted:
10 = TEMPLATE
10 {
template = FILE
template.file = fileadmin/main.html
marks {
ID_SUFFIX = TEXT
ID_SUFFIX {
insertData = 1
# This makes sure that the output is valid and prevents XSS attacks
htmlSpecialChars = 1
value = {page:uid} # Use this to insert the page ID or
value = {page:subtitle} # Use to insert subtitle of page
... # Same works for other fields of the page record.
}
}
}
If the fields provided by default pages are not enough, you could add another field to the page records. The best way to do that would be to build an extension that does it.
I found a better solution, if i use ressource and add an image and on the next page do the same just with another images, then in my main TS i add this code.
lib.imageElement = FILES
lib.imageElement {
references {
data = levelmedia:-1,slide
listNum = 0
}
renderObj = COA
renderObj {
10 = IMAGE
10 {
file.import.data = file:current:originalUid
altText.data = file:current:title
}
}
}
It do the trick, then it shows a diffrent image in the top/header on every page.
But thx...

Displaying Mediapicker field in blogpost.list.cshtml in Orchard CMS

I'm trying to edit the page when my blog displays the Parts.Blogs.BlogPost.List.cshtml. I went to ContentItems under content and added a MediaPicker Field called BlogPostImage to my BlogPosts, and I also made an alternate to Parts.Blogs.BlogPost.List.cshtml in my theme (which is the file I'm editing. The code that I have in there is:
#using Orchard.ContentManagement;
#{
IEnumerable<object> blogPosts =
Model.ContentItems;
}
#if (blogPosts == null || blogPosts.Count() < 1)
{
<p>#T("No posts.")</p>
}
else
{
int count = 0;
<div id="Blog">
<div id="slides">
<div class="slides_container">
#foreach (dynamic post in blogPosts)
{
count++;
string title = post.ContentItem.TitlePart.Title;
ContentItem item = post.ContentItem;
string text = post.ContentItem.BodyPart.Text;
string postImageUrl = post.BlogPostImage.Url;
<div class="slide">
<img src="#postImageUrl" width="625" height="400" alt="Slide #count.ToString()">
<div class="caption" style="bottom: 0">
<h4>#title</h4>
</div>
</div>
}
</div>
</div>
</div>
}
I cannot however figure out how in the world to call that mediapicker field into my list. Any way I try it comes back blank with some kind of querystring in the href. Something like "?23423455657". I took off the variable and that querystring still shows up. What I'm basically trying to accomplish is to put these into a slideshow, with the jquery to start the slideshow in the layout.cshtml. TIA
//SOLUTION:
After days and days of reading and researching I finally found a working solution.
Replacing:
string postImageUrl = post.BlogPostImage.Url;
With:
string postImageUrl = ((ContentItem)post.ContentItem).Parts.SelectMany(p => p.Fields).Where(f => f.Name == "BlogPostImage").First().Storage.Get<string>(null);
Got it from here: http://blog.cloudconstruct.com/post/Creating-a-rotating-image-gallery-in-Orchard-CMS.aspx
I hope it helps anyone stuck in the same boat. I am still curious why I couldn't simply call it the way I had it, but it's working now! :)
You can get the image url using dynamic:
dynamic postItem = post.ContentItem;
var postImageUrl = (string)postItem.BlogPost.BlogPostImage.Url;
Content item, when used as a dynamic object, exposes all its parts (here we're using the part that has the same name as the type, and where the fields are added when adding them from the admin). The part itself has dynamic members for each field (here, BlogPostImage), and from there you can get to the field's properties (Url here).
I tried the above answer with version 1.7 with no joy. I ended up having to download a copy of the source so I could delve into the objects. The below code got me the information I needed and also will help in future when I add extra fields to other content. I used part of the above answer to get to my solution...
IEnumerable<object> blogPosts = Model.ContentItems.ContentItems;
foreach (dynamic post in blogPosts) {
dynamic q = ((ContentItem)post.ContentItem).Parts.SelectMany(p => p.Fields).Where(f => f.Name == "BlogPostImage").First();
string postImageUrl = q.MediaParts[0].MediaUrl;
<img src="#postImageUrl" />
}
Hope this helps somebody.

Umbraco MediaById not working as expected

Trying to display a set of images from uComponents' MNTP, and can't get a value for the umbracoFile property - in the example below, both umbracoFile and url return empty strings:
foreach (var id in #Model.sliders) {
var media = Model.MediaById(id.InnerText);
if (media != null){
var url = media.umbracoFile;
<p>name = #media.Name</p>
<p>alt = #media.altText</p>
<p>url = #media.umbracoFile</p>
<p>url = #url</p>
}
}
It's getting really really really annoying... I've worked around it in other areas like so, using Model.Media:
<img src="#Model.Media("topRightImage", "umbracoFile")" alt="#Model.Media("topightImage", "altText")" />
But that will only help if with the media picker data type, not mntp. It shouldnt' be that difficult, should it?
I can get the images to load if I rebuild the internal search index, but they're gone again on subsequent refreshes.
I've seen others having similar problems, and would really appreciate a solution...
ta
Nathan
This looks like a bug that was fixed in 4.7.2. See the following codeplex item:
http://umbraco.codeplex.com/workitem/30778