Archive-Pro-Matic – Quarterly and Seasonal Archives

Archive-Pro-Matic has two new archive types (Quarterly and Seasonally) and a couple new advanced shortcode attributes to manage seperators (sep) and sub options as described below:

Quarterly Archives

Example of the new quarterly archive type:

[archives type="quarterly" limit="10" /]

Seasonal Archives

Seasonal archives are a bit more complex. First the plugin is currently limited to only four (4) seasons per year. The season names and starting dates can be defined in the plugin options as shown in the following screanshot:

Season names and dates are easily defined. Only the month and day is used, the year is ignored.

Simple example of seasonal archives:

[archives type="seasonally" limit="10" /]

New Attribute: sub_options

Setting sub_options to ‘true’ for quarterly or seasonally archive types will present the year with the quarterly or seasonal archives below like so:

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

Of course this also works in a drop-down select element:

[archives type="seasonally" format="option" sub_options="true" limit="10" /]

However, when setting format=”option” the sub_options could use a little separation. Therefore we have created a new sep attribute:

New Attribute: sep

Same example as above, this time with some fancy sub_option separation, and highlight current season if on archive page:

[archives type="seasonally" format="option" sub_options="true" sep="— " highlight="active-season" limit="20" /]

Guttenberg Collapse-O-Matic Image Embed

This is a little test of how to embed an image in a guttenberg expand shortcode block. The issue this aims to resolved can be found here.

since there is not an easy way to ‘insert’ an image inside a shortcode, the raw html will have to be placed. First we insert an image in a normal Gutenberg block:

Then we need to grab the html for that image by editing the block as html. The source for the above image is:

<img src="https://spacedonkey.de/wp-content/uploads/2015/06/The-Big-Lebowski-the-big-lebowski-31504499-540-720.jpg" alt="" class="wp-image-2398"/>

So we paste that in the shortcode block… so all togher it looks like:

[expand title="click to view image"] <img src="https://spacedonkey.de/wp-content/uploads/2015/06/The-Big-Lebowski-the-big-lebowski-31504499-540-720.jpg" alt="" class="wp-image-2398"/> [/expand]

And here is an example of the whole shebang in action:

click to view image

Countdown Timer with Offset

This is a countdown timer that actually counts down to 15:15. However, it should display that it is actually counting down to 16:15. so an offset of + 1 hours.

So how is this done?
As of T(-) Countdown Control version 1.8.9 the target can be filtered with an offset by adding the following to the child-theme functions.php file:

add_filter( 'countdown_offset', 'my_offset', 10, 2 );
function my_offset( $id, $target_time ) {
if($id == '3411'){
$target_time = $target_time + (1 * 60 * 60);
}
return $target_time;
}

Expand/Collapse All Scroll To Current Section Test

This is a test using the ew expand_all and collapse_all callbacks to automatically scroll to the section currently being viewed. The issue is that when expand/collapse all is clicked, large amounts of content is suddenly added to–or removed from–the page. This new page length will often re-flow the page, causing the user to loose their place in the currently viewed content.

The Idea is to implement the following:
1. Create ‘section headers’ that will automatically update when the users scrolls past them.

<h2 id="section-1" class="section">Section Title</h2>


2. Add some javascript that will saved the currently viewed section id to a variable.

 jQuery(document).ready(function () {
        jQuery(document).on("scroll", onScroll);
        var currSection = null;
 });

function onScroll(event){
        var scrollPos = jQuery(document).scrollTop();
        jQuery('.section').each(function () {
            var currElement = jQuery(this);
            if (currElement.position().top <= scrollPos && currElement.position().top + currElement.height() > scrollPos) {
               currSection = currElement.attr("id");
            }
        });
    }

3. After expand/collapse/set all is triggered, all call back will be created that will scroll the page automatically to the section header that was last viewed.

