{"id":79,"date":"2018-01-17T04:39:20","date_gmt":"2018-01-17T04:39:20","guid":{"rendered":"http:\/\/loftocean.com\/doc\/loftloader\/?page_id=79"},"modified":"2018-09-25T06:12:54","modified_gmt":"2018-09-25T06:12:54","slug":"add-custom-image","status":"publish","type":"page","link":"https:\/\/loftocean.com\/doc\/loftloader\/loader\/add-custom-image\/","title":{"rendered":"Add Custom Image"},"content":{"rendered":"<p>When choose one of these 6 animations, you can upload a custom brand image:<\/p>\n<ul>\n<li>Drawing Frame<\/li>\n<li>Custom Image Loading<\/li>\n<li>Custom Image Rotating<\/li>\n<li>Custom Image Bouncing<\/li>\n<li>Custom Static Image<\/li>\n<li>Custom Image Fading (New since v1.1.0)<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/04\/custom-img-2lines-2.jpg\" alt=\"\" width=\"1350\" height=\"1000\" class=\"aligncenter size-full wp-image-264\" srcset=\"https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/04\/custom-img-2lines-2.jpg 1350w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/04\/custom-img-2lines-2-300x222.jpg 300w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/04\/custom-img-2lines-2-768x569.jpg 768w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/04\/custom-img-2lines-2-1024x759.jpg 1024w\" sizes=\"auto, (max-width: 1350px) 100vw, 1350px\" \/><\/p>\n<p>Then you will see the options below:<\/p>\n<ul>\n<li><strong>Upload Image \u2013 <\/strong>Click on the Upload button to add a custom image, for example, the site logo.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/01\/upload-img.jpg\" alt=\"\" width=\"1690\" height=\"496\" class=\"aligncenter size-full wp-image-81\" srcset=\"https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/01\/upload-img.jpg 1690w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/01\/upload-img-300x88.jpg 300w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/01\/upload-img-768x225.jpg 768w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/01\/upload-img-1024x301.jpg 1024w\" sizes=\"auto, (max-width: 1690px) 100vw, 1690px\" \/><\/li>\n<li><strong>Image Width \u2013<\/strong> To keep your custom image look sharp on retina devices, we recommend upload an image with 2x size and give 1x size. For example, upload an image which is 200 x 200 px, and enter 100 px as the image width value. <span class=\"highlighted\">Please note:<\/span> If you choose <strong>Drawing Frame<\/strong>, then this option is not available because the custom image size will be set to 20% smaller than the frame automatically.<\/li>\n<li><strong>Max Width for Responsive Design \u2013<\/strong> You can set the maximum width of the custom image width by changing this option. For example, you set the <strong>Image Width<\/strong> of the custom image to 800 pixels, and when the browser width is 800 pixels or more, the image\u2019s width will be 800 pixels. When the browser screen width is less than 800 pixels, the image will take up the full width of the screen without any left or right space. If you\u2019d like to leave some space around the image on a smaller screen, you can set the max width value to less than 100%, such as 80%. Then this custom image will only take up 80% of browser width at the most. You can find <a href=\"http:\/\/loftocean.com\/doc\/loftloader\/loader\/max-width-for-responsive-design\/\">more details here<\/a>.<\/li>\n<li><strong>Direction \u2013<\/strong> When choose <strong>Custom Image Loading<\/strong> or <strong>Custom Image Rotating<\/strong>, this option will show.\n<ul>\n<li><strong>Custom Image Loading \u2013<\/strong> You can choose loading the image horizontally or vertically.<\/li>\n<li><strong>Custom Image Rotating \u2013<\/strong> The image can be rotated in 2D or 3D space.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Also Rolling \u2013<\/strong> When choose <strong>Custom Image Bouncing<\/strong>, this option will show. Check it then your image will be also rolling while bouncing.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>When choose one of these 6 animations, you can upload a custom brand image: Drawing Frame Custom Image Loading Custom Image Rotating Custom Image Bouncing Custom Static Image Custom Image Fading (New since v1.1.0) Then you will see the options below: Upload Image \u2013 Click on the Upload button to add a custom image, for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":73,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-79","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/79","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/comments?post=79"}],"version-history":[{"count":5,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/79\/revisions"}],"predecessor-version":[{"id":354,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/79\/revisions\/354"}],"up":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/73"}],"wp:attachment":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/media?parent=79"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}