Author: admin
June 2014
August 2014

Posted on

Collapse-Pro-Matic Arrows

Default/Left Arrow:
[expand title="arrow to the left"]<-- see that, that's left[/expand]]
[expand title="arrow to the left"]<-- see that, that's left[/expand] Right Arrow: [[expand title="arrow to the right" trigclass="arrowright"]checkout what is to the right -->[/expand]

arrow to the right
checkout what is to the right –>

No Arrow:
[expand title="no arrow to be found" trigclass="noarrow"]the arrow is not to be found[/expand]

no arrow to be found
the arrow is not to be found

Both Left & Right Arrow:
This method requires the extra-trigger feature of Collapse-Pro-Matic and must be built using the roll-your-own method and a bit of css:

Magic CSS

Place the following css in the collapse-o-matic (or collapse-pro-matic) plugin options page, under Custom Style:

.magic_beans {
display: inline;
float: left;
margin-right: 1.2em;
}

.clear {
clear: both;
}

Roll-Your-Own Method w/ Magic CSS

<div class="collapseomatic magic_beans" id="doublearrow" title="double arrows!">double arrows!</div><div class="collapseomatic magic_beans" id="extra-doublearrow"></div>
<div id="target-doublearrow" class="collapseomatic_content clear"><--to the left, to the right--></div>

double arrows!
<--to the left, to the right-->
Posted on

Archive-Pro-Matic all_is_link Attribute Test

Normally, the before and after attributes work like this:
[archives type="yearly" before="before text " after=" after text"]

  • before text 2023 after text
  • before text 2022 after text
  • before text 2021 after text
  • before text 2020 after text
  • before text 2019 after text
  • before text 2018 after text
  • before text 2017 after text
  • before text 2016 after text
  • before text 2015 after text
  • before text 2014 after text
  • before text 2013 after text
  • before text 2012 after text
  • before text 2010 after text

But what if we add a new attribute called ‘all_is_link’ that places the before and after text INSIDE of the html link… and set it like so:
[archives type="yearly" before="before text " after=" after text" all_is_link="true"]

Posted on

Collapse-O-Matic – The Roll Your Own Method

Using the expand shortcode we can create a simple collapse-o-matic accordion element like so:

[expand title="Trigger Text"]Target Content[/expand]
Trigger Text
Target Content

Now, if we wanted to do the same thing but using the roll-your-own method we would have to create the elements manually:

<div class="collapseomatic " id="my_id"  title="Trigger Text">Trigger Text</div>
<div id="target-my_id" class="collapseomatic_content ">Target Content</div>
Trigger Text
Target Content

Now, we have the freedom to put the target element whatever we want: before, in or after the Trigger element. For example, here a link has been placed between the target and trigger:

<div class="collapseomatic" id="my_new_id"  title="Trigger Text">Trigger Text</div>
<a href="http://plugins.twinpictures.de/premium-plugins/collapse-pro-matic/">Special Link</a>
<div id="target-my_new_id" class="collapseomatic_content ">Target Content</div>
Trigger Text

Special Link

Target Content

Now if we apply a bit of CSS magic, we can have the trigger and link display inline:

Magic CSS

Place the following css in the collapse-o-matic (or collapse-pro-matic) plugin options page, under Custom Style:

.magic_beans {
   display: inline;
   float: left;
   margin-right: 1.2em;
}

.clear {
   clear: both;
}

Roll-Your-Own Method w/ Magic CSS

<div class="collapseomatic magic_beans" id="my_unique_id"  title="Trigger Text">Trigger Text</div><a href="http://plugins.twinpictures.de/premium-plugins/collapse-pro-matic/" class="magic_beans">Collapse-Pro-Matic</a>
<div id="target-my_unique_id" class="collapseomatic_content clear">Target Content</div>

The Final Result

Trigger Text

Collapse-Pro-Matic

Target Content

Roll-Your-Own Method w/ Images

<img src="https://spacedonkey.de/wp-content/uploads/2016/01/2001_Space_Odysey-300x145.gif" class="collapseomatic noarrow" id="some_id" title="Hover over Trigger Text">
<div class="collapseomatic_content" id="target-some_id" >Target Content</div>

