{"id":515,"date":"2017-10-18T13:13:31","date_gmt":"2017-10-18T17:13:31","guid":{"rendered":"http:\/\/amy.imarketbeta.com\/blog\/?page_id=515"},"modified":"2017-11-14T12:20:38","modified_gmt":"2017-11-14T20:20:38","slug":"images","status":"publish","type":"page","link":"http:\/\/amy.imarketbeta.com\/blog\/part-2-staff-user-guide\/creating-and-editing-pages-and-weblinks\/special-content-types\/images\/","title":{"rendered":"Images"},"content":{"rendered":"

Images<\/h1>\n

Best practices<\/h2>\n

All images that are added to a website should be added by first using the “insert predefined template content” tool in the TinyMCE editor.<\/strong>
\nThis feature will allow you to wrap the image properly in line with the text. The process is outlined below.<\/p>\n

Images should be properly sized in a photo editor prior to adding to the website. <\/strong>
\nWhat we want to avoid are excessively large images, which will lead to slower page load times.<\/p>\n

How to add an image to a webpage<\/h2>\n

All images should be added by first inserting a predefined template. These templates have been built into the iMarket CMS manager to allow for images to behave as instructed without writing any code.<\/p>\n

    \n
  1. Place your cursor where you want the image to appear. In this example, we are going to place the image floated to the left of the paragraph text.<\/li>\n
  2. Select the “Insert Predefined Template” option from the TinyMCE toolbar<\/a>.
    \n\"\"<\/li>\n
  3. A dialog box will open with a list of image alignment options. Select the option you need, and hit “Insert.”
    \n\"\"<\/li>\n
  4. Now we have a predefined template in the correct positioning, but it contains a placeholder image. The next step will be to replace the placeholder image with the image you want to use.\"\"<\/li>\n
  5. Be sure the placeholder image is highlighted, and select the “Insert Image” option from the TinyMCE toolbar<\/a>.\"\"<\/li>\n
  6. Select the Browse icon (next to the image URL field) to find the image in media library or upload a new image to the media library. Once you have the correct image, hit “Update”.\"\"<\/li>\n
  7. Be sure the image is aligned with the text as you originally intended. Don’t worry too much about the sizing of the image, as the webpage has a built in image optimizer that will size it accordingly on the front end. Right now we’re just concerned with alignment.\"\"<\/li>\n
  8. Save the page. Hit the “Preview” button to view the page\u2014or navigate to it in your browser\u2014to be sure everything looks correct.
    \n\"\"<\/li>\n
  9. If something went wrong and your page looks broken<\/strong>, take a screenshot of the issue, undo your work, and open a ticket to Development to troubleshoot.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

    How to add images to webpage content areas.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":512,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/pages\/515"}],"collection":[{"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/comments?post=515"}],"version-history":[{"count":1,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/pages\/515\/revisions"}],"predecessor-version":[{"id":1657,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/pages\/515\/revisions\/1657"}],"up":[{"embeddable":true,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/pages\/512"}],"wp:attachment":[{"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/media?parent=515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/categories?post=515"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/tags?post=515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}