{"id":267,"date":"2018-03-12T03:42:20","date_gmt":"2018-03-12T03:42:20","guid":{"rendered":"http:\/\/veno.es\/magicards\/?page_id=267"},"modified":"2025-08-18T07:35:58","modified_gmt":"2025-08-18T07:35:58","slug":"documentation","status":"publish","type":"page","link":"https:\/\/veno.es\/magicards\/documentation\/","title":{"rendered":"Documentation"},"content":{"rendered":"\n

Plugin Installation<\/h2>\n\n\n\n
\n\n\n\n

Upload via WordPress Admin<\/strong><\/p>\n\n\n\n

Go under Plugins<\/strong> > Add New<\/strong>, click on Upload Plugin<\/strong> and select the file magicards.zip<\/code><\/p>\n\n\n\n

Upload via FTP Server<\/strong><\/p>\n\n\n\n

Unzip the file magicards.zip<\/code> and upload it to the folder \/wp-content\/plugins\/<\/strong><\/p>\n\n\n\n

Activate plugin<\/h2>\n\n\n\n
\n\n\n\n
\"\"<\/figure>\n\n\n\n

Once activated you will find the new section MagiCards<\/strong> under Settings<\/strong><\/p>\n\n\n\n

Option Panel<\/h2>\n\n\n\n
\n\n\n\n
\"\"<\/figure>\n\n\n\n

Setting up the default card size, a new thumbnail size will be added.
\nCustomize the deck’s controls: shuffle button and flip cards button.
\nSet a custom style for the cards info panel.<\/p>\n\n\n\n

Info Panel<\/h2>\n\n\n\n
\n\n\n\n

Since version 1.1 you can set an image caption and description to show an information panel behind the card<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The information can be set editing the selected image, the caption will be used as the title of the card.
\nCompiling the field “Upside down”, that description will be shown instead of the classic description if the card appears reversed.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Shortcodes<\/h2>\n\n\n\n
\n\n\n\n

MagiCards comes with an easily configurable shortcode.<\/p>\n\n\n\n

[magicards ids=\"1,2,3,4,5..\" backface=\"7\"]<\/pre>\n\n\n\n
availabe options:<\/em><\/p>\n\n\n\n
Option<\/th>Description<\/th>Default<\/th><\/tr><\/thead>
backface=\"\"<\/code><\/td>The ID of the attachment used for the cards backface<\/td>“”<\/td><\/tr>
ids=\"\"<\/code><\/td>Comma separated list of the attachment IDs inside the deck<\/td>“”<\/td><\/tr>
num=\"1\"<\/code><\/td>Number of cards to show<\/td>1<\/td><\/tr>
updown=\"0\"<\/code><\/td>Randomize cards upside down<\/td>0<\/td><\/tr>
col=\"0\"<\/code><\/td>Number of columns for the gallery. The option “fixed size” will set col=”0″ and will use the size of the chosen thumbnail<\/td>0<\/td><\/tr>
thumbsize=\"magicard-thumb\"<\/code><\/td>The size of the cards. ‘magicard-thumb’ is the custom size set inside the plugin settings page, all WP thumbnail sizes available.<\/td>magicard-thumb<\/code><\/td><\/tr>
description=\"1\"<\/code><\/td>Show the cards descriptions just below the deck instead of over each card at second click after flip<\/td>0<\/td><\/tr>
share=\"1\"<\/code><\/td>Enable share result buttons<\/td>0<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Gutenberg blocks<\/h3>\n\n\n\n
Magicards also supports Gutenberg, the new WordPress editor<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
WPBakery Page Builder<\/h3>\n\n\n\n
Search the “magicards” element<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Elementor & Beaver Builder<\/h3>\n\n\n\n
Search the “magicards” widget<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Custom Layouts<\/h2>\n\n\n\n
\n\n\n\n
Since version 2.0.2 you can set custom layouts, simply setting a custom class into the field “additional CSS classes”, available inside Block and Widget options<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
\n
\"\"
cross-layout – 9 cards, 3 columns<\/figcaption><\/figure>\n\n\n\n
\"\"
h-layout – 9 cards, 3 columns<\/figcaption><\/figure>\n\n\n\n
\"\"
x-layout – 9 cards, 3 columns<\/figcaption><\/figure>\n\n\n\n
\"\"
star-layout – 6 cards, 3 columns<\/figcaption><\/figure>\n\n\n\n
\"\"
plus-layout – 9 cards, 3 columns<\/figcaption><\/figure>\n\n\n\n
\"\"
horseshoe-layout – 12 cards, 3 columns<\/figcaption><\/figure>\n<\/figure>\n\n\n\n
Plugin Upgrade<\/h2>\n\n\n\n
\n\n\n\n
Automatic<\/h3>\n\n\n\n
Insert your purchase code inside the general settings, you will be automatically notified about new plugin’s versions, and will be able to upgrade the plugin with the one-click option, under the plugins panel<\/p>\n\n\n\n
Manual<\/h3>\n\n\n\n