Documentation

Save as Image WordPress Plugin Documentation

Overview

The Save as Image WordPress Plugin adds image download buttons to WordPress posts and pages. It can save a whole page or selected content.

Button placement and image settings are configured in WordPress. PDFCrowd renders the content on its servers and returns the image.

Save as Image WordPress Plugin product overview

Installation

Install the plugin from WordPress.org, then activate it in your WordPress dashboard. The WordPress Dashboard method is recommended for most sites. Plugin page: Save as Image by PDFCrowd.

  1. Log in to WordPress admin.
  2. Go to Plugins > Add New.
  3. Search for Save as Image by PDFCrowd.
  4. Click Install Now, then Activate.
  1. Download the plugin ZIP file: save-as-image-pdfcrowd-4.6.0.zip.
  2. In WordPress admin, go to Plugins > Add New > Upload Plugin.
  3. Choose the ZIP file and click Install Now.
  4. Click Activate Plugin.

After activation, continue to Getting Started.

Getting Started

Start by confirming that the button appears and creates a file.

First Screenshot

  1. Open one post or page that you can safely test.
  2. Click the Save as Image button.
  3. Check the generated image.

The default URL mode fetches a fresh page rather than its current browser state. Content mode sends the current HTML from the browser, including content your site has prepared for download. See Conversion Mode and check the result with your theme.

Next, use Adjust the Image Result to tune the screenshot output. Use Troubleshooting only if the button does not respond or conversion fails.

Testing safely

By default, the button can appear automatically on common content types such as posts and pages. If you are testing on a production site, review Settings > Save as Image first and limit where the button appears before testing with real visitors.

After the button creates a file, use the option reference for detailed button and screenshot settings.

License

The plugin can run in demo mode without a PDFCrowd account or API key. Demo output is functional, but it includes a PDFCrowd watermark and branding.

For production output without demo branding, activate a PDFCrowd license in WordPress under Settings > Save as Image > License.

To get production credentials, choose a PDFCrowd license. Current plan limits and credits are listed on the license page.

The plugin uses PDFCrowd's cloud conversion service. Your plan controls production limits and credits; use the pricing and account pages for current details. A PDFCrowd license can also be used for direct API integrations.

Adjust the Image Result

Use these settings when an image is created but its size, format, layout, or included content needs adjustment. Some options require Expert Settings. See the option reference for the full list of settings.

Try conversion settings in the API Playground. For plugin guidance, see the WordPress FAQ.

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.

Image Output > Screenshot Width: Experiment with different widths to see which yields the best result.

The maximum size for any created image is 65 megapixels. Images exceeding this size are cropped vertically to meet this limit.

Advanced Usage

Shortcode

Use a shortcode when you want to place the button manually in post or page content. If automatic placement is also enabled for the same content type, disable it in the Show Button on setting so the button does not appear twice.

You can use 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 button helper

Use this helper when a theme or plugin needs to print the normal Save as Image button from PHP instead of placing a shortcode in page content:

create_save_as_image_pdfcrowd_button($options = array())

The helper returns button HTML. The visitor still clicks the button in the browser, and the button uses the same conversion flow as automatic placement or shortcode placement.

The $options argument overrides the saved plugin settings for this button only. Omit any settings that should keep their values from Settings > Save as Image. For example:

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

Server-initiated PHP conversion

Use this function only when PHP code should run a conversion immediately, without showing a visitor-facing button:

pdfcrowd_save_as_image($options = array())

This function does not use the saved plugin settings as defaults. Pass the conversion input and all options the conversion needs, including your PDFCrowd username and API key. The function returns the generated file data on success or WP_Error on failure. 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;
    }
?>

Troubleshooting

Use this section when the button does not respond, conversion fails, or no image is created. If an image is created but its appearance needs adjustment, start with Adjust the Image Result.

  • 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.
  • 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.