Browser Screenshots free WordPress plugin
Description
Browser Screenshots free WordPress plugin
Use the [browser-shot] shortcode to automate the process of taking website screenshots. An icon is also added to the TinyMCE editor to make the shortcode creation process easy.
Shortcode Preview
// basic shot 600px wide [browser-shot url=”http://link-to-website” width=”600″] // shot with link to other website [browser-shot url=”http://link-to-website” width=”700″ link=”http://www.binarymoon.co.uk/”] // shot with caption (uses default WordPress caption styles) [browser-shot url=”http://link-to-website” width=”700″]Add Caption[/browser-shot]
Available Parameters
url (required) – the url of the link to shorten
width – the width of the image
height – the height of the image
alt – the image alt text
link – where the image links. Left blank it will point to the website where the screenshot is being taken
target – browser target. Set to _blank to open in a new window
class – add a class to the browsershots wrapper
image_class – change the default browsershots image class from alignnone to your chosen class
display_link (true or false – default true) to display a link in your screenshot
post_links (true or false – default false) to link to the permalink of the post the screenshot is on
Generating Screenshots with code
If you want to create screenshots in a theme using this plugin then you can do so using the BrowserShots::get_shot method.
For example:
.kadence-column_9e318b-46 > .kt-inside-inner-col{padding-top:0.62em;padding-bottom:1.8em;padding-left:1.6em;padding-right:1.6em;border-color:rgba(2, 44, 83, 0.3);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-right-radius:20px;border-bottom-left-radius:20px;box-shadow:0px 0px 4px 1px rgba(0, 20, 46, 0.2);}.wp-block-kadence-column.kadence-column_9e318b-46 > .kt-inside-inner-col{margin-top:0em;margin-bottom:0em;margin-right:0em;margin-left:0em;}.kadence-column_9e318b-46 > .kt-inside-inner-col{background-color:var(--global-palette9, #ffffff);}img.h-100.w-100{
border-radius: 20px;
}