Month: May
March 2023
August 2023

Posted on

Collapse-Pro-Matic – Hide all other triggers

Client request: When one trigger is selected, hide all other triggers.
Well, let’s see. We can easily set up a highlander group, this will automatically collapse all other elements:

[expand title="Item 1" togglegroup="item-highlander"]Target Content[/expand]
[expand title="Item 2" togglegroup="item-highlander"]Target Content[/expand]
[expand title="Item 3" togglegroup="item-highlander"]Target Content[/expand]
Item 1
Target Content
Item 2
Target Content
Item 3
Target Content

Now, according to the highlander class feature, we can control the closed items CSS:

.item-highlander_closed { 
    display: none;
}
Posted on

Archive-Pro-Matic Advanced Category Archives

Building on the new block-style archive described in the last post, we now try with categories:

All Categories:

[archives type="monthly" taxonomy="category" sub_options="block" tag="div" sub_ul_class="my_slim_ul" li_class="block_archive_item" limit="10"/]

Single Category

[archives type="monthly" taxonomy="category" term="archive-pro-matic" sub_options="block" tag="div" sub_ul_class="my_slim_ul" li_class="block_archive_item" limit="10"/]

or use the cat attribute:

[archives type="monthly" cat="special1-posts" sub_options="block" tag="div" sub_ul_class="my_slim_ul" li_class="block_archive_item" limit="10"/]

or use the category attribute (alias for cat):

[archives type="monthly" category="special1-posts" sub_options="block" tag="div" sub_ul_class="my_slim_ul" li_class="block_archive_item" limit="10"/]

Multiple Categories

For an archive of multiple categories, the cat_id attribute must be used:

[archives type="monthly" cat_id="55,43" sub_options="block" tag="div" sub_ul_class="my_slim_ul" li_class="block_archive_item" limit="10"/]
Posted on

Archive-Pro-Matic – Advanced Monthly Sub Archives

This is a test to create a category archive in the following format:

  • 2023
  • Jan
  • Feb
  • Mar
  • Apr
  • May
  • Jun
  • Jul
  • Aug
  • Sep
  • Oct
  • Nov
  • Dec
  • 2021
  • Jan
  • Feb
  • Mar
  • Apr
  • May
  • Jun
  • Jul
  • Aug
  • Sep
  • Oct
  • Nov
  • Dec


Step one: allow the sub_options attribute to work with standard monthly archives.

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

Step two: add new feature to allow sub_options to be sorted ASC (1 – 12) or DESC (default: 12 – 1). New attribute: sub_order

[archives type="monthly" sub_options="true" sub_order="ASC" limit="10" /]


Step three: add the ability show empty months as placeholders. New attribute: show_empty

[archives type="monthly" sub_options="true" show_empty="true" limit="10" /]

Step four: allow month date to be formatted: January becomes Jan. New attribute: month_format just use the date_format attribute

[archives type="monthly" sub_options="true" month_format="M" sub_order="ASC" show_empty="true" limit="10" /]

Step five: test that this works with category filters. Here we use cat_id to only show archives for category id 55:

[archives type="monthly" cat_id="55" sub_options="true" sub_order="ASC" show_empty="true" limit="10" month_format="M"/]

A single category archive can be shown using the category slug with the cat attribute:

[archives type="monthly" cat="collapse-pro-matic" sub_options="true" sub_order="ASC" show_empty="true" month_format="m" limit="10" /]

Step six: adjust format so year and months are displayed in a single line. The following attributes have been added to add classnames to the archive elements for styling:

  • class – classname for the archive element
  • li_class – classname for a LI element
  • sub_ul_class – classname for a sub ul element
  • sub_li_class – classname for a sub LI element
  • empty_class – classname for an empty LI element

To test this we first need to define some simple classes:

.my_clean_achive {
   border: 1px dotted black;
}
.my_sub_achive {
   border: 1px dotted red;
}
.red a {
   color: red;
   font-weight: bold;
}
.green a {
   color: green;
}
.grey {
   color: #999999;
}

Now we just need to assign the classes to the archive elements:

[archives type="monthly" cat="collapse-pro-matic" sub_options="true" sub_order="ASC" show_empty="true" month_format="M" limit="10" class="my_clean_achive" sub_ul_class="my_sub_achive" li_class="red" sub_li_class="green" empty_class="grey"/]

Now that we can control the CSS of every element we can finally create a block style archive using the following css:

.block_archive_item {
    display:inline;
    margin-left: 5px;
    white-space: nowrap;
}
.block_archive_item a {
   color: red;
}