if(typeof currSection !== 'undefined' && jQuery('#' + currSection).length ){
   setTimeout(function(){
      scrollTarget = jQuery('#' + currSection).offset().top;
      if(typeof colomatoffset !== 'undefined'){
         scrollTarget = scrollTarget + colomatoffset
      }
      jQuery('html, body').animate({scrollTop:scrollTarget});
   }, 700);
}

Demonstration:

Scroll down a bit and then click the Expand All link placed in the header at the end of the menu. All ‘read more’ content should be expanded and then the page should scroll back to the section that was being viewed. The effect is more dramatic the further down the page is scrolled.

Section 1: Aaeton

Aaeton was a planet of the Aaeton system, in the Core Worlds region. During the Cold War between the Galactic Republic and the Sith Empire, an Imperial bioweapon activated on the planet. During the last days of the Republic, the government of Aaeton had authorization to allow its citizens to visit the generally off-limits neighboring world of Ragoon VI.

more
I’m from the planet Aaeton, only half-day’s journey from here. Young people from my planet often go on survival camping trips on Ragoon-6 when we reach fourteen years of age. We have a special allowance from the Senate because we gave the elders of Ragoon refuge when they handed the planet over to the Senate.
―Floria

Section 2: Aaghra

Aaghra was the first planet from the star Zug in the Zug system of the galaxy’s Core Worlds region, not far from Coruscant,[1] the most politically important planet in galactic history.[2] It was a moonless world of molten rock.[1]

more
Aaghra was first mentioned briefly in part one of the Planet Hoppers article Aargau: For All Your Banking Needs, which was written by Cory J. Herndon and published on the Wizards.com website in 2003.[1]

Section 3: Aar

Aar was a planet[3] in the Aar system[1] of the Nijune sector,[2] part of the Outer Rim Territories.[1] It was homeworld to the Aar’aa species, reptilian sentients often employed as enforcers by the Hutts, a species known for its many crime lords.[3]

more
Aar was first mentioned in the 1997 novel The Paradise Snare, written by A. C. Crispin, and was also mentioned eleven years later in the 2008 The Complete Star Wars Encyclopedia.

Section 4: Aargau

Aargau (pronounced /är-‘gou/)[5] was a planet in the Zug system of the Core Worlds region, not far from Coruscant and the Corellian Run. It was run by and served as the headquarters for the Bank of Aargau, which was part of the InterGalactic Banking Clan. Numerous other banks and corporations were also based on Aargau, including the Z-Gomot Ternbuell Guppat Corporation. Aargau was an exceptionally wealthy world, due both to its status as a financial center, as well as the planet’s vast reserves of rare and precious metals.

more
Aargau was a member of the Galactic Republic from its discovery until the end of that galactic power. After the fall of the Galactic Empire, it was considered a New Republic stronghold. The region of space occupied by the planet would later fall under the hegemony of first the Galactic Federation of Free Alliances, and then subsequently Darth Krayt’s Galactic Empire. Despite this, Aargau took a neutral approach to politics, which meant that warring factions were mutually welcome to conduct business on the planet. The planetary government imposed only three laws on citizens and visitors, called the Three Statutes of Aargau. These laws focused on the export of Aargau’s natural resources, the absolute ban on weapons for visitors—and, conversely, the requirement to bear arms for Aargauuns—as well as maintaining the integrity of the Bank of Aargau. Breaking any of these rules was punishable by immediate execution.

Section 5: Aargonar

Aargonar was a dusty, desert-climate planet located in the Borderland Regions of the Mid Rim.

more
Aargonar was an insignificant desert world with few population.[2] The terrain was reminiscent of Tatooine for Jedi Knight Anakin Skywalker, with rock arches and stone spires dotting the once watery-planet.[3] The planet had several moons, including Aargonar 3.[2]

The planet was known to house numerous Sarlacc.[2] It was also home to Hrumphs and Gouka dragons.[3]


Peanuts Character 555 95472

