Below, you’ll find a detailed guide on how to add the iPages Flipbook For WordPress Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the iPages Flipbook For WordPress Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the iPages Flipbook For WordPress Plugin and the shortcodes it provides:
"iPages Flipbook For WordPress is a dynamic plugin that transforms your PDFs or images into interactive, realistic flipbooks, enhancing the user experience on your site."
- [IPGS_SHORTCODE_NAME]
iPages Flipbook For WordPress [IPGS_SHORTCODE_NAME] Shortcode
The iPages Flipbook shortcode is a tool that embeds a flipbook into your WordPress page. It validates the attributes ‘id’, ‘slug’, ‘class’, ‘page’, ‘width’, ‘height’ and sanitizes them for use. It checks if the flipbook exists and is active, then generates a styled div containing the flipbook. If the flipbook doesn’t exist, it returns an error message.
Shortcode: [IPGS_SHORTCODE_NAME]
Parameters
Here is a list of all possible IPGS_SHORTCODE_NAME shortcode parameters and attributes:
id– Unique identifier for the specific flipbookslug– Alternative unique string identifier for the flipbookclass– Additional CSS class to style the flipbookpage– Specifies the starting page of the flipbookwidth– Sets the width of the flipbook displayheight– Defines the height of the flipbook display
Examples and Usage
Basic example – Display an iPages flipbook by referencing its ID.
[ipages id=1 /]Advanced examples
Display an iPages flipbook by referencing its slug, and also specify the page to start from.
[ipages slug="my-flipbook" page="5" /]Display an iPages flipbook by referencing its ID, and also specify the width and height.
[ipages id=1 width="500" height="300" /]Display an iPages flipbook by referencing its ID, and also specify a custom class for additional CSS styling.
[ipages id=1 class="my-custom-class" /]Display an iPages flipbook by referencing its slug, and also specify the page to start from and a custom class for additional CSS styling.
[ipages slug="my-flipbook" page="5" class="my-custom-class" /]Note: If both ID and slug are provided, the shortcode will first try to load the flipbook by ID. If not found, it will then try to load by slug.
PHP Function Code
In case you have difficulties debugging what causing issues with [IPGS_SHORTCODE_NAME] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode(IPGS_SHORTCODE_NAME, array($this, 'shortcode'));Shortcode PHP function:
function shortcode($atts) {
$keys_valid = ['id', 'slug', 'class', 'page', 'width', 'height'];
$atts_valid = array_filter($atts, function($key) use ($keys_valid) {
return in_array($key, $keys_valid);
}, ARRAY_FILTER_USE_KEY);
extract(shortcode_atts(['id'=>0, 'slug'=>NULL, 'class'=>NULL, 'page'=>NULL, 'width'=>NULL,'height'=>NULL], $atts_valid, IPGS_SHORTCODE_NAME));
if(!$id && !$slug) {
return '<p>' . esc_html__('Error: invalid ipages flipbook identifier attribute', 'ipages_flipbook') . '</p>';
}
$id = intval($id, 10);
$slug = sanitize_text_field($slug);
$class = sanitize_text_field($class);
$page = sanitize_text_field($page);
$width = sanitize_text_field($width);
$height = sanitize_text_field($height);
if($width && preg_match('/^\d+$/',$width)) {
$width = $width . 'px';
}
if($height && preg_match('/^\d+$/',$height)) {
$height = $height . 'px';
}
global $wpdb;
$table = $wpdb->prefix . IPGS_PLUGIN_NAME;
$upload_dir = wp_upload_dir();
$sql = ($id ? $wpdb->prepare("SELECT * FROM {$table} WHERE id=%d AND NOT deleted", $id) : $wpdb->prepare("SELECT * FROM {$table} WHERE slug=%s AND NOT deleted LIMIT 0, 1", $slug));
$item = $wpdb->get_row($sql, OBJECT);
$preview = filter_input(INPUT_GET, 'preview', FILTER_SANITIZE_NUMBER_INT);
if($item && ($item->active || (!$item->active && $preview == 1))) {
$version = strtotime(mysql2date('Y-m-d H:i:s', $item->modified));
$itemData = unserialize($item->data);
array_push($this->shortcodes, array(
'id' => $item->id,
'version' => $version
));
if(sizeof($this->shortcodes) == 1) {
$this->embedLoader(true, $version);
}
$inlineStyles = "display:none;";
if($itemData->background->inline) {
$inlineStyles .= (!$this->IsNullOrEmptyString($itemData->background->color) ? 'background-color:' . $itemData->background->color . ';' : '');
if(!$this->IsNullOrEmptyString($itemData->background->image->url)) {
$imageUrl = ($itemData->background->image->relative ? $upload_dir['baseurl'] : '') . $itemData->background->image->url;
$inlineStyles .= 'background-image:url(' . $imageUrl . ');';
}
$inlineStyles .= ($itemData->background->size ? 'background-size:' . $itemData->background->size . ';' : '');
$inlineStyles .= ($itemData->background->repeat ? 'background-repeat:' . $itemData->background->repeat . ';' : '');
$inlineStyles .= ($itemData->background->position ? 'background-position:' . $itemData->background->position . ';' : '');
}
if($width || $height) {
$inlineStyles .= ($width ? 'width:' . $width . ';' : '');
$inlineStyles .= ($height ? 'height:' . $height . ';' : '');
}
$data = '';
$data .= '<!-- ipages begin -->' . PHP_EOL;
$data .= '<div ';
$data .= 'class="ipgs-flipbook ipgs-' . esc_attr($id . ($class ? ' ' . $class : '') . ($itemData->bookClass ? ' ' . $itemData->bookClass : '')) . '" ';
$data .= 'data-json-src="'. esc_url(IPGS_PLUGIN_UPLOAD_URL . $item->id . '/config.json?ver=' . $version) . '" ';
$data .= 'data-item-id="' . esc_attr($item->id) . '" ';
if($page) {
$data .= 'data-wp-page-start="' . esc_attr($page) . '" ';
}
$data .= 'style="' . esc_attr($inlineStyles) . '"';
$data .= '>' . PHP_EOL;
$data .= '</div>' . PHP_EOL;
$data .= '<!-- ipages end -->' . PHP_EOL;
return $data;
} else {
return '<p>' . esc_html__('Error: the ipages flipbook item can’t be found', 'ipages_flipbook') . '</p>';
}
}
Code file location:
ipages-flipbook/ipages-flipbook/includes/plugin.phpConclusion
Now that you’ve learned how to embed the iPages Flipbook For WordPress Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply