{"id":1078,"date":"2016-07-27T17:32:22","date_gmt":"2016-07-27T17:32:22","guid":{"rendered":"http:\/\/bigtop.dev\/?page_id=1078"},"modified":"2016-08-01T23:14:30","modified_gmt":"2016-08-01T21:14:30","slug":"image-hero","status":"publish","type":"page","link":"https:\/\/sg-demo.com\/amare-basic\/feature-top\/image-hero\/","title":{"rendered":"Image Hero"},"content":{"rendered":"

This is how a simple image in the Feature Top would look like.<\/span><\/h3>\n

That\u00b4s an alternative to the background-image of Feature Top and will be responsiv (adapt its height also).<\/strong><\/p>\n

Pro:<\/strong> Adapts to screensize while keeping its ratio, so takes up less space than a background pic with text on it probably.
\nCon:<\/strong> More complicated to get text placed on it. Will adapt until it reaches maximum (original) width, then (on larger screens) background will show up left and right.<\/p>\n

Hint:<\/strong> Use the code the editor produces to insert an image in original size without a link somewhere on a test page. Refresh that page and inspect your source code to find that image. WordPress automatically includes responsive images in a few different sizes. When you copy that code from your source, you can save loading time on mobiles because smaller image sizes will be used there.<\/p>\n

The code will look something like this:<\/strong>\"image<\/a><\/p>\n

Copy that code. Use a textwidget, drag it in the Feature Top widget and paste the code in there. To avoid unwanted gaps around the image, I wrapped it in a div and added inline styles to the pic itself (style=”margin:0; padding:0;” – you can see that in the pic also).<\/p>\n

Use a large image, but low in height. My original pics are 1920px wide. Important: Optimize before you upload or use a plugin that optimizes your pics while uploading, else your sites might load slow and large images might show up late. Without a plugin, visit this site to optimize large pics: https:\/\/tinypng.com\/
\n<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

This is how a simple image in the Feature Top would look like. That\u00b4s an alternative to the background-image of Feature Top and will be responsiv (adapt its height also). Pro: Adapts to screensize while keeping its ratio, so takes up less space than a background pic with text on it probably. Con: More complicated … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":929,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/sg-demo.com\/amare-basic\/wp-json\/wp\/v2\/pages\/1078"}],"collection":[{"href":"https:\/\/sg-demo.com\/amare-basic\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sg-demo.com\/amare-basic\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sg-demo.com\/amare-basic\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sg-demo.com\/amare-basic\/wp-json\/wp\/v2\/comments?post=1078"}],"version-history":[{"count":7,"href":"https:\/\/sg-demo.com\/amare-basic\/wp-json\/wp\/v2\/pages\/1078\/revisions"}],"predecessor-version":[{"id":1178,"href":"https:\/\/sg-demo.com\/amare-basic\/wp-json\/wp\/v2\/pages\/1078\/revisions\/1178"}],"up":[{"embeddable":true,"href":"https:\/\/sg-demo.com\/amare-basic\/wp-json\/wp\/v2\/pages\/929"}],"wp:attachment":[{"href":"https:\/\/sg-demo.com\/amare-basic\/wp-json\/wp\/v2\/media?parent=1078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}