Docs

1. Server requirements

1.1. Minimum

  • PHP 7+
  • WordPress 5+
  • GD library - used for image manipulation

2. Supported browsers

Please assume as recent version as possible if not specified explicitly.

  • Chrome
  • Firefox
  • IE 10+
  • Opera (No WebGL support; no live preview available)
  • IE 9/10 (No WebGL support; no live preview available)

3. Installing plugin

Note: Wordpress installer won't be able to install this plugin automatically due to it's size. Please install the plugin manually instead.

Extract your PasteUp! plugin into wordpress/wp-content/plugins folder on your server. Make sure the final dir structure is 'wordpress/wp-content/plugins/pasteup' with files in it that will look similar to this:

|-wp-content
 |-plugins
  |-pasteup
   |-language
   |-licensing
   |-media
   |-pasteup
   |-sample
   |-pasteup.php

In admin panel go to Plugins, locate PasteUp! and activate.

4. Using PasteUp!

4.1. Start the application from WordPress

PasteUp! application can be opened from Admin Dashboard via clicking PasteUp! link in the sidebar menu.

4.2. Select mockup

Select mockups by clicking on Templates icon at the top of the screen.

4.3. Insert image in a mockup

To insert image in a mockup simply click the any of the available regions. Click Library icon and it will pop up Wordpress Media Library where you will be able to pick an image from the library, url, or computer. You can also upload images directly from your hard drive by clicking Upload icon, just right next to Library icon.

Source images should be bigger than the region size specified within regions. See region size note.

4.4. Crop Image

Upon selecting an region a Crop icon will show up on the screen.

  • You can drag around the rectangle to define the image area that will be transformed into perspective.
  • You can manually change the coordinate values via input field for width, height, top, left, right, bottom positions of the crop area

4.4.1. Apply Crop

When you're done cropping, simply click the tick (save) symbol on the top right part of the screen.

4.4.2. Discard Crop

To cancel the crop in progress, click the X (close/discard) symbol on the top right part of the screen.

4.5. Save Mockup

When you're done editing a mockup (preferably but not essentially with all the regions filled in with images) you can save it by clicking the Save button on the bottom right part of the screen.

Mockup regions that were not filled in in the process of mockup editing will appear gray upon saving/rendering.

4.6. Mockup Licensing

Unless specified otherwise, all the mockups available in the application are licensed under the Creative Commons license enabling the use of generated images in both personal and commercial projects requiring only an attribution in exchange.

Source info about a particular mockup is available while editing mockup sticking to the bottom right side of it. If you're using any of the work done publicly, please do mention the source on behalf of the autors! Thanks!

We'd like to thank all the following sources and authors for making all the beautifull content available to the public. If we missed anybody in this list and you happen to notice it, please contact us!

4.7. Reset Mockup Changes

To reset changes done to the mockup simply click reset button on the top left part of the screen.

4.8. Output Image Size

All mockups that eventually get saved and rendered have a uniform size of either being 1280px wide or 720px high depending on their orientation. You can manipulate their size further via WordPress Media manager.

5. FAQ

5.1. What do region sizes within mockups tell me?

They're just suggesting how big the real life (as in when a mockup gets rendered and saved) are. You don't have to provide image of the exact specified size, however it's best if they're bigger to avoid quality loss.

5.2. Wordpress plugin installer fails on automatic plugin install

Note: Wordpress installer won't be able to install this plugin automatically due to it's size. Please install the plugin manually instead. How to install the plugin manually.

5.3. Will I lose my content after I deactivate the plugin?

No.

en utf-8 26/04/2024 03:17 3.70ms