Pages

Wrap content type with typoscript

Sometimes is need to remove the default typo3 class such as csc-default class and add another class.
But why to do ? Why not just to style that class? Well the reason is simple,because maybe you need to have different style definition on different pages.Just by using the script below you will be able to handle this behavior.
Script :
### removing the actual class: csc-default

tt_content.stdWrap.innerWrap >

### wrapping the content with our div

tt_content{
stdWrap {
  innerWrap = <div class="our class">|</div>
 }
}

How to customize page title with typoscript

The page title is one of the more important factor for Google search engine to crawler your site.Typo3 allows you to add your page title in the backend and stores that on the database.But you are flexible if you want to show it in different way.For example if you would like to add your company name after it.

COMPANY NAME - About Us

So how can you manage to edit it directly with typoscript ?? It's simple,you just need to configure you headerData Object:

# Remove the page title
config.noPageTitle =1
page = PAGE
page {
# Set a new title tag in headerData
headerData {
       10 = TEXT
       10 {
            field = title
            data = page:title
            wrap = <title>COMPANY NAME - | </title>
          }
  }
So this is all what you need to do to customize your typo3 page title

What is Typo3?

"TYPO3 is a free and open source content management system as well as a Model–view–controller (MVC) Web Application Development..."
This is the definition  according to wikipedia.
Typo3 is the most complete cms under the web today,it is well structured and is a modular system.
It has been desing to be flexible and to handle multilanguages,multiuser,group of user and all the other stuff that can be handle by any other cms.
Typo3 is flexible on changing layouts like every other cms but what makes typo3 a good cms in my oppinion is not the main feutures that it has but also the configuration script that they used to configure the system called "TYPOSCRIPT" which handles everything for the system and makes this systems so elegant and engenius.
Sure typo3 is not a simple cms from the point of view of the newbie programmers that handle that from the begging but after you have learned it that it will become a good weapon in your handle for the web development process.
From the point of view of the users it is very intuitive to handle it since the pagetree makes this easier than joomla and other cms systems.

Typoscript : Wrap content elemtents with social plugins

Producing websites today makes neccesary sharing your content throw different social networks to have more traffic flow to your website and share your thought with the world.


Typo3 has very flexible ways to handle that and to configure your content elements.
First thing that you should do is going on different social networks and get your code to share your articles.
For example I will do that for facebook,google+ and twitter but I am sure you can do that for every social networks that allow it.
These are the links to go to get your share code :
From the facebook you will get to codes one of them is a javascript that you can add directly in the layout of your template directly after the body tag:
Like This:
###BODY_PART###
<div id="fb-root"></div>
<script>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk')); 
</script>
...........................................................................................................................
 The same behavior is also for the G+ and Twitter,so finally you will have something like this:

###BODY_PART###
<div id="fb-root"></div>
<script type='text/javascript'>

// facebook script

(function(d, s, id) 

{
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));


// twitter script

!function(d,s,id){

var js,fjs=d.getElementsByTagName(s)[0];

if(!d.getElementById(id)){
 js=d.createElement(s);
 js.id=id;
 js.src="//platform.twitter.com/widgets.js";
 fjs.parentNode.insertBefore(js,fjs);
}}
(document,"script","twitter-wjs");

// google+ script

(function() {
 var po = document.createElement('script'); 
 po.type = 'text/javascript'; 
 po.async = true;
 po.src = 'https://apis.google.com/js/plusone.js';
 var s = document.getElementsByTagName('script')[0]; 
 s.parentNode.insertBefore(po, s);
})();

</script>
........................................ After you have finished with your layout file then is the time to make the configuration in your Template Configuration adding this code :
tt_content.textpic.stdWrap.dataWrap (
 | 
<div id='socials'>
<div class="fb-like" 
data-href="http://domain.com/index.php?id={ field:uid }" 
data-send="false" data-layout="button_count" data-width="40" 
data-show-faces="false" data-font="arial"></div>
<a href="https://twitter.com/share" 
class="twitter-share-button"  
data-url="http://domain.com/index.php?id={ field:uid }">Tweet</a>
<g:plusone size="medium" 
href="http://domain.com/index.php?id={ field:uid }"> 
</g:plusone>
</div>
)
 The reason why I have used the data wrap is because that way I can use typoscript in that to get the id of the content element.

Adding Metatags (SEO optimization)

Typo3 offer a simple way to support  SEO optimization.This way is quit simple all what you have to do is to switch to the page propertymode from the backend and fill the areas in the metadata tab. This is just for adding you tags,but for display them you should add the following code to your typoscript code:

 page{ 
    meta{ 
      description = This website is all about Typo3! 
      keywords = typoscript metatags,seo optimization,metadata 
     }
   }

This is one way,there is also another way to do that,with the .headerData property :

 page = PAGE
 page.headerData{
  10 = TEXT
  10.value =<meta name='keywords' content='some content here'/>
  20 = TEXT
  20.value =<meta name='description' content='some content here'/>
 }

These ways you should go get a better rank on search engines..

How to modify header information with typoscript

Some times is useful  to add your css or your js costum code to the header of the template.So the main question here is how that should be done with typoscript? Well that is less complacated that it seems...since typoscript have this configurations set in the PAGE object. So we can do that basically in two ways. adding it directly in the configuration of the PAGE object:
page = PAGE
page{
   stylesheet = path/to/your/style.css        // for the Css
   includeJs  = path/to/your/script.js        // for the Javascript
}
but this way is just if you want to add one stylesheet on the page,what if you need more than one?? Then you should do the second way for that :
page = PAGE
page.includeCss{ 
  file1 = path/to/your/style1.css
  file2 = path/to/your/style2.css
  file3 = path/to/your/stylen.css
}


also for the Javascript :
page = PAGE
page.includeJs {
  file1 = path/to/your/script1.js
  file2 = path/to/your/script2.js
  filen = path/to/your/scriptn.js
}
Sometimes is necessary to include an external file from another host,like google,yahoo etc. Javascript frameworks,fonts etc,are loaded faster when they are in another faster server. to do that with typoscript you should add the external property. It works this way :
  page = PAGE
  page.includeCss{

       file = url
       file.external = 1

    }


That way you can include as much files on page header html as you like,and they will appear automatically without doing extra programming.

Additing content on Typo3

Additing content ,creating pages,uploading images is very easy to do with typo3.It has a lot of such functionality that will make you conform managing you system with that, I can suggest you a lot of sites for that or you can keep a look on google.. but I think a good way to do that is by watching a video.so I will link some of the good videos on youtube about that After watching that I think you have created a basic Idee how that basically works,so now don't stay but keep a look on the main documentations site and the video tutorials site. After you have seen these tutorials you would be a good typo3 editor ;)