Senff - a11n

<h4>Summary</h4>
<p>Admin Screenshots for WordPress will add a button to every page in the admin Dashboard, allowing you to take a screenshot of the page you’re on. The screenshot will be saved in your Media Library, and you will get a direct link to it to share. This will let you show how certain settings are, without giving them access to your backend.</p>
<p>If you’re on the other end (like a support agent) and you need to know how someone’s site settings without having to log in, tell your customer to install the plugin, take a screenshot of the page that you want to see, and send you the link.</p>
<h4>Features</h4>
<ul>
<li><strong>Saves screenshots in Media Library</strong>: every image is saved in the /admin-screenshots/ subdirectory under /uploads.</li>
<li><strong>Gives you direct link to images</strong>: immediately after taking the screenshot, you get the link to it, easy to copy to your clipboard and share with others.</li>
</ul>


Admin Screenshots


This is a great little tool to share screenshots of admin pages. 



Having the image save in the media library is perfect, as it allows for the admin to control ownership of the image, and can delete if when needed.



Can we get this to also take screenshots of the pages on the frontend?


Lightweight and great for support.

Want to take a screenshot of any page in your admin Dashboard and share it with someone else? It couldn't be easier with Admin Screenshots!

JS Morisset

<p><strong>Shortcode to include images from <a href="http://screenshotmachine.com/" rel="nofollow ugc">Screenshot Machine</a> in your content.</strong></p>
<h4>SSM Shortcode Required Attributes:</h4>
<ul>
<li><code>key="{customer API key}"</code></li>
<li><code>url="{webpage url}"</code></li>
</ul>
<p>You can find the {customer API key} in your <a href="https://www.screenshotmachine.com/dashboard.php" rel="nofollow ugc">Screenshot Machine dashboard</a>.</p>
<p>The {webpage url} is the web page URL you want to capture in the screenshot.</p>
<h4>SSM Shortcode Optional Attributes:</h4>
<ul>
<li><code>dimension="{width x height}"</code> (default is 120×90)</li>
<li><code>device="{desktop|phone|tablet}"</code> (default is desktop)</li>
<li><code>format="{jpg|png|gif}"</code> (default is jpg)</li>
<li><code>days="{cache expiration}"</code> (default is 14)</li>
<li><code>wait="{ms}"</code> (default is 200)</li>
<li><code>zoom="{percentage}"</code> (default is 100)</li>
<li><code>click="{css selector}"</code> (example: .button-close)</li>
<li><code>hide="{css selectors}"</code> (example: .add-banner1,.add-banner2)</li>
<li><code>cookies="{semicolon list}"</code> (example: name1=value1;name2=value2)</li>
<li><code>language="{locale}"</code> (example: en-US)</li>
<li><code>agent="{user agent}"</code></li>
<li><code>select="{css selector}"</code> (example: table.table:nth-child(3) > tbody:nth-child(2) > tr:nth-child(15))</li>
<li><code>crop="{x,y,width,height}"</code> (example: 100,0,800,300)</li>
<li><code>title="{title}"</code></li>
<li><code>link="{yes|no}"</code> (default is yes)</li>
<li><code>target="{name}"</code> (default is _blank)</li>
<li><code>refresh="{yes|no}"</code> (default is yes)</li>
</ul>
<h4>SSM Shortcode Attribute Details:</h4>
<p>The dimension=”{width x height}” attribute examples:</p>
<ul>
<li><code>dimension="320x240"</code> – screenshot size 320×240 pixels.</li>
<li><code>dimension="800x600"</code> – screenshot size 800×600 pixels.</li>
<li><code>dimension="1024x768"</code> – screenshot size 1024×768 pixels.</li>
<li><code>dimension="1920x1080"</code> – screenshot size 1920×1080 pixels.</li>
<li><code>dimension="1024xfull"</code> – full page screenshot with width equals to 1024 pixels (can be pretty long).</li>
</ul>
<p>The days=”{cache expiration}” attribute value is a number of days that a screenshot should be used before a new one is created (default is 14).</p>
<p>The wait=”{ms}” attribute value is a number of milliseconds to wait before capturing the screenshot (default is 200).</p>
<p>The click=”{css selector}”, hide=”{css selectors}”, and select=”{css selector}” attribute values are CSS class and/or id selectors. For example:</p>
<ul>
<li><code>click=".button-close"</code> – click this CSS class container before taking a screenshot.</li>
<li><code>hide=".add-banner1,.add-banner2"</code> – hide this CSS class container before taking a screenshot.</li>
<li><code>select="table.table:nth-child(3) > tbody:nth-child(2) > tr:nth-child(15)"</code> – take a screenshot only of this CSS container.</li>
</ul>
<p>The title=”{title}” attribute value is a text string for the image alt and anchor title attributes.</p>
<p>The link=”{yes|no}” attribute value will determine if the image is linked to the web page URL or not.</p>
<p>The target=”{name}” attribute opens the link in that target (default is “_blank”). An empty string, “_self”, “_top”, “_parent”, or an HTML frame are other possible values.</p>
<p>The refresh=”{yes|no}” attribute value includes javascript to retry the image every second until it’s available (for a maximum of 10 seconds).</p>
<h4>SSM Shortcode Example:</h4>
<pre>[ssm key="abc123" url="https://google.com/" dimension="800x600"]</pre>


JSM Screenshot Machine Shortcode

Shortcode to include images from Screenshot Machine in your content.

Admin Screenshots vs JSM Screenshot Machine Shortcode