Required components:

  • Trigger:
    • class=”collapseomatic noarrow”
    • id=”some_id”
  • Target:
    • class=”collapseomatic_content”
    • id=”target-some_id”

Demo:

Target Content

Highlander Grouping

Highlander grouping is accomplished by adding data-group=”group_name-highlander” like so:

<div class="collapseomatic" id="monkey" data-group="animal-highlander" title="Monkeys">Monkeys</div>

<div id="target-monkey" class="collapseomatic_content">The monkey says Eek! Eek!</div>

<div class="collapseomatic" id="donkey" data-group="animal-highlander" title="Donkeys">Donkeys</div>

<div id="target-donkey" class="collapseomatic_content">The Donkey says Hee Haw</div>

Demo

Monkeys
The monkey says Eek! Eek!
Donkeys
The Donkey says Hee Haw

Posted on

Collapse-Pro-Matic Responsive Target Content Test

This is a test where the collapsed content contains a responsive element.

Test 1

Test two gives the responsive element a min-height

Test 2

Test three wraps the responsive element in another element with a min-height

Test 3

responsive element

wrapping element

Test four. The responsive element has a class of ‘resizeme’ and we fire a callback to figure out it’s size once the expand has happened:
jQuery('.resizeomatic').css('height','300px');

Test 4
This element will trigger a callback function

Posted on

List Related Attachment 2.0 Test

The following will list all attachments with a media type of image/jpeg and link directly to the image:

[[list-related-attach type="image/jpeg"]]

[list-related-attach type=”image/jpeg”]

This should show the same thing, but link to the attachment page:

[[list-related-attach type="image/jpeg" link_to="attachment"]]

[list-related-attach type=”image/jpeg” link_to=”attachment”]

and here we test the orderby attribute:

[[list-related-attach type="image/jpeg" orderby="title" order="ASC"]]

[list-related-attach type=”image/jpeg” orderby=”title” order=”ASC”]

Posted on

Collapse-O-Matic & Contact Form 7 Test

This is an example of a form inside an expand element:
[expand title="Click To View Form"][[contact-form-7 id="485" title="Contact form 1"]][/expand]

Click To View Form
[contact-form-7 id=”485″ title=”Contact form 1″]

Here is an example of a expand element inside a form:
[[contact-form-7 id="1504" title="Collapse-O-Form"]]
[contact-form-7 id=”1504″ title=”Collapse-O-Form”]

As you can see, the shortcode does not render inside Contact Form 7. There is a work-around for that described here.

Finally, we are going to try using the roll-your-own method.
[[contact-form-7 id="1508" title="Roll-O-Form"]]
[contact-form-7 id=”1508″ title=”Roll-O-Form”]

Yup, that works!

Posted on

Annual Archive / Archive-Pro-Matic Shortcode Test

Here are a few tests of the archive pro matic shortcode:

[archives type="daily" limit="5"]
[archives type="weekly" limit="5"]
[archives type="monthly" limit="5"]
[archives type="yearly" limit="5"]
[archives type="yearly" limit="5" show_post_count="true"]
[archives type="decade"]

Archive-Pro-Matic

The post_type and cat_id attributes are available by upgrading to Archive-Pro-Matic

[archives type="yearly" post_type="monkey" limit="5"]
[archives type="yearly" post_type="monkey" limit="5"]
[archives type="yearly" cat_id="4" limit="5"]
Posted on

Collapse-O-Matic Attribute Test

Simple test of how shortcode attributes are being formatted when HTML tags are used. This was an issue with WordPress 4.0-alpha-20140616 and has been addressed in the ticket: Shortcode Attributes with HTML Tags no longer working

[expand title="Test" trigclass="noarrow" alt="turtles one"]This is the content of the first image[/expand]

Test
This is the content of the first image

[expand title="<strong>Strong Test</strong>" trigclass="noarrow" alt="turtles one"]This is the content of the first image[/expand]

Strong Test
This is the content of the first image

[expand title="<img src='https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles-150x150.jpg'/>" trigclass="noarrow" alt="turtles one"]This is the content of the first image[/expand]

This is the content of the first image