Custom Markers

Custom Marker TypoScript

Here is the basic TypoScript that you need to add custom markers. The are different arrays in the TypoScript for different record types:

plugin.tx_sbportfolio_pi1 {
  customMarkers {
    # Item Display Modes
    items {
    }

    # Category Display Modes
    categories {
    }
        
    # Client Display Modes
    clients {
    }
        
    # Related News
    news {
    }
        
    # Record Gallery & 
    # Record Gallery Grid Display Modes 
    records {
    }
        
    # Testimonials Display Mode and
    # and testimonial markers for 
    # item/client records
    testimonials {
    }
  }
}

You can also create content for specific display modes. You just create and array within the relevant record array, with the same name as the display modes TypoScript array (these can be found by using the Object Browser or by looking at the default TypoScript text file that comes with sb_portfolio):

plugin.tx_sbportfolio_pi1 {
  customMarkers {
    # Item Display Modes
    items {
      # Markers just for Single display mode
      displaySingle {
      }
    }
        
    # Related News
    news {
      # NB: There are no display modes for news 
      # that you can add here
    }
        
    # Testimonials Display Mode
    # and testimonials for each client/item
    testimonials {
      # Markers just for the Testimonials 
      # display mode
      displayTestimonials {
      }
    }
  }
} 

Marker names in TypoScript should be written in lowercase, and have no special characters apart from - and _. The markers that you add to your HTML template should be the same but in uppercase.

A basic marker

Here is a basic marker that adds text to all item display modes:

plugin.tx_sbportfolio_pi1 {
  customMarkers {
    items {
      basic_marker = TEXT
       basic_marker {
         value = Your new content
        wrap = <p>|</p>
      }
    }
  }
}

In your item templates you just add the following marker to the item templates (either in the subparts or outside of them) to see the result: ###BASIC_MARKER###.

Easy eh? Now lets make something more useful. It would be quite nice in List display mode to display some text if the item is a featured item. Here's how you do  it:

plugin.tx_sbportfolio_pi1 {
  customMarkers {
    items {
      displayList {
        featured_item = TEXT
        featured_item {
          doNotCache = 1

          value = Featured!
          wrap = <p>|</p>

           if {
            value.field = featured
            equals = 0
            negate = 1
          }
        }
      }
    }
  }
}

Just add the marker ###FEATURED_ITEM### to your List display mode HTML template (in the item subpart).

Caching of markers

Those of you familiar with TypoScript may have noticed in the above TS something strange: doNotCache = 1. You won't find this in the TSRef, this is a property just used by sb_portfolio for custom markers.

By default, sb_portfolio will store a copy of the generated marker in an internal variable and just reuse it next time the marker is processed instead of recreating the object. If however you are doing something dynamic that depends on a record's fields (like in the above featured_items marker) then you should add doNotCache = 1 to your marker's TS so that sb_portfolio knows it shouldn't cache the marker, but should instead recreate it for each record.

Over-riding markers for a specific display mode

You can over-ride markers for a specific display mode, just add a marker with the same name to a display mode:

plugin.tx_sbportfolio_pi1 {
  customMarkers {
    items {
      basic_marker = TEXT
       basic_marker {
         value = Your new content
        wrap = <p>|</p>
      }

      displayGrid {
        basic_marker = TEXT
         basic_marker {
           value = This is an item grid!
          wrap = <p>|</p>
        }
      }
    }
  }
}

The above TypoScript would replace ###BASIC_MARKER### in all item templates and subparts with with the text "Your new content", except if the display mode is Grid. In which case the marker would output the text "This is an item grid!".

Other examples

Adding social networking button: 

plugin.tx_sbportfolio_pi1 {
  customMarkers {
    items {
      # Add AddThis social networking buttons
      social_links = HTML
       social_links {
         value (
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e88cc735252cf59"></script>
<!-- AddThis Button END -->
)
      }
    }
  }
}

Using the page's fields in your markers

plugin.tx_sbportfolio_pi1 {
  customMarkers {
    items {
      page_title = TEXT
       page_title {
        data = TSFE:page|title
        wrap = <p>Page Title: |</p>
      }
    }
  }
}

Using the content element's fields in your markers (can only be done outside of record subparts):

plugin.tx_sbportfolio_pi1 {
  customMarkers {
    items {
      ce_header = TEXT
       ce_header {
         data = field:header
         wrap = <h1 class="ceHeader">|<h1>
      }
    }
  }
} 

Adding other extensions

plugin.tx_sbportfolio_pi1 {
  customMarkers {
    items {
      latest_news < plugin.tt_news
      latest_news {
        latestLimit = 2
        defaultCode = LATEST
  
        # When adding another plugin, the plugin must handle language translations.
      }
    }
  }
}

Adding an "All Categories" menu to the category browser (place the marker ###ALL_CATS### before the subpart marker, but inside the UL - assuming you use the default template.

plugin.tx_sbportfolio_pi1 {  
  categories {
    displayCategoryBrowser {
      all_cats = TEXT
      all_cats {
        value = All Categories
        # Change for different langauges like this (German):
        lang.de = Alle Kategorien
        wrap = <li class="portfolioCat allCatCategory cat0 even"><p class="catBrowserTitle">|</p></li>
        stdWrap {
          typolink {
             # Change n to the grid/list page id
            parameter.data = n
            useCacheHash = 1
            
            addQueryString = 1
            addQueryString.exclude = id,tx_sbportfolio_pi1
           
            title.cObject = TEXT
            title.cObject.value = View all items.
            # Change for different langauges like this (German):
            title.cObject.lang.de = Zeige alle Referenzen an.
          }
        }
      }
    }
  }
}

And then on the grid page, remove the link if their is no filtering

# On Grid page when there is no filtering of any kind
[globalVar = TSFE:id = n] && [globalVar = GP:tx_sbportfolio_pi1 <= 0]
# Remove link to all_cats
plugin.tx_sbportfolio_pi1.customMarkers.categories.displayCategoryBrowser.all_cats.stdWrap >

# Add "selected" to the class so that it can be styled like other selected links in the Category Browser
plugin.tx_sbportfolio_pi1.customMarkers.categories.displayCategoryBrowser.all_cats.wrap = <li class="portfolioCat allCatCategory selected cat0 even"><p class="catBrowserTitle">|</p></li>
[global]

This marker adds a "back to portfolio" link to the single item display (use the marker ###BACK_LINK### in your single template):

plugin.tx_sbportfolio_pi1 {
  customMarkers {
        # Item Display Modes
        items {
            displaySingle {
                back_link = TEXT
                back_link {
                    value = Back
                    
                    # Value when a language with the code de is selected in the FE
                    lang.de = Zurück
                    
                    wrap = <div class="portBackLink">|</div>
                    
                    stdWrap.typolink {
                        # Change this to your page id
                        # Can be a constant: parameter = {$portfolioGridPid}
                        parameter = 1
                        title.cObject = TEXT
                        title.cObject.value = Back to the portfolio
                        title.cObject.lang.de = Zurück zum Portfolio
                    }
                }
            }
        }
    }
}

The data array

Sometimes when creating markers it can be useful to see eactly what is contained in the data array. To do this just add stdWrap.debugData = 1 to your marker's TypoScript:

plugin.tx_sbportfolio_pi1 {
  customMarkers {
    items {
      ce_header = TEXT
       ce_header {
         data = field:header
         wrap = <h1 class="ceHeader">|<h1>
        
        # Debug the contents of the data array:
        stdWrap.debugData = 1
      }
    }
  }
}