{"id":2663,"date":"2017-01-19T18:42:48","date_gmt":"2017-01-19T23:42:48","guid":{"rendered":"http:\/\/www.ragesw.com\/blog\/?p=2663"},"modified":"2018-04-10T02:14:21","modified_gmt":"2018-04-10T07:14:21","slug":"working-with-images-in-blog-posts","status":"publish","type":"post","link":"https:\/\/www.ragesw.com\/blog\/2017\/01\/19\/working-with-images-in-blog-posts\/","title":{"rendered":"Working with Images in Blog Posts"},"content":{"rendered":"

Blogging with Everweb 2.0<\/a> lets you easily combine text and\u00a0images to get the right look for all of your blog\u00a0posts. Images can be added to blog\u00a0posts in three ways: Firstly, on\u00a0a global level so that any image appears on every blog post (like how a Master Page works), secondly, by adding the image on a\u00a0post by post basis and thirdly by a combination of the first two techniques.<\/p>\n

 <\/p>\n

\"Inserting<\/a>

The images in the above blog post are set with an ‘inline’ display and aligned either left or right in the Blog Post Editor Window to get the desired result. The Navigation Menu widget, text box title and social media buttons are added to the Preview Window so they appear on all posts.<\/p><\/div>\n

 <\/p>\n

 <\/p>\n

Preparing Images<\/strong><\/h3>\n

When adding images to any web page, it\u2019s always a good idea to make sure that the image(s) you are going to use are of a web friendly file size. It is also useful if the image file name relates to what the image is about. Preparing your image in this way will benefit web page load times and help your page’s SEO<\/a>.<\/p>\n

 <\/p>\n

Adding Images to All Blog Posts<\/h3>\n

There are two ways in which to add an image to all\u00a0of your blog posts at once:<\/p>\n

The first method is to use a Master Page that includes the image(s), and any other objects you want. Attach the Master Page by first selecting the ‘posts’ page in the Web Page List. Next, go to the Inspector Tab and select the Page Settings button. Use the Master Page section to add the Master Page you want.<\/p>\n

Using this method means that you will need to edit the Master Page if you want to make any changes to the objects it contains . To see the results of the using the Master Page, use the Blog Posts Preview Window.<\/p>\n

The second method uses the Blog Post Preview Window as a ‘live’ Master Page. Drag and\u00a0drop your image(s) from their source, e.g. the Assets List,\u00a0on\u00a0to the Blog Post Preview Window. Move and resize the image around the Preview just as you would on a regular web page in EverWeb. The dropped image and layout you have designed for the post will be applied to all posts.<\/p>\n

The advantage of the first method\u00a0is that you cannot move objects around the Preview Window. The advantage of the second method\u00a0is that you can! Choose which method suits your requirements or use both!<\/p>\n

Remember that moving or deleting images in the Preview Window on any blog post, will move or delete the image from\u00a0all of the blog posts. It’s a good idea to think of the Preview Window as a ‘Live’ Master Page!<\/p>\n

 <\/p>\n

<\/h3>\n

Adding Images to Individual Blog Posts<\/h3>\n

If you only want to add images in to a particular post, select the post you want. then\u00a0drag and drop the image on to the Blog Post Editor Window. You can use images from the Assets List, from folder locations or using EverWeb’s Media button.<\/p>\n

If\u00a0using the Media button, drag the image you want from the ‘catalog’ on to the Editor Window. The Media button is useful as you can check the file size of the image before importing it.\u00a0To do this, right click on the image in the catalog and select ‘Display as List’ from the menu. If you do not see file sizes listed, right click on the image again and select Show Columns-> Size.<\/p>\n

 <\/p>\n

Changing Image Size<\/h4>\n

Once you have dropped the image onto the Blog Post Editor Window, select it by\u00a0clicking on it. A blue selection box appears around the image. Move and resize the image just as you would elsewhere in EverWeb. When the image is selected, the Image Editor Toolbar is available. For precise image sizing, click on the last Toolbar option, ‘Change Size’, and enter the value you require. Note that the image proportions remain are always constrained so that the image does not distort when you resize it.<\/p>\n

 <\/p>\n

\"Images<\/a>

The Blog Post Editor Window contains six images and text aligned to the left or right of the images. In the Blog Posts Preview Window below, you can see that objects that we want to include on all of the blog posts have been added in the header and footer areas. The background color of the page has been changed using the ‘posts’ page settings from the Inspector Tab.<\/p><\/div>\n

 <\/p>\n

Using Image Display<\/h4>\n

An image imported into the Blog Posts Editor Window is displayed as \u2018Break Text\u2019 by default. This means that any text around the image will be displayed above and\/or below it depending on where the image is located. Use the Image Editor Toolbar to change the ‘Display’ from \u2018Break Text\u2019 to \u2018Inline\u2019 to embed the image more within your text. Once you have set \u2018Inline\u2019, use the ‘Align’ button to either left or right aligned to get a text wrap effect. Use the middle ‘Display’ option to cancel out the wrap effect.<\/p>\n

If you are displaying multiple images in a row, it is easier to drag and drop the images on to the Blog Post Editor Window first before setting the ‘Inline’ and ‘Align’ options. In the examples above , Align has been set to Right for all the images on the top row and left for those on the bottom row. This results in the\u00a0text being pushed to where it is desired. You may also find that changing the image size using the ‘Change Size’ button will help fit the images properly in a row. In the above example, the images were reduced from a width of 300px to 250px.<\/p>\n

 <\/p>\n

Alternate Text<\/h4>\n

It\u2019s always good\u00a0to add a description of the image using Alternate Text. Use text that’s appropriate e.g. ‘Gondolas in Venice’ may be suitable for our example. If the image does not display, the alternate text is used to replace it. Alternate text is especially useful for the visually impaired and may help your SEO.<\/p>\n

 <\/p>\n

The Blog Posts Preview Window<\/h3>\n

As you may already know, the results of your work in the Blog Posts Editor Window are\u00a0seen in the the Blog Posts Preview Window. Here you can see the results of combing images in your posts with images that are used for every post. Use the Preview button in EverWeb’s Toolbar art the top of the UI to tweak the look of your blog posts before publishing.<\/p>\n

 <\/p>\n

Using images in your blog posts always helps to bring the post to your audience’s attention.\u00a0With a bit of experimentation you will be able to make very creative posts. We will have a follow up blog soon with more hints and tips on using images in your blog. In the meantime if you have a question, please let us know below. If you subscribe to our YouTube channel<\/a>, you will also find lots of blogging related posts there too!<\/p>\n

 <\/p>\n

As always please let us know if you have any comments and questions. We’re happy to help. You can also find EverWeb\u00a0on\u00a0the following social media platforms:<\/p>\n

Facebook<\/a><\/p>\n

Google+<\/a><\/p>\n

Flipboard<\/a><\/p>\n

YouTube<\/a><\/p>\n

Twitter handle @ragesw<\/p>\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Blogging with Everweb 2.0 lets you easily combine text and\u00a0images to get the right look for all of your blog\u00a0posts. Images can be added to blog\u00a0posts in three ways: Firstly, on\u00a0a global level so that any image appears on every blog post (like how a Master Page works), secondly, by adding the image on a\u00a0post […]<\/p>\n","protected":false},"author":844,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[247,252,2],"tags":[324,279,331],"class_list":["post-2663","post","type-post","status-publish","format-standard","hentry","category-everweb","category-everweb-software","category-software","tag-blogging","tag-everweb","tag-images"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/2663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/users\/844"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/comments?post=2663"}],"version-history":[{"count":15,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/2663\/revisions"}],"predecessor-version":[{"id":3572,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/2663\/revisions\/3572"}],"wp:attachment":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/media?parent=2663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/categories?post=2663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/tags?post=2663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}