Posted on

Collapse-O-Matic and Easy Footnotes Test

This is a test of how collapse-o-matic and easy footnotes can work togher. We have modified the Easy Footnotes1 plugin to allow for filtering before and after the footnote content. The modified plugin is available at Github 2

The filters used as follows:


add_filter( 'before_footnote', 'pre_footnote', 1);
function pre_footnote($footnote_content) {
	$footnote_content .= 'content to place before the footnotes';
	return $footnote_content;
}

add_filter( 'after_footnote', 'post_footnote', 1 );
function post_footnote($footnote_content) {
	$footnote_content .= 'content to place after the footnoes';
	return $footnote_content;
}


    Posted on

    Print-Pro-Matic Placeholder Attribute

    The placeholder attribute is used to add the print-me data to the page when print trigger and target will be added dynamically, for example: via AJAX or a Modal Window.

    [print-me target="#print_me" placeholder="true"/]

    This will not add the trigger to the page, just the targeting info for when the trigger is later displayed.

    Posted on

    collapse-o-matic with inline link

    This is an example of a collapse element with an inline link.

    [expand title="this is a test with a <a href='https://plugins.twinpictures.de'>link</a>"]here is some hidden content[/expand]

    the key is to use double quotes to wrap the title attribute and single quotes for the html inside the double quotes.

    this is a test with a link
    here is some hidden content

    Posted on

    Collapse-Pro-Matic External Link with Find-Me Scrolling

    This is a test Collapse-Pro-Matic’s ability to use external triggers to auto expand and scroll to other expands on the same page.
    First we need quite a bit of text. Here is some from the Wiki entry for Star Wars:

    Star Wars

    Star Wars is an American epic space opera media franchise, centered on a film series created by George Lucas. It depicts the adventures of characters “a long time ago in a galaxy far, far away”.

    The franchise began in 1977 with the release of the film Star Wars (later subtitled Episode IV: A New Hope in 1981[2][3]), which became a worldwide pop culture phenomenon. It was followed by the successful sequels The Empire Strikes Back (1980) and Return of the Jedi (1983); these three films constitute the original Star Wars trilogy. A prequel trilogy was released between 1999 and 2005, which received mixed reactions from both critics and fans. A sequel trilogy began in 2015 with the release of Star Wars: The Force Awakens and continued with the release of Star Wars: The Last Jedi (2017). The first eight films were nominated for Academy Awards (with wins going to the first two films released) and have been commercial successes, with a combined box office revenue of over US$8.5 billion,[4] making Star Wars the second highest-grossing film series.[5] Spin-off cinematic films include Rogue One (2016) and Solo: A Star Wars Story (2018).

    Now we place a little expand element for R2D2 that we will reference below:

    [expand title="R2D2" id="droid2d2"]...[/expand]

    R2D2
    R2-D2 (/ˌɑːrtuːˈdiːtuː/), or Artoo-Detoo[citation needed], is a fictional robot character in the Star Wars franchise created by George Lucas. A small astromech droid, R2-D2 is a major character and appears in nine out of the ten Star Wars films to date. Throughout the course of the films, R2 is a friend to Padmé Amidala, Anakin Skywalker, Leia Organa, Luke Skywalker, and Obi-Wan Kenobi in various points in the saga.
    English actor Kenny Baker played R2-D2 in all three original Star Wars films, and received billing credit for the character in the prequel trilogy, where Baker’s role was reduced, as R2-D2 was portrayed mainly by radio controlled props and CGI models. In the sequel trilogy, Baker was credited as consultant for The Force Awakens; however, Jimmy Vee also co-performed the character in some scenes. Vee later took over the role beginning in The Last Jedi.[1] R2-D2’s sounds and vocal effects were created by Ben Burtt. R2-D2 was designed in artwork by Ralph McQuarrie, co-developed by John Stears and built by Tony Dyson.

    Now we have another expand element with a link to R2D2 above using:

    <a class="expandanchor" href="#droid2d2">R2-D2</a>

    Astromech droid
    An astromech droid is one of a series of “versatile utility robots generally used for the maintenance and repair of starships and related technology”. These small droids usually possess “a variety of tool-tipped appendages that are stowed in recessed compartments”. R2-D2 is an astromech droid introduced in 1977’s Star Wars and featured in all subsequent films.[14] The malfunctioning droid R5-D4 also makes a brief appearance in Star Wars.[15] U9-C4 is a timid droid sent on a mission with D-Squad, an all-droid special unit in Star Wars: The Clone Wars,[16] C1-10P is an oft-repaired, “outmoded” astromech who is one of the Star Wars Rebels regular characters,[17] and BB-8 is the astromech droid of X-wing fighter pilot Poe Dameron in The Force Awakens.

    Posted on

    Custom Print Templates for Print-Pro-Matic

    Note: This post assumes a basic understanding of WordPress templates and that a child-theme is being used.

    To create a custom print template we first need to define a query var to trigger the template.
    Add the following to the child-theme’s function.php file:

    function printpromatic_query_var( $vars ) {
	$vars[] = 'print_view';
	return $vars;
}
add_filter( 'query_vars', 'printpromatic_query_var' );

    Now WordPress will look for something like /?print_view=true at the end of any url.

    Next step is to tell print-pro-matic to use the current page with the print_view query variable tacked on the back as the target url. Simply set the url attribute using the %print_view% placeholder as its value:

    [print-me url="%print_view%"/]

    Finally we need to check for this print_view query var and either a) use a custom print-only template file or b) modify the current page template to switch to a print-only view.

    Redirect to Print-Only Template

    If a print-only template exists simply redirect to this template file by adding the following code to the child-theme’s function.php file:

    function printpromatic_print_template($original_template) {
    if ( get_query_var( 'print_view' ) ) {
		$new_template = locate_template( array( 'print-template.php' ) );
        return $new_template;
    }
	return $original_template;
}
add_filter( 'template_include', 'printpromatic_print_template' );

    Modify the Existing Template

    This method involves modifying the current page template to change what it displays based on the presence of the print_view query var.

    In the page template being used, we need to check if the query_var is present:

    $print_view = get_query_var( 'print_view' );

    Now we need to simply wrap the existing template elements in an if statement:

    //normal
