By Blogging is typically all about text but images play can play and important part too in your EverWeb made blog. Often you’ll see blog posts using a Hero Image at the top of them. There’s often also a need to add thumbnail images to blog posts as well on the Index and Archive pages so that your visitors have a visual reference to the the type of post they may want to look at.
EverWeb’s blogging feature lets you add images to all of the important places, where you need them, in your blog.
Images in the Blog Main and Archive Pages
The blog main page is the first page in the blog directory. As it’s a directory page, you’ll notice that inside the directory are the Posts page and an Archive page. The blog main page is typically the page on which your visitors will first land when accessing your blog. The Blog page acts as the index for your blog entries which are stored in the Posts page. The Archive page acts as a complete index to the whole of your blog. The blog main page, on the other hand, typically only shows the most recent posts to your visitors.
When you access the blog main page, you’ll only see one item which is the blog index itself. Around the index you can design your page and add text and images as you want. You can also customize the blog index itself just by clicking on it then adjusting its settings from the Widgets Settings tab. In the Widget Settings, there are a couple of option that apply to images, the Thumbnail Size option and the Style dropdown menu option.
Thumbnail Size refers to the size of the thumbnail image that’s displayed in the blog main’s index list that’s associated with the post’s image. Use the slider to change the thumbnail image size. Choose a value from between 10 and 300. Alternatively, enter a value in the Thumbnail Size field on the right hand side. If your posts don’t have an image attached to them, you won’t see a thumbnail displayed in the blog main index. We’ll come back to this a little later…
The second field of interest is Style. This dropdown menu tells EverWeb where the image is to be displayed in the blog main index. There are five options to choose from: Just Text, if you don’t want to see an thumbnail image displayed at all, Image On Top displays the thumbnail immediately above the post, Left Aligned Image that displays to the left of the post, Right Aligned Image displays the thumbnail on the right hand side of the image, and Cover which displays the thumbnail above the post and centered within the blog main index.
Linking Images a Blog Posts To The Blog Main Index
As we mentioned earlier, the blog main index uses images associated with the blog post to display them as thumbnails in the blog main index on the blog page. To set up images for each of your posts, click on the Posts page in the Web Page List, then select the post you want to add an image to.
Once you’ve selected the post that you want, go to the Blog Post Settings on the right hand side of EverWeb’s UI. In the Post Cover Image Options section, click on the ‘Choose…’ button next to ‘Post Image’. Select the image file that you want to associate with the post. Once done, you’ll notice that the file name replaces the ‘Choose…’ text. Use the Alt Text field to add in your Alt Text. This is useful for those who are visually impaired and may also benefit your SEO as well. The image that you have selected will be used as the thumbnail in the index in the blog main page.
The next thing that you probably want to do is to display the image with the post itself. To do this, go to the next option which is ‘Style’. This dropdown works in the same way as it does in the blog page, but you have fewer display options. Choose either No Image (which is the default setting), Image On Top, Left Aligned Image or Right Aligned Image. You will see the image displayed below the blog post, in the Blog Post Preview Window. You can control the height and width of the image that you use by adjusting the Max Image Height and Width fields. Additionally, you can use the Image Padding field to adjust the distance between the image and the post itself.
The Blog Post Preview Window does just that, it’s used to preview your posts. The Preview Window is much like a Master Page, so it contains elements that you want to include on all of your blog pages, e.g. company logo, social media links and copyright information. Remeber that if you add images to this page, e.g. a company logo, they will appear on all of your blog post pages.
Adding Images in to the Blog Post
As well as adding images in to the Blog Post Preview Window, you can add images directly in to the Blog Post Editor so that you can display images within your posts if you want to, Select the post hat you want to add an image to from the Blog Post List. Once you have selected the post, click inside the post at the point where you want to embed the image within the text. Once you have anchored the cursor, drag and drop the image from your source on to the Blog Post Editor Window. The source could be, for example, from your hard disk, network drive, or from EverWeb’s Assets List. You can also drag images from EverWeb’s Free Stock Photos Library which you can find in the Media Toolbar button. If you find that images don’t drag and drop on to the Blog Post Editor Window from the Free Stock Photos Search Window, we recommend drag and dropping the image in to EverWeb’s Assets List first, then from the Assets List, in to the Blog Post Editor Window.
Once the image has been added to the Blog Post Editor Window, you have some options available to work with the image. Click once on the image to select it. You will see a Blog Post Image Toolbar either displayed above or below the image. The first button in the Image Toolbar lets you the alignment of the image to be either left, center, or right aligned. The second button, is a Trash can, and this, obviously lets you delete the image if you don’t want to use the backspace key. The third button is the star and this allows you to change how the image id displayed within the text of your post. You can choose either to display Inline with the text, or so that the image breaks the text above and below it from the point where you first placed the cursor when you inserted the image. The next button has an ‘I’ icon. When selected, this button allows you to enter Alt Text for the image. The final button in the Toolbar lets you change the image size manually rather than by using the grab handles. This is useful when accuracy in sizing is required, and in addition, if you change only want value and leave the other blank e.g. you set the height at 300px only, the image will retain its proportions.
Hyperlinking an Image In The Blog Post Editor
If you want to hyperlink an image that you are using in one of your posts, you’ll probably select the image then try to use the Hyperlink button in the Blog Post Editor’s Toolbar. You’ll these options greyed out though as they are only used for text. There is a solution to this problem, though. Keep the image selected then go to the Hyperlinks Inspector in the Inspector Window and Hyperlink from there instead.
Adding images to your blog posts will give your visitors a visual sense of navigating through your posts, as well as adding important visual backup and references to the text of your posts.
Loading ...
Comments