[archives type="monthly" cat="collapse-pro-matic" sub_options="true" sub_order="ASC" show_empty="true" month_format="M" limit="10" li_class="block_archive_item" empty_class="grey"/]

Nearly there:

  • 2023
    • Jan
    • Feb
    • Mar
    • Apr
    • May
    • Jun
    • Jul
    • Aug
    • Sep
    • Oct
    • Nov
    • Dec
  • 2021
    • Jan
    • Feb
    • Mar
    • Apr
    • May
    • Jun
    • Jul
    • Aug
    • Sep
    • Oct
    • Nov
    • Dec
  • 2020
  • 2018
  • 2017
    • Jan
    • Feb
    • Mar
    • Apr
    • May
    • Jun
    • Jul
    • Aug
    • Sep
    • Oct
    • Nov
    • Dec
    •

    Now if we do not want the sub_options (months in this case) to be in a separate element (ul) we need a way let the system know: new accepted value ‘block’ for the sub_options attribute: sub_options=”block”. 

    [archives type="monthly" sub_options="block" limit="10" /]

    We also no longer need to wrap the entire archive in a UL element, so we use tag=”div”. Finally we need to assign a sub_ul_class to slim down the sub_ul elements:

    .my_slim_ul {
   margin: 0;
}

[archives type="monthly" cat="collapse-pro-matic" sub_options="block" sub_order="ASC" show_empty="true" date_format="M" limit="10" 
tag="div" sub_ul_class="my_slim_ul" li_class="block_archive_item" empty_class="grey"/]

    The final result:

    • 2023
    • January
    • February
    • March
    • April
    • May
    • June
    • July
    • August
    • September
    • October
    • November
    • December
    • 2021
    • January
    • February
    • March
    • April
    • May
    • June
    • July
    • August
    • September
    • October
    • Nov
    • December
    • 2020
    • January
    • February
    • Mar
    • April
    • May
    • June
    • July
    • Aug
    • September
    • October
    • November
    • December
    • 2018
    • Jan
    • February
    • March
    • April
    • May
    • June
    • Jul
    • Aug
    • September
    • October
    • November
    • December
    • 2013
    • Jan
    • February
    • March
    • Apr
    • May
    • June
    • July
    • August
    • September
    • October
    • Nov
    • December
    • 2012
    • January
    • February
    • March
    • April
    • May
    • June
    • July
    • August
    • Sep
    • October
    • November
    • Dec

    Done!

    Here is a test using the new link_atts attribute:

    [archives type="monthly" cat="collapse-pro-matic" sub_options="block" sub_order="ASC" show_empty="true" date_format="M" limit="10" 
tag="div" sub_ul_class="my_slim_ul" li_class="block_archive_item" empty_class="grey" link_atts="target='_blank'"/]
    • 2023
    • January
    • February
    • March
    • April
    • May
    • June
    • July
    • August
    • September
    • October
    • November
    • December
    • 2021
    • January
    • February
    • March
    • April
    • May
    • June
    • July
    • August
    • September
    • October
    • Nov
    • December
    • 2020
    • January
    • February
    • Mar
    • April
    • May
    • June
    • July
    • Aug
    • September
    • October
    • November
    • December
    • 2018
    • Jan
    • February
    • March
    • April
    • May
    • June
    • Jul
    • Aug
    • September
    • October
    • November
    • December
    • 2013
    • Jan
    • February
    • March
    • Apr
    • May
    • June
    • July
    • August
    • September
    • October
    • Nov
    • December
    • 2012
    • January
    • February
    • March
    • April
    • May
    • June
    • July
    • August
    • Sep
    • October
    • November
    • Dec
    Posted on

    Grouping with Rel vs Togglegroup Attbitues

    Rel Attribute

    Here is an example of using the rel attribute. Notice how selecting a member of one group will auto-collapse members of all other groups.

    [expand title="Star Wars" rel="fiction" swaptitle="Not Star Trek"]Target Content[/expand]
[expand title="Star Trek" rel="fiction"]Target Content[/expand]
[expand title="Battlestar Galactica" rel="fiction"]Target Content[/expand]
[expand title="Space Race" rel="history"]Target Content[/expand]
[expand title="Ansari X Prize" rel="history"]Target Content[/expand]
    Star Wars
    Target Content
    Star Trek
    Target Content
    Battlestar Galactica
    Target Content
    Space Race
    Target Content
    Ansari X Prize
    Target Content

    Togglegroup Attribute

    Here is an example using the togglegroup attribute. Members of multiple togglegroups may be open at the same time.

    [expand title="Star Wars" togglegroup="togfiction"]Target Content[/expand]
