Posts

Posted on

Print-O-Matic External Print Trigger – Target by Class

As of print-o-matic version 2.0.1 the ability to use class to target a print element in external print triggers has been added. Basically it works the same as using the data-print_target attribute but instead uses a unique classname in the format of printtarget-<target_id>.

Step 1

Create a target element. The element below is a div with an id of ‘my_print_target’:

<div id="my_print_target">This is the print target wrapped in a div with an element of 'my_print_target' as explained above</div>
This is the print target wrapped in a div with an element of ‘my_print_target’ as explained above

Step 2

Add an external trigger using the new class-trigger method. We’ll use a simple button like so:

<button id="my_print_button" class="printomatic printtarget-#my_print_target">Print Trigger</button>

Step 3

Like in the original example, we need to add the hidden print trigger using a print-me shortcode with the same id as our external trigger and a printstyle=”external” attribute: 

[print-me id="my_print_button" printstyle="external"/]
Posted on

Collapse-Pro-Matic Excerpt Adjustment

This is an example of a simple expand element with an excerpt:

[expand title="Trigger Text" excerpt="The excerpt"]Hidden Content[/expand]
Trigger Text
The excerpt
Hidden Content

The excerpt can be repositioned above the trigger by adding excerptpos=”above-trigger” like so:

[expand title="Trigger Text" excerpt="The excerpt" excerptpos="above-trigger"]Hidden Content[/expand]
The excerpt
Trigger Text
Hidden Content

The following CSS can be used to control the vertical spacing between the three components. So that we don’t adjust all expand elements, the first step is to provide a unique class for each component: 

[expand title="Trigger Text" excerpt="The excerpt" excerptpos="above-trigger" trigclass="skinny_trig" excerptclass="skinny_excerpt" targclass="skinny_targ" ]Hidden Content[/expand]

Now each can be controlled using the following css classes:

.skinny_trig {
    border: 1px dotted red;
}
.skinny_excerpt {
    border: 1px dotted green;
}
.skinny_targ {
    border: 1px dotted blue;
}

That results in borders around each:

to make things as compact as possible, we remove the following padding and margins:

.skinny_trig {
    /* border: 1px dotted red; */
    padding: 0 0 0 10px;
    line-height: .9;
}
.skinny_excerpt {
    /* border: 1px dotted green; */
    line-height: .8;
}
.skinny_targ {
    /* border: 1px dotted blue; */
    margin: 0;
    line-height: .8;
}

And the final results are:

The excerpt
Trigger Text
Hidden Content


Posted on

Archive-Pro-Matic Pretty URL Rewrite

The goal is to change an ugly archive url into a pretty url. For example here is a quarterly custom post type archive:

The links are in a format of:

https://spacedonkey.de/date/2012/?q=4&post_type=monkey

And they would look better with something like:

https://spacedonkey.de/monkey/2012/Q4

To accomplish this, first the Add rewrite rules must be checked on the Archive-Pro-Matic settings page:

After the CPT Rewrite Rules has been checked and saved. It might be necessary to flush the rewrite rules by simply navigating to:
Dashboard > Settings > Permalinks – do nothing, and re-save the permalink settings.

Second a custom url rewrite function must be added to the child-theme’s function.php file. This function uses a new filter that has been added to manually overwrite the url that archive-pro-matic uses:

add_filter('apm_archive_link', 'pretty_my_archive_url');
function pretty_my_archive_url($url){
    $url_args = explode('?', $url);
    if(!empty($url_args[1])){
       parse_str($url_args[1], $args);
       if(!empty($args['year']) && !empty($args['q'])){
          $url = $url_args[0].$args['year'].'/Q'.$args['q'].'/';
       }
    }
    return $url;
}

Now, when we display a quarterly archive for a custom post type, the urls are prettier:

[archives type="quarterly" post_type="donkey" /]

And here is a test of just using the standard yearly archive for a custom post type:

[archives post_type="donkey" /]
Posted on

Archive Pro Matic Exclude Single Cat

Test to see if a single category can be excluded from an archive list.

[archives type="monthly" cat_id="-51"/]
Posted on

Archive-Pro-Matic Monthly Sub Post-By-Post

This is a test of a monthly archive that displays a sub-list of post-by-post archives.

[archives type="postbypost" sub_options="true" limit="10"/]

Categories

Here are examples of limiting by category. First, using cat_id

[archives type="postbypost" sub_options="true" cat_id="55" limit="10"/]

Taxonomies

Next, Using taxonomy and term. This pair can be used for any taxonomy, including category:

[archives type="postbypost" sub_options="true" taxonomy="category" term="archive-pro-matic" limit="10"/]
Posted on

Print-Pro-Matic Optional No-Print

In this example, the option to include a specific element is provide by using a checkbox. This feature was introduced in Print-Pro-Matic version 2.0-beta-210121

The default print target will be the article element. The image of the donkey has been assigned a class of ‘logo’. Now we need to create our print trigger and a checkbox:

[print-me title="Print Trigger"/]

<label><input type="checkbox" id="ppm_odnp" value=".logo">Donkey Free Print</label>

The checkbox must have an ID of ppm_odnp (because print-pro-matic optional do not print is a bit long). The value is the optional do not print selector, so .logo is for items with a class of ‘logo’, while #logo is an item with an id of ‘logo’.

Here is a working demonstration.

Print Trigger
Posted on

Archive-Pro-Matic Birthmonth Grid

Normally archives will be shown in a unordered list (ul) element:

[archives type="birthmonth" order="ASC" /]

However, this (or any) unordered list can be formatted using css. Here is an example of how to turn the list in to a grid using the CSS columns attribute:

First, we define a UL class that we can later assign:

ul.grid {
    list-style: none;
    columns: 4;
}

Now we just need to assign this class to our list:


[archives type="birthmonth" order="ASC" class="grid" /]