3.35. Saving images in post content

To save the images existing in the post’s content, which is found by the CSS selectors defined in Post Content Selectors, do the following:

  1. Go to Site Settings Page and activate Post Tab
  2. Go to Images Section
  3. Check Save all images in the post content? setting’s checkbox
  4. Save the site settings (See: Saving The Settings)

After these steps are done, the plugin will save the URLs existing in src attributes of img elements inside post content and replace the URLs with the ones that point to the images in your server. For more information, see Save all images in the post content?.

The plugin retrieves URLs in src attributes of img elements. If the image URLs are in another attribute of img elements, then you can put the URLs into src attribute. To achieve this, do the following:

  1. Find out in which attribute of img elements the actual URLs of the images are stored. You can do this by observing the source code of the target page.

    Tip

    To see the HTML code of an element, write its selector into a setting that is a type of Selector and Attribute Setting and then enter html into Attribute input. Next, click to button. The results will show the HTML code of the found elements.

    For example, go to Post Title Selectors, add another input group by clicking to button, and configure the new input group as follows:

    Selector:img
    Attribute:html

    Next, click to button to see the HTML code of the found img elements. After you are done, remove the input group by clicking to its button.

  2. Now, you know the name of the attribute storing the actual image URL. Let’s say it is data-src attribute. Now, go to Exchange element attributes setting under Manipulate HTML Section section of Post Tab and configure it as follows:

    Selector:img
    Attribute 1:src
    Attribute 2:data-src

    If the name of the attribute is not data-src, then enter the name you found in the previous step. For more information, see Exchange element attributes.

  3. Since the actual image URLs are in src attributes, the plugin will be able to save them.

If the images are not shown by using img elements, you can do the following:

  1. Go to Find and replace in HTML at first load setting under under Manipulate HTML Section of Post Tab.

  2. Configure it in a way that it replaces the name of the HTML tag to img. For example, let’s say the name of the HTML element is my-img and it stores the image URL in its src attribute. Configure the Find and replace in HTML at first load setting as follows:

    Find:<my-img
    Replace:<img

    If the element has a closing tag as well, add another input group by clicking to button and configure the new input group as follows:

    Find:</my-img>
    Replace:</img>

  3. Now, the plugin will be able to save the images since they are shown in img elements’ src attributes.

If the images are stored in an HTML element other than img and in an attribute other than src, you can use the settings under Manipulate HTML Section to turn them into img elements and/or put the image URLs into src attributes.

Note

You might ask why this guide does not explain directly getting the images from elements other than img and from attributes other than src. This is because the browsers display images by using img elements’ src attributes. You can save the images without turning the elements into img elements or without turning the attributes into src, but the images will not be shown in your post pages since the browsers will not be able to understand they are actually images.