555 95472, or 5 for short, debuted in the September 30, 1963, strip, and appeared occasionally until the 1980s. A boy close in age to Charlie Brown and Linus van Pelt, 5 had brown spiky hair, and he wore an orange shirt with the number 5 on it. 5 was given a numerical name by his father, who was upset over the preponderance of numbers in people’s lives; when questioned, 5 clarified that this was not his father’s way of protesting, it was his way of “giving in.” His last name, 95472 (the accent is on the 4), was taken from the family’s ZIP code; it is also the zip code for Sebastopol, California, where Schulz lived at the time.

"5"
“5”

T(-) Countdown Custom Styles

The following is the recommended method creating a completely new countdown style for both T(-) Countdown and T(-) Countdown Control. To demonstrate this, we are going to take an existing style (naboo) and use it as the base of a completely new style (womprat).

Step one, copy all of the css for naboo into the custom css section of the plugin’s option page and replace all instances of ‘naboo’ with our new style name, ‘womprat’:

.womprat-countdown {
background: #72aed3;
color: #fffff;
margin: 0 auto;
padding: 10px 0;
max-width: 360px;
text-align: center;
}

.womprat-countdown.omitweeks {
max-width: 295px;
}

.womprat-dashboard {
margin: 0 auto;
padding-bottom: 10px;
}

.womprat-tophtml, .womprat-bothtml {
margin: 0;
padding: 0;
font-family: "Gill Sans ", "Gill Sans MT", Calibri, sans-serif;
font-size: 16px;
text-align: center;
color: #ffffff;
}

.womprat-tophtml p, .womprat-bothtml p {
margin-bottom: 0;
}

.womprat-timer_icon {
display: none;
}

.womprat-dash, .womprat-tripdash {
display: inline-block;
padding: 5px;
margin-left: 10px;
height: 30px;
}

.womprat-digit {
display: inline-block;
float: left;
font-family: "Gill Sans ", "Gill Sans MT", Calibri, sans-serif;
font-weight: 100;
font-size: 42px;
line-height: 42px;
color: #ffffff;
}

.womprat-dash_title {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
font-size: 10px;
font-weight: 100;
color: #ffffff;
position: absolute;
margin-top: 10px;
margin-left: -20px;
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
}

.womprat-minutes_dash .womprat-dash_title, .womprat-seconds_dash .womprat-dash_title {
margin-left: -25px;
}

Once the settings have been saved, the womprat style will be available in the T(-) Countdown widget style dropdown, and as a valid style attribute value using the shortcode.

Now, we can go ahead and adjust this base style to fit our needs.

Preventing CSS from being overwritten

There are two options to to prevent plugin updates from overwriting your custom css.

Database

Option one is to simply copy the custom CSS into the plugin’s Custom CSS area under Dashboard > Settings > T(-) Countdown. This way the custom CSS is saved in the database, and not in a file that will be overwritten during plugin updates.

Theme Stylesheet

Option two is to include the CSS into your theme’s style.css file, or better yet, into the style.css file of your child theme.

Wonky Submit & Print-O-Matic Button

This is a Dr. Frankenstein experiment with Contact Form 7’s Submit button and the Print-O-Matic Print button. In theory, when submitting this form, the form should also also force-launch the print dialogue. Years of working in UI tells us NOT do this, but hey, people still have music playing on page load, so what do we know.

[contact-form-7 id="1018" title="SubPrint"/]

To cross-breed the Submit button with the print-o-matic print trigger, use the roll-your-own method as follows:

  1. create a cf7 submit/print button by assigning it a unique ID (in this case subprint) and a class of printomatic.
    [submit id:subprint class:printomatic]

  2. manually insert a hidden input that has the ID of “target-” and a value of the target you wish to print.
    <input type="hidden" id="target-subprint" value=".wpcf7-form" />

  3. be sure the ‘Shortcode Loads Scripts’ checkbox is NOT checked in the plugins options page.

Update: This is no longer supported in the current version of print-o-matic. Here is how to implement this solution with print-pro-matic.

Strange hasClass Issue

Trigger Text
Target Content

Trigger Text
Target Content

Trigger Text
Target Content

Trigger Text
Target Content

Trigger Text
Target Content

Trigger Text
Target Content

On

Open
Target Content