Below, you’ll find a detailed guide on how to add the Browser Screenshots 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 Browser Screenshots Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Browser Screenshots Plugin and the shortcodes it provides:
"Browser Screenshots is a versatile WordPress plugin that allows users to capture screenshots directly from their browsers. Ideal for tech bloggers, developers, and web designers."
- [browser-shot]
Browser Screenshots [browser-shot] Shortcode
The Browser-Shots shortcode is a WordPress plugin that generates screenshots of web pages. This shortcode accepts parameters like URL, width, height, alt, link, target, class, image class, rel, display link, and post links. It uses these parameters to create a screenshot of the specified URL, with the defined width and height. The alt parameter provides alternative text for the image, while the link parameter specifies the URL to be linked from the screenshot. The shortcode also allows for custom classes and rel attributes to be added to the image, and the option to display the link or not. The post links parameter, when true, changes the link URL to the permalink of the current post. The function then generates the screenshot and wraps it in a div with the specified classes. If the display link parameter is true, the screenshot is wrapped in a link to the specified URL. If content is provided, it’s displayed as caption text below the screenshot. This shortcode provides a convenient way to add screenshots of web pages to WordPress posts or pages, with a good degree of customization.
Shortcode: [browser-shot]
Parameters
Here is a list of all possible browser-shot shortcode parameters and attributes:
url– The website URL for the screenshot.width– The width of the screenshot in pixels.height– The height of the screenshot in pixels.alt– The alt text for the screenshot image.link– The URL to which the screenshot links.target– The target attribute for the link.class– The CSS class for the screenshot wrapper.image_class– The CSS class for the screenshot image.rel– The rel attribute for the link.display_link– Boolean to display or hide the link.post_links– Boolean to link the screenshot to the post.
Examples and Usage
Basic example – Display a screenshot of a website using the default width and height parameters.
[browser-shot url="https://www.example.com" /]Advanced examples
Display a screenshot of a website with custom width and height parameters.
[browser-shot url="https://www.example.com" width="800" height="600" /]Display a screenshot of a website with custom width, height, and alternative text parameters. Also, the screenshot is linked to the specified URL, opening in a new tab.
[browser-shot url="https://www.example.com" width="800" height="600" alt="Example Website" link="https://www.example.com" target="_blank" /]Display a screenshot of a website with custom width, height, alternative text, and CSS class parameters. The screenshot is not linked to any URL.
[browser-shot url="https://www.example.com" width="800" height="600" alt="Example Website" class="custom-class" display_link=false /]PHP Function Code
In case you have difficulties debugging what causing issues with [browser-shot] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'browser-shot', array( $this, 'shortcode' ) );Shortcode PHP function:
function shortcode( $attributes, $content = '', $code = '' ) {
// Get attributes as parameters.
extract(
shortcode_atts(
array(
'url' => '',
'width' => 600,
'height' => 450,
'alt' => '',
'link' => '',
'target' => '',
'class' => '',
'image_class' => 'alignnone',
'rel' => '',
'display_link' => true,
'post_links' => false,
),
$attributes,
'browser-shots'
)
);
// Filter booleans.
$display_link = filter_var( $display_link, FILTER_VALIDATE_BOOLEAN );
$post_links = filter_var( $post_links, FILTER_VALIDATE_BOOLEAN );
if ( empty( $alt ) ) {
$parse = wp_parse_url( esc_url( $url ) );
if ( ! empty( $parse['host'] ) ) {
// translators: %s = domain name for site that is having a screenshot taken.
$alt = sprintf( __( 'Screenshot of %s', 'browser-shots' ), $parse['host'] );
} else {
// Fallback in case of relative path or other problem.
$alt = esc_url( $url );
}
}
if ( $post_links ) {
$link = esc_url( get_permalink( get_the_ID() ) );
}
// Use the permalink for the current page.
if ( 'PERMALINK' === $link || 'http://PERMALINK' === $link ) {
$link = esc_url( get_permalink( get_the_ID() ) );
}
if ( empty( $link ) ) {
$link = esc_url( $url );
}
if ( $rel ) {
$rel = ' rel="' . esc_attr( $rel ) . '"';
}
if ( $target ) {
$target = ' target="' . esc_attr( $target ) . '"';
}
// Get screenshot.
$image_uri = $this->get_shot( $url, $width, $height );
if ( ! empty( $image_uri ) ) {
ob_start();
if ( ! empty( $content ) ) {
echo '<div class="wp-caption ' . esc_attr( $image_class ) . '" style="width:' . ( intval( $width ) + 10 ) . 'px;">';
// Reset image_class so it's not used again.
$image_class = '';
}
echo '<div class="browser-shot ' . esc_attr( $image_class ) . '">';
if ( $display_link ) {
echo '<a href="' . esc_url( $link ) . '" ' . $target . $rel . '>';
}
echo '<img src="' . esc_url( $image_uri ) . '" alt="' . esc_attr( $alt ) . '" width="' . intval( $width ) . '" height="' . intval( $height ) . '" class="' . esc_attr( $image_class ) . '" />';
if ( $display_link ) {
echo '</a>';
}
echo '</div>';
if ( ! empty( $content ) ) {
echo '<p class="wp-caption-text">' . wp_kses_post( $content ) . '</p></div>';
}
return ob_get_clean();
}
return '';
}
Code file location:
browser-shots/browser-shots/browser-shots.phpConclusion
Now that you’ve learned how to embed the Browser Screenshots 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