{"id":10925,"date":"2016-03-10T01:19:54","date_gmt":"2016-03-10T06:19:54","guid":{"rendered":"http:\/\/info.template-help.com\/?p=10925"},"modified":"2016-05-16T10:37:00","modified_gmt":"2016-05-16T14:37:00","slug":"js-animated-how-to-edit-images","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/js-animated-how-to-edit-images.html","title":{"rendered":"JS Animated. How to edit images"},"content":{"rendered":"

Our Support team is ready to present you a new tutorial that shows how to edit images<\/strong> in Website templates.<\/p>\r\nJS Animated. How to edit images<\/a>\r\n\r\n

There are several ways to add an image to your website in JS Animated templates. Please, refer to the steps listed below:<\/p>\r\n\r\n

Replacing an image<\/h3>\r\n
    \r\n\t
  1. \r\n\t\t

    Open your site in browser and inspect current image file name. Copy it to clipboard:<\/p>\r\n\r\n\"53.JS_Animated.How_to_edit_images_in_HTML_based_template_1\"<\/a>\r\n\t<\/li>\r\n\t

  2. \r\n\t\t

    Create a new image, keeping the same file name and extension, e.g., icon_1.png or client-logo-2.jpg.<\/p>\r\n\t<\/li>\r\n\t

  3. \r\n\t\t

    Connect to your FTP or open the hosting cPanel File manager tool.<\/p>\r\n\t<\/li>\r\n\t

  4. \r\n\t\t

    Upload the newly created image to your ‘images’ folder on the server and confirm the replacement.<\/p>\r\n\t<\/li>\t\r\n<\/ol>\r\n\r\n

    Changing an image in html<\/h3>\r\n
      \r\n\t
    1. \r\n\t\t

      Open your site in browser and inspect current image file name. Copy it to clipboard.<\/p>\r\n\t<\/li>\r\n\t

    2. \r\n\t\t

      Connect to your FTP or open the hosting cPanel File manager tool.<\/p>\r\n\t<\/li>\r\n\t

    3. \r\n\t\t

      Upload the new image to your ‘images’ folder on the server.<\/p>\r\n\t<\/li>\r\n\t

    4. \r\n\t\t

      Then open the *.html file for editing, e.g., index.html.<\/p>\r\n\t<\/li>\r\n\t

    5. \r\n\t\t

      Search for current image file name, you can do it by pressing CTRL+F on your keyboard.<\/p>\r\n\t<\/li>\r\n\t

    6. \r\n\t\t

      Replace the path to an image file with a new one and save changes:<\/p>\r\n\r\n\"53.JS_Animated.How_to_edit_images_in_HTML_based_template_2\"<\/a>\r\n\t<\/li>\r\n\t

    7. \r\n\t\t

      Check your website, it should load the new image now.<\/p>\r\n\t<\/li>\t\r\n<\/ol>\r\n\r\n

      Adding a new image to the page<\/h3>\r\n
        \r\n\t
      1. \r\n\t\t

        First, you need to prepare an image. Open the template package and navigate to sources_###.zip to locate theme PSD files. You can refer to the following guides on unzipping sources.zip on MAC <\/a> or Windows OS <\/a> and edit PSD files<\/a> then.<\/p>\r\n\t<\/li>\r\n\t

      2. \r\n\t\t

        Export your images to .png by selecting Save for web<\/strong> option.<\/p>\r\n\t<\/li>\t\r\n\t

      3. \r\n\t\t

        Connect to your FTP or open the hosting cPanel File manager tool.<\/p>\r\n\t<\/li>\r\n\t

      4. \r\n\t\t

        Upload the new image to your ‘images’ folder on the server.<\/p>\r\n\t<\/li>\r\n\t

      5. \r\n\t\t

        Then open the *.html file for editing, e.g., index.html.<\/p>\r\n\t<\/li>\r\n\t

      6. \r\n\t\t

        Search for current image file name or add a new code for your newly created image, as follows:<\/p>\r\n\t\t

        <img alt="" src="path-to-image-goes-here" \/><\/pre>\r\n\t<\/li>\r\n\t
      7. \r\n\t\t
        Specify the path to your new image, for example, “img\/image.png” and save changes.<\/p>\r\n\t<\/li>\r\n\t
      8. \r\n\t\t
        Check your website, it should display the new image now.<\/p>\r\n\t<\/li>\t\r\n<\/ol>\r\n\r\n
        Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nJS Animated. How to edit images<\/a>","protected":false},"excerpt":{"rendered":"
        Our Support team is ready to present you a new tutorial that shows how to edit images<\/strong> in Website templates.<\/p>\n","protected":false},"author":59,"featured_media":10956,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016],"tags":[1073,2411,537,564],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/10925"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/59"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=10925"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/10925\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/10956"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=10925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=10925"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=10925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}