There are 3 ways of converting documents to HTML with images that can be easily added to WordPress posts or pages:
- upload converted images to WordPress media library (easy for all users but has constraints, described in this post)
- upload converted HTML with images embedded directly in HTML (easy for all users, you can’t edit image in WordPress)
- upload converted images to a custom folder via FTP client (for more advanced users, but you can have any folder location on the web server you want)
The steps below describe how to create a post or page with images added to the WordPress media library. Other ways of adding posts with images will be described in future blog posts.
Upload converted images to the WordPress media library
- Select the base template file that you want to use for conversion and click the templates radial menu button and click Duplicate:
- Enter the name you want for your template and click OK:
- Edit the template by clicking on the templates radial menu button and selecting Edit:
- Click on the Output Folders option on the left and enter \wp-content\uploads as the path. As shown below and click OK to save your template changes.
Please note that in order to have images visible in WordPress posts or pages your the option to organize uploads in folders must be unticked in media settings.
- Add your file to be converted to the Word Cleaner conversion list (Add Files or Drag & Drop doc to conversion list) and click Convert All button. As shown below.
Please note that when converting for the first time you will see the message shown below. Once the C:\wp-content\uploads folder is created Word Cleaner will not show this message. You can create these folders on C: drive manually before conversion but Word Cleaner will do this for you.
If conversion goes OK you would find your image files under C:\wp-content\uploads folder:
There are several ways of adding the converted HTML post/pages with images to WordPress. Here is one method:
- View the converted HTML file in your default browser, please note that you will see images in your web browser only if your converted file is on C: drive (image paths are relative to the HTML file so if you convert file on a D: drive images will not be shown because they are converted on the C: drive):
- Select the content you want to paste into the WordPress post/page and press Ctrl+C to copy the selected content to the clipboard:
- go to the WordPress post or page you want to add the content to and paste by clicking ctrl + v or right click on your mouse:
- The second step is to click on the Add Media button in WordPress and go to Upload Files section and Upload images from the C:\wp-content\uploads folder, below you can see just one image but you can select all images that were converted by Word Cleaner and click Open button:
- once all images are uploaded you can just close the upload window, don’t insert the images into the post because the image tags are already added to the HTML that was pasted:
- when you close the Add Media window the images will not be visible until you switch from Text to Visual mode in editor, browser has to refresh the HTML and reload the image files. The last step is to publish your post and view it in your browser.
The second method is a bit more complex if you don’t know HTML, but is can work better:
- Edit the converted HTML file in the Word Cleaner Editor and copy the HTML you want to clipboard:
- Select the HTML you want to copy and either press Ctrl+C on your keyboard or click on the copy icon at the top of the editor window:
- next go to the WordPress post or page and first click on Text view. After that click in the text area and paste the content from the clipboard by pressing Ctrl+V:
- The next stes here are exactly the same as from step c) from previous way of adding HTML and images into WordPress (go to WordPress new post or page and paste selected contents)