[expand title="Star Trek" togglegroup="togfiction"]Target Content[/expand]
[expand title="Battlestar Galactica" togglegroup="togfiction"]Target Content[/expand]
[expand title="Space Race" togglegroup="toghistory"]Target Content[/expand]
[expand title="Ansari X Prize" togglegroup="toghistory"]Target Content[/expand]
    Star Wars
    Target Content
    Star Trek
    Target Content
    Battlestar Galactica
    Target Content
    Space Race
    Target Content
    Ansari X Prize
    Target Content

    Rel Highlander Grouping

    Here is an example using the rel attribute with highlander grouping:

    [expand title="Star Wars" rel="fiction-highlander" swaptitle="Not Star Trek"]Target Content[/expand]
[expand title="Star Trek" rel="fiction-highlander"]Target Content[/expand]
[expand title="Battlestar Galactica" rel="fiction-highlander"]Target Content[/expand]
[expand title="Space Race" rel="history-highlander"]Target Content[/expand]
[expand title="Ansari X Prize" rel="history-highlander"]Target Content[/expand]
    Star Wars
    Target Content
    Star Trek
    Target Content
    Battlestar Galactica
    Target Content
    Space Race
    Target Content
    Ansari X Prize
    Target Content

    Highlander Grouping using Togglegroup Attribute

    [expand title="Monkeys" togglegroup="animal-highlander"]Target Content[/expand]
[expand title="Donkeys" togglegroup="animal-highlander"]Target Content[/expand]
[expand title="Tigers" togglegroup="animal-highlander"]Target Content[/expand]
[expand title="Bears" togglegroup="animal-highlander"]Target Content[/expand]
[expand title="Porsche" togglegroup="car-highlander"]Target Content[/expand]
[expand title="Volvo" togglegroup="car-highlander"]Target Content[/expand]
[expand title="Mercedes" togglegroup="car-highlander"]Target Content[/expand]
    Monkeys
    Target Content
    Donkeys
    Target Content
    Tigers
    Target Content
    Bears
    Target Content
    Porsche
    Target Content
    Volvo
    Target Content
    Mercedes
    Target Content

    Group Attribute

    This is a test of the group attribute which is being considered to replace rel, will be used as an alias for now:

    [expand title="Star Wars" group="gfic" swaptitle="Not Star Trek"]Target Content[/expand]
[expand title="Star Trek" group="gfic"]Target Content[/expand]
[expand title="Battlestar Galactica" group="gfic"]Target Content[/expand]
[expand title="Space Race" group="ghis"]Target Content[/expand]
[expand title="Ansari X Prize" group="ghis"]Target Content[/expand]
    Star Wars
    Target Content
    Star Trek
    Target Content
    Battlestar Galactica
    Target Content
    Space Race
    Target Content
    Ansari X Prize
    Target Content

    Quick test to make to see if our ‘number’ issue has been fixed:

    [expand title="123" rel="123"]this is a number group[/expand]
[expand title="456" rel="456"]this is also a number group[/expand]
    123
    this is a number group
    456
    this is also a number group
    Posted on

    Collapse Pro Matic – Adding 2nd Trigger in Excerpt

    Collapse-Pro-Matic version 1.3.15 introduces a couple new features dealing with secondary triggers and excerpt filtering. The following demonstrates the new features by using a filter to add a second trigger with it’s own swaptitle to all excerpts.

    The following code, when placed in the child-theme’s function.php file, will add an extra ‘…read more’ trigger to the end of all excerpts. The data-swaptitle attribute defines the swaptitle for this extra trigger.

     add_filter( 'colomat_excerpt', 'my_excerpt', 10, 2 );
 function my_excerpt( $id, $excerpt ) {
     $excerpt .= ' <span class="collapseomatic" id="extra1-'.$id.'" data-swaptitle=" ...read less"> ...read more</span>';
     return $excerpt;
 }

    Then each shortcode that contains an excerpt will include the second trigger:

    [expand title="I am a little tea-pot" excerpt="short and stout"]Here is my handle, here is my spout.[/expand]

    And here is an example of the above in action:

    I am a little tea-pot
    short and stout
    Here is my handle, here is my spout.

    Next, what happens when there are multiple triggers with swaptitles? Let’s see.

    [expand title="main trigger" swaptitle="main trigger swap" id="mankey"]this is the hidden text for this multi-target test[/expand]