if( empty($print_view) ){
   ...
}
//print only
else{
   ...
}
    Posted on

    Archive-Pro-Matic Display Multiple Categories

    As of version 1.1.2, multiple categories can be selected using the cat_id attribute. Simply provide a comma separated string of the category ID’s to include. Use a negative ID to omit multiple categories.

    For example to include a yearly archive of posts with both the categories of ‘Archive-Pro-Matic’ (ID 55) and ‘collapse-pro-matic’ (ID 43) the shortcode would be:

    [archives type="yearly" cat_id="55,43"]

    Note: Currently the title of the archive page will display only the first category. A solution to display multiple titles is in the works. Multiple category titles will now display on the archive page.

    Posted on

    Countdown Test – Local Computer Time

    This is a test of a countdown that will launch at a specific time.
    The time should not affected on the visitors local computer time.

    Days
    -
    7
    5
    Hours
    -
    2
    Minutes
    -
    3
    Seconds
    -
    2

    2001_Space_Odysey

    Posted on

    Collapse-Pro-Matic Spacing

    monkey
    this is a monkey

    This is some text

    Here is a headline

    100-1 First thing
    100-2 Second Thing
    more
    a. First Sub thing
    b. Second sub thing
    100-3 Third Thing
    100-4 Forth Thing
    100-5 Fifth Thing
    more
    I am bold.
    Some info:
    Here is some info that explains more about thing five.
    100-6 Sixth Thing
    100-7 Seventh Thing

    Numbered List Items

    <ul class="numbers">
    <li data-pos="2">one</li>
    <li data-pos="2">two
        <ul>
            <li data-pos="2">two.one</li>
            <li data-pos="2">two.two</li>
            <li data-pos="2">two.three</li>
        </ul>
    </li>
</ul>
      • one

     

      • two

         

          • two.one

         

          • two.two

         

          • two.three

         

         

     

      • three

         

          • three.one

         

          • three.two

             

              • three.two.one – this is a much longer piece of text that will wrap around and should display how the padding and offset of the numbering works with a longer text.

             

              • three.two.two

             

             

         

         

     

    • four

    CSS:

    ul.numbers {
    counter-reset: levelone;
    list-style: none;
}

ul.numbers > li {
    counter-increment: levelone;
}

ul.numbers > li[data-pos]:before {
    content: attr(data-pos) "." counters(levelone, ".") ". ";
}

ul.numbers ul {
    counter-reset: leveltwo;
    list-style: none;
}

ul.numbers ul > li {
    counter-increment: leveltwo;
}

ul.numbers ul > li[data-pos]:before {
    content: attr(data-pos) "." counters(levelone, ".") "." counters(leveltwo, ".") ". ";
}

ul.numbers ul ul {
    counter-reset: levelthree;
    list-style: none;
}

ul.numbers ul ul > li {
    counter-increment: levelthree;
}

ul.numbers ul ul > li[data-pos]:before {
    content: attr(data-pos) "." counters(levelone, ".") "." counters(leveltwo, ".") "." counters(levelthree, ".") ". ";
}