Nader

For now the plugin is very basic but functional. Use this function within your theme files, inside loops or any other place in your code. Check out the FAQ. You can also use other functions of the plugin, just have a look at the code.
Skeleton: <code>$url2png->getScreenshot('Website URL', WIDTH, HEIGHT, IMAGETAG, CLASS)</code>
Example: <code>$url2png->getScreenshot('www.bondero.com', 300, 300)</code> 
// Result: <code>http://www.example.com/wp-content/screenshots/...</code>
Example: <code>$url2png->getScreenshot('www.bondero.com', 300, 300, true)</code> 
// Result: <code><img src="http://example.com/wp-content/screenshots/.…" alt="Website URL" class="" width="300" /></code>
Example: <code>$url2png->getScreenshot('www.bondero.com', 300, 300, true, 'alignleft')</code> 
// Result: <code><img src="http://example.com/wp-content/screenshots/.…" alt="Website URL" class="alignleft" width="300" /></code>

URL2PNG Screenshots

Integrate screenshots from url2png.com into your website.

Per Søderlind

Capture snapshots of any website using the <a href="https://cloudinary.com/console/addons#url2png" rel="nofollow ugc">Cloudinary URL2PNG add-on</a>.
<h4>Use</h4>
Add link to the site you’d like to create a snapshot of, by using the <code>[cloud2png]</code> shortcode, eg:
<pre><code>[cloud2png url="https://wordpress.org"]
</code></pre>
Customize the snapshots
Using the Cloud2PNG Customizer you can change the size and border of the snapshots.
Shortcode parameters
You can override the Cloud2PNG Customizer using the shortcode parameters, they are (with defaults):
<ul>
<li>url=home_url( ‘/’ )</li>
<li>width=430</li>
<li>height=225</li>
<li>border_width=0</li>
<li>border_radius=0</li>
<li>
border_color=#000000
[cloud2png url=”https://wordpress.org” width=”300″ height=”400″ border_width=”5″]
</li>
</ul>
Adding Cloud2PNG to a theme
Using <a href="https://developer.wordpress.org/reference/functions/do_shortcode/" rel="nofollow ugc">do_shortcode()</a>, you can add Cloud2PNG to a theme:
<pre><code>echo do_shortcode( 'url="https://wordpress.org" width="300" height="400" border_width="5' );
</code></pre>
or using the <a href="https://developer.wordpress.org/reference/hooks/shortcode_atts_shortcode/" rel="nofollow ugc">shortcode_atts_{$shortcode}</a> filter:
<pre><code>add_filter ('shortcode_atts_cloud2png', 'add_url', 10, 3);
function add_url ($out, $pairs, $atts ) {
 $out['url'] = 'https://soderlind.no';
 return $out;
}
</code></pre>
<h3>Sidenote</h3>
I code for fun, and I code to learn. I’ve tried to do this plugin using OOP at my best effort. There will be couplings that could be looser and not everything is DRY. I will update the plugin as I learn more and I will fix <a href="https://github.com/soderlind/cloud2png/issues/new" rel="nofollow ugc">issues that are reported</a>.
I’m following the <a href="https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards" rel="nofollow ugc">WordPress Coding Standards</a> with one exception, I’m using the <a href="http://www.php-fig.org/psr/psr-4/" rel="nofollow ugc">PSR-4 autoloader</a> and I’ve disabled the following rules:
<pre><code><rule ref="WordPress-Core">
 <exclude name="Generic.Files.LowercasedFilename" />
 <exclude name="WordPress.Files.FileName" />
 <exclude name="WordPress.Files.FileName.UnderscoresNotAllowed" />
</rule>
</code></pre>
<h4>Credits</h4>
Cloud2PNG is using:
<ul>
<li>The <a href="https://github.com/soderlind/plugin-customizer" rel="nofollow ugc">Plugin Customizer</a> framework.</li>
<li>The <a href="https://github.com/soderlind/class-customizer-range-value-control" rel="nofollow ugc">WordPress Customizer Range Value Control</a>.</li>
<li>The <a href="https://github.com/cloudinary/cloudinary_php" rel="nofollow ugc">PHP extension for Cloudinary</a></li>
<li>The <a href="https://github.com/php-fig/fig-standards/blob/master/accepted/PSR-4-autoloader-examples.md#class-example" rel="nofollow ugc">PSR-4 Autoloader</a></li>
<li>The jQuery <a href="https://github.com/brandonaaron/jquery-cssHooks/blob/master/boxshadow.js" rel="nofollow ugc">boxShadow cssHooks</a>, Copyright (c) 2010 Burin Asavesna (http://helloburin.com)
<ul>
<li>I use CSS box-shadow to create <a href="http://blog.teamtreehouse.com/css-tip-better-rounded-borders" rel="nofollow ugc">Better Rounded Borders</a></li>
</ul>
</li>
</ul>
<h4>Copyright and License</h4>
Cloud2PNG is copyright 2017 Per Soderlind
Cloud2PNG is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 2 of the License, or (at your option) any later version.
Cloud2PNG is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU Lesser General Public License along with the Extension. If not, see http://www.gnu.org/licenses/.

Cloud2PNG

Capture snapshots of any website using the Cloudinary URL2PNG add-on.

URL2PNG Screenshots vs Cloud2PNG