Posts

Posted on

Collapse O Matic and Using HTML Inside a Shortcode Attribute

Here is an example of using html inside a shortcode attribute:

[expand title='HTML Title']Here is some content[/expand]

HTML Title
Here is some content

As of 1.8.4 this will no longer work. Instead we need to use the tag attribute:
[expand tag='span' title='Non HTML Title']Here is some content[/expand]
Non HTML Title

Here is some content

Here is a test also using HTML in the swaptitle attribugte
[expand title='HTML Title' swaptitle='Hey Dude']Here is some content[/expand]

HTML Title
Here is some content
Title
Here is some content
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

Collapse-O-Matic Animation Effects

Quick test of all the animation effects with Collapse-O-Matic v 1.8.3:

[expand title="slideToggle" animation_effect="slideToggle" duration="2000"]content[/expand]
slideToggle
content
[expand title="slideFade" animation_effect="slideFade"]content[/expand]
slideFade
content

[expand title="fadeOnly" animation_effect="fadeOnly"]content[/expand]
fadeOnly
content
Posted on

Print-Pro-Matic Lazy-load Image Test

By default, WordPress will add loading=”lazy” to all img tags that have width and height attributes present. Normally this is desired. However, if a page has many images and is to be printed, often times images further down the page have not yet loaded, leaving large spaces as placeholders for when the user finally scrolls down that far and the image loads. Good for the web, bad for a PDF.

Print-Pro matic now offers the option to selectively turn-off this default loading="lazy" attribute for images for the entire site.

Below is a series of images with width and height defined. By default lazy-load should be enabled, but with the option turned on, the lazy-load is disabled, allowing the images to fully load on the page in preparation for printing.

The New Print View Method

The more advanced method is by using a custom print_view variable that turns off the lazy-load only when the print is triggered. To accomplish this, first add the following to the child-theme’s function.php file: (note, this is no longer required as of version 2.1.2)

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

function print_with_no_lazy_load() {
    if ( get_query_var( 'print_view' ) ) {
        return false;
    }
	return true;
}
add_filter( 'wp_lazy_loading_enabled', 'print_with_no_lazy_load' );

Next we add the print-me shortcode with a unique ID and url using the %print_view% placeholder:

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

Ad of version 2.1.2 there is a new option to add the print_view query var from the plugin options page–so no need to manually add this to the child-theme’s function.php file. This option will also add the print_with_no_lazy_load function. Version 2.1.2 also added a url_target attribute to allow the print version to load in the same tab:

[print-me id="monkey" url="%print_view%" url_target="_self"/]
One, this is the loneliest number, according to some guys from Liverpool living in Hamburg in the late 60’s
Two is pretty bad to, it is often known as the loneliest number since the number one.
Three, oh it’s a Magic number. Just let Blind Melon sing you a song about it – Schoolhouse rock style.
Hollywood Hackers from the 90’s used 4 rather than the letter A, because… cyber?
Number Five is Alive!
“I see dead people”
Donkey!
A donkey in space?
A donkey in space!
Space Donkey!
Posted on

Quick Test – Collapse by Class

This is a test on how to handle retroactively applying a collapse-expand feature to any element with a defined class.

The idea is to first have an element with a specific class that holds a heaping amount of content, like the one below:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ok, that’s a lot of text. Now within collapse-pro-matic check for this class, if found append or prepend a trigger and then adjust the target to a defined minimum height.

This is something that would be applied to every element with the defined class, across all posts, future, present and past.

Posted on

Collapse-O-Matic Button

[expand title="Push me" swaptitle="Push" trigclass="noarrow my_button" tag="div"]this is the hidden content[/expand]
Push me
this is the hidden content

CSS

.my_button {
background-color: white;
color: black;
border-radius: 6px;
font-family: by;
padding: 5px;
width: 99px;
text-align: center;
border: 2px solid #98FB98; /* Green */
}

.my_button.colomat-hover{
background-color: #eb234c; /* red */
color: white;
text-align: center;
}