<div id="extra1-mankey" class="collapseomatic" data-swaptitle="Trigger 2 Swap Titlte">Trigger 2</div>
<div id="extra2-mankey" class="collapseomatic" data-swaptitle="Trigger 3 Swap Titlte">Trigger 3</div>
    main trigger
    this is the hidden text for this multi-target test
    Trigger 2
    Trigger 3
    MORE ⬇
    hey dude
    Posted on

    Tidal Chart for Leith

    How to caculate a countdown to the next high and low tide.

    First, there is a nice plugin called Tides Today UK and Ireland tide times that allows tidal charts to be displayed using a Sidebar Widget or a shortcode. For example:

    [[tide_times days=1 title="Tide times for Leith" location="leith"]These are today's tides for Leith[/tide_times]]

    That outputs a tidy forecast like so:

    [tide_times days=1 title=”Tide times for Leith” location=”leith”]These are today’s tides for Leith[/tide_times]

    The shortcode references the authors own web-service api that returns a JSON encoded dataset. Here is the dataset for Leith. However, the plugin author clearly (if not threateningly) states:

    You may not use the data provided by the API for anything other than displaying tide information on your website by the
    means provided by this plugin.

    …Failure to comply with any of the conditions outlined here or as outlined in the Tides Today Terms and conditions will result in legal action being taken.

    In the words of Al Swearengen:

    Not a tone to get a deal done.

    Even though the datasource provide is from the UK Hydrographic Office:

    All data is provided by the UK Hydrographic Office and is provided under license. Crown Copyright 2016.

    https://tides.today/about/

    So we might need to find our own, tax-funded, public, non-threatening api to get our tidal info from, for example:
    https://data.gov.uk/publisher/united-kingdom-hydrographic-office
    https://www.tidetimes.org.uk/leith-tide-times
    even better:
    RSS: https://www.tidetimes.org.uk/leith-tide-times.rss
    Twitter: https://twitter.com/LeithTideTimes
    http://www.ntslf.org/
    https://tidesandcurrents.noaa.gov/api/
    https://www.worldtides.info/
    https://www.wunderground.com/

    The NOAA api looks quite promising… but it’s only for North America. So we move on to Worworldtides api which provides 1000 free calls per month. So far that is a winner. Now let’s take a look at The National Tidal and Sea Level Facility. It seems it only serves the UK and Ireland. Here is Leith.

    Leith
    http://www.ukho.gov.uk/easytide/EasyTide/ShowPrediction.aspx?PortID=0225&PredictionLength=1

    Holy Island
    http://www.ukho.gov.uk/easytide/EasyTide/ShowPrediction.aspx?PortID=0208&PredictionLength=1

    Posted on

    Collapse-O/Pro-Matic Highlander Must Be One

    As of Collapse-O-Matic version 1.7.2 and Collapse-Pro-Matic version 1.3.2 we have added the ability to force one element to stay open in a highlander grouping. Simply add the class must-be-one to all the triggers in a highlander group using the trigclass attribute like so:

    Shortcode

    [expand title="Monkeys" rel="animal-highlander" trigclass="must-be-one"]...[/expand]
[expand title="Donkeys" rel="animal-highlander" trigclass="must-be-one"]...[/expand]
[expand title="Ninjas" rel="animal-highlander" trigclass="must-be-one"]...[/expand]

    Example

    Monkeys
    A monkey is a primate of the Haplorrhini suborder and simian infraorder, either an Old World monkey or a New World monkey, but excluding apes and humans. There are about 260 known living species of monkey. Many are arboreal, although there are species that live primarily on the ground, such as baboons. Monkeys are generally considered to be intelligent. Unlike apes, monkeys usually have tails. Tailless monkeys may be called “apes”, incorrectly according to modern usage; thus the tailless Barbary macaque is called the “Barbary ape”.

    Donkeys
    The donkey or ass, Equus africanus asinus,[1][2] is a domesticated member of the Equidae or horse family. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years. There are more than 40 million donkeys in the world, mostly in underdeveloped countries, where they are used principally as draught or pack animals. Working donkeys are often associated with those living at or below subsistence levels. Small numbers of donkeys are kept for breeding or as pets in developed countries.

    Ninjas
    A ninja (忍者?) or shinobi (忍び?) was a covert agent or mercenary in feudal Japan who specialized in unorthodox warfare. The functions of the ninja included espionage, sabotage, infiltration, and assassination, and open combat in certain situations.[1] Their covert methods of waging war contrasted the ninja with the samurai, who observed strict rules about honor and combat.[2] The shinobi proper, a specially trained group of spies and mercenaries, appeared in the Sengoku or “warring states” period, in the 15th century,[3] but antecedents may have existed in the 14th century,[4] and possibly even in the 12th century (Heian or early Kamakura era).[5][6]