2017 Januar

Typesetter CMS: Create a reusable object, structured with page manager

Let’s say you want to add a „call to action“-section beyond the content which is usable inside the template.

  1. Create a regular page holding your contents
  2. Create a new extra content block (/admin/extra), choose type „file include“. (You will notice, that the edit link is disabled inside the backend, ignore this)
  3. Possibility 1: Use Layout Manager
    1. Jump back to your frontend, klick „Layout“ at the top right
    2. Hover the region you wish to include your created extra block, click insert and choose your block
    3. Click save and click abort when finished
  4. Possibility 2: Insert your extra block directly inside your template
    1. Insert the following code to your template: <?php gpOutput::Get(‚Extra‘,’Technical_section_name‘); ?> (the technical section name is the name you choosed with underscores instead of spaces, but still case sensitive!)
    2. Save and reload your page
  5. Now hover the new appeard block (which will show something like „Insert File“ per default), click the edit link and choose the page you created in step 1

The gerat thing about this is: the configuration of this extra is stored globaly and not per page, you have to set it just once and you can reuse it easily. You have it available to print it out inside your Template, or using a simple include section type with the page manager.

    Smart Sticky Sidebar via hcSticky

    If you ever need to have a sticky sidebar, which has a variable height, which is working well with a footer region, without having a second scrollbar … try https://github.com/somewebmedia/hc-sticky

    Trying to build this with waypoint.js or something, is pain in the ass. This great library finished the job in < 5 minutes.

      Smooth scrolling anchor links and hash url’s – also base tag fix

      This solution is also very usefull on pages with -Tag. Sometimes the basetag will make anchor links not working properly anymore (redirecting to the base url).

      $(document).ready(function () {
  // Anchor links on click based on Chris Coyier's solution: https://css-tricks.com/snippets/jquery/smooth-scrolling/
  $('a[href^="#"]:not([href="#"])').click(function(e) {
    if (location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top - 80 + 'px'
        }, 1000);
        return false;
      }
    }
  });

});

// Smooth scrolling anchor links
// to top right away
if (window.location.hash)
  scroll(0, 0);
// void some browsers issue
setTimeout(function () {
  scroll(0, 0);
}, 1);

$(function () {
  // *only* if we have anchor on the url
  $( window ).load(function() {
    if (window.location.hash && $(window.location.hash).length > 0) {
      // smooth scroll to the anchor id
      $('html,body').animate({
        scrollTop: $(window.location.hash).offset().top - 80 + 'px'
      }, 1000, 'swing');
    }
  });

});