Save as Image WordPress Plugin

Overview

The plugin adds a "Save as Image" button to your WordPress website, enabling your site visitors to capture a webpage as an image or send it via email with just one click. This provides the option to keep a visual record of your content and simplifies the process of capturing webpages without the need for external tools or software.

Installation

The plugin is hosted on WordPress.org as Save as Image by PDFCrowd. Installing the plugin is straightforward and can be done in a few simple steps. Choose the method that works best for you:

  1. Log in to your WordPress dashboard.
  2. Navigate to `Plugins > Add New`.
  3. In the search field, type `Save as Image by PDFCrowd` and press Enter.
  4. Once the plugin appears, click the "Install Now" button next to it.
  5. After installation, click the "Activate" button to start using the plugin.
  1. Download the plugin ZIP file: save-as-image-pdfcrowd-4.2.1.zip.
  2. Log in to your WordPress dashboard.
  3. Navigate to `Plugins > Add New > Upload Plugin`.
  4. Click the "Choose File" button and select the downloaded ZIP file. Then, click "Install Now".
  5. Once the upload and installation are complete, click "Activate Plugin" to begin using it.

License

By default, the plugin operates in demo mode, which, while fully functional, adds a watermark and PDFCrowd branding to the content.

To remove the demo watermark and PDFCrowd branding, you can purchase an API license. Activate the license by entering your PDFCrowd username and API key in the plugin settings under the License tab.

A PDFCrowd API license is versatile, allowing use across multiple WordPress websites for our plugins. Additionally, the API license grants direct access to the PDFCrowd API for a broader range of applications.

Getting Started

Once activated, the "Save as Image" button will automatically appear on all eligible content according to your settings. Users can click this button to save a screenshot of the current page as an image file (e.g. PNG or JPEG).

To manually add the "Save as Image" button to specific pages or posts, you can use either shortcode or PHP function.

The plugin offers various customization options accessible through the WordPress admin panel. You can change the screenshot generation settings and button appearance. For more detailed customization, please refer to Customization, and to the Option reference.

Shortcode

You can add the button using either a plain or block shortcode.

  • [save_as_image_pdfcrowd] saves the entire webpage as Image.
  • [block_save_as_image_pdfcrowd] saves only the enclosed code block as Image. To style the block, include CSS rules within the shortcode.

The examples below demonstrate how to use the shortcodes and override the default settings configured in the plugin.

<h3>Save the print version of the page</h3>

The button is placed in the middle
[save_as_image_pdfcrowd \
    use_print_media=1 \
    output_format='png' \
    output_name='inline.png' \
    button_text='Save print version to PNG']
of this sentence.


<h3>Save the screen version of the page</h3>

[save_as_image_pdfcrowd \
    use_print_media=0 \
    output_name='browser.png' \
    button_text='Save screen version to PNG' ]


<h3>Save only a code block</h3>

[block_save_as_image_pdfcrowd \
    output_name='just_div.png' \
    button_text='Download just this section as PNG' \
    screenshot_width='800' \
    button_background_color='green' \
    button_alignment='left']
<style>
 .invoice {
     font-size: 150%;
 }
</style>
<div class="invoice">
 Save only this div and its descendants.
</div>
[/block_save_as_image_pdfcrowd]


<h3>Convert any web page</h3>

[save_as_image_pdfcrowd \
    url='https://wikipedia.org' \
    output_name='wikipedia.png' \
    button_text='Save Wikipedia as PNG']

PHP Function

You can add the conversion button directly within your PHP code using the following helper function:

create_save_as_image_pdfcrowd_button($options = array())

Here, the $options argument is an array that contains settings to override the plugin's default configuration. For example:

echo create_save_as_image_pdfcrowd_button(array(
         'screenshot_width' => '800',
         'button_text' => 'Save as Image'
));

Server-initiated Conversion

For scenarios where you need to initiate a conversion synchronously - perhaps in response to an event other than a button click - the plugin provides a PHP function.

pdfcrowd_save_as_image($options = array())

In this case, the $options argument is an array of conversion settings that are independent of the plugin's default settings. This array must at least include your PDFCrowd username and API key. For example:

<?php
    $output = pdfcrowd_save_as_image(array(
        'username' => '',
        'api_key' => '',
        'output_format' => 'png',
        'screenshot_width' => '800',
        'url' => 'https://www.example.com/'
    ));
    if(!is_wp_error($output)) {
        echo $output;
    }
?>

Customization

The table below highlights the most common customizations you might find useful. Refer to the Option Reference for a detailed description of all available options. For an interactive experience, explore these options in the API Playground.

For additional customization options and Troubleshooting, please visit the FAQ section of our website where you can find answers and help related to frequent queries and common issues.

Image size Customize the dimensions of the captured images using the Screenshot Width and Screenshot Height.
Image format Change the ouput image format using Output Format.
Hide or Remove Contents Use the following classes in your HTML code to hide or remove elements from the output:
  • `pdfcrowd-remove`: This class applies `display:none!important` to the element, effectively removing it from the layout.
  • `pdfcrowd-hide`: This class applies `visibility:hidden!important` to the element, making it invisible but still occupying space in the layout.
For additional methods and detailed explanation, refer to this FAQ article.
Custom CSS Styling To customize CSS styling specifically for the conversion, use Custom Css to inject additional styles.

Alternatively, you can directly incorporate conversion-specific styling into your main stylesheet. Just prefix your CSS selectors with `.pdfcrowd-body` to ensure the styles apply only during the conversion process. For example:
.pdfcrowd-body h1 { font-size: 48px; }
.pdfcrowd-body footer { display: none; }
Use `@media print` Activate the print version of a webpage (if available) using Use Print Media. This function instructs the plugin to apply the CSS rules defined within the `@media print` stylesheet, ensuring the output mirrors the print-optimized version of the webpage.
Inject Custom JavaScript Use Custom Javascript or On Load Javascript to modify HTML content using custom JavaScript scripts. These scripts run when the page loads, allowing you to dynamically alter elements, styles, or behavior. In addition to the standard browser JavaScript APIs, your scripts can leverage helper functions provided by our JavaScript library.

Troubleshooting

If the default plugin output does not meet your requirements, consider adjusting the following settings individually. You may need to activate the "Expert Settings" option to access some of these features.

  • Mode > Conversion Mode: Try switching it to either "Upload" or "Content".
  • Image Output > Screenshot Width: Experiment with different widths to see which yields the best result.

Other troubleshooting steps:

  • If you are receiving an error, refer to the API Status Codes for more information.
  • Use Debug Log to obtain detailed information about the conversion process, including load errors, load times, browser console output, etc.
  • Consult the FAQ for answers to common questions.
  • The maximum size for any created image is 65 megapixels. Images exceeding this size are cropped vertically to meet this limit.
  • Contact us if you need assistance or if there is a feature you are missing.

Option Reference

Refer to the Save as Image WordPress Plugin Reference for a description of all options.