Tag Archives: pictures

Magic Moment: Creating an easily viewable gallery

Blog tuitionThis post is for all your bloggers out there who deal with pictures or photographs in your businesses. You will, of course, be fully aware how brilliant blogs are at displaying your wonderful images, and I expect your blogs are bursting at the seams showing off your sumptuous fare.

There are many plugins available to create a gallery in your blog, professionally providing a slide show or a fancy fanfare of imagery. But I find these moving applications a bit annoying, and anyway, once a picture has gone by you won’t see it again until it comes around the next time.

So I wanted to work out another way of showcasing to potential clients without any complicated technical stuff, and it works simply on WordPress’s existing ‘Library’ in your ‘Media’ section, located through the left sidebar while you are in ‘admin’ mode.

Attachment Display SettingsThis is where WordPress stores all the pictures you’ve used in your posts and pages, ready to be used again whenever you need them. Each image is given its own URL, which you can use in many ways to display throughout your blog, for example, in a text or image widget in the sidebar.

So, why not take advantage of this to display your images? You could upload a large version of your perfect picture (suitably watermarked to preserve your copyright) into the gallery. Once published, when somebody clicks on the picture they will be able to view it in its own personal page (click on any image to see what I mean).

Edit Image IconIf you can’t display this picture in its original size, you could resize it before you paste it in your gallery page. When you upload your picture, the Attachment Display Settings menu will provide the option to paste it as the thumbnail size if this is applicable.

Otherwise you will need to resize it when it is in situ. The picture’s editing menu is reached by clicking on the image in ‘edit mode’ to show the editing icons in the top left corner. Click on the mountain icon to access the edit menus, and then select ‘Advanced Settings’ in the tabs above.

100% sized image60% sized image

You can resize your picture by by selecting the desired percentage in the sidebar, as shown above, or by changing the number of pixels.

Reduced Size Image

Remember you only need to change one dimension, as WordPress will calculate the other for you.

Reduced Size Image

Now you can display your pictures as icons that can be clicked on to show the picture in its true dimensions and detail in its own page. As these pages are created automatically, there is no extra work for you, but there is the inconvenience that you cannot edit these pages to include navigation or a call to action to further your business, and the visitor will have to click on the ‘back’ button to return to your website.

Results of my blogging experiment so far

I have been working on my experiment blog now for over two weeks, with very encouraging results. My aim is to post every day for a year (from the 1 January) to see what happens. I will be doing very limited promotion, relying on the power of WordPress and organic search engine reaction to get traffic.

The most amount of views in one day has been 12 so far, and since the third day I have always had traffic (I’m up to 70 views so far). I’m not sure about the reliability of WordPress’s statistics, as when I have received email notifications about ‘likes’ from readers, these have not been picked up. Therefore I suggest you treat these results with a pinch of salt, and don’t take them as ‘gospel’.

One of the main indicators of a successful blog is the amount of interaction you receive, whether it’s in the form of comments or ‘likes’. Even though the latter is gratifying, the former is the most desired (so far I’ve got two), as it shows you have moved the reader enough to express themselves in words rather than just pressing a button.

I have set up the sharing buttons to allow readers to share my posts, but I haven’t seen any evidence of this yet. But it is early days… However, the RSS system is set up to syndicate or feed my posts onto Twitter and Facebook, and the stats do show if anybody does click through from these to view my posts.

Frequency is certainly a good indicator to get regular traffic, but so is good content. Visitors need to know that whenever they visit they will get something worthwhile to read, as well as something new each time. Pictures make blog posts more interesting, and can say a lot more than words, so you can create a satisfactory post quite quickly and easily. I will be investigating how to make this process more efficient using various technological advances that are becoming available – watch this space.

Another thing to mention is that I take as much care with my categories and tags as with the quality of content and pictures. Adequate keyword usage stimulates the search engines and helps new visitors to find you. And it’s important to include the alt tags behind your images too, not only for the spiders to read, but to help any partially sighted visitors to understand your blog better.

If you want to take a look at the blog in question, feel free: http://aspiringcountrywoman.wordpress.com

Magic Moment: Adding a Pinterest button #2

Fairy Blog Mother: blogging help

Click my logo to ask me a question!

Assuming that my readers using WordPress.org have more technical know-how, I won’t describe everything in a total step-by-step process. Even so, a little guidance won’t go amiss…

Pin it buttonHere are two ways you can place Pinterest onto your website, starting with the platform itself.

If you already have an account, go to the ‘About’ link at the top of the page, and select ‘Pin It Button’ from the drop down menu. This will take you to their ‘Goodies’ page where there are lots of options for you to try, such as adding a ‘Pin It’ button to your browser bar. Once you’ve dragged this on, it will allow you to pin any picture you see that takes your fancy while browsing the web.

To find the buttons relevant to blogs, pan down further to find the ‘Follow buttons for websites’ section:

Follow Button for Pinterest

Select your preference, copy the code and paste it into a text widget in your sidebar. You can see mine on my sidebar under ‘Socialise with me!’. All the information is included in the code to enable people can see your boards and decide whether to follow you.

Further down there is an option for placing a ‘Pin It Button’ on your website, but I prefer the plugin Pinterest “Pin It” Button instead:

Pinterest Pin It Button Plugin

Once you’ve installed and activated it:

Pinterest Pin It Button Plugin Installed

…don’t forget to change the settings to suit. This plugin’s settings page allows you to select whether the user can choose their own image from the post, the position of the pin button’s counter, which pages or areas the pin button will show, and its position within the post (mine is underneath, as you can see) – and don’t forget to save your settings once you’ve finished.

Remember Pinterest works with images, so unless there is a suitable picture included in your post, it may get confused and will not be able to pin your post effectively. Make sure the pin includes a link back to the post, otherwise all your efforts will be in vain.

Magic Moment: Adding a Pinterest button #1

Fairy Blog Mother: blogging help

Click my logo to ask me a question!

It’s so nice that WordPress.com does everything for your blog without you having to worry. Whenever something new comes onto the market, you can be sure that the latest version will automatically provide your blog with the application ready for you to activate.

PinterestPinterest is taking the visual side of social media by storm. Therefore it seemed natural that bloggers Settings going to Sharingshould want to share their posts on this platform. But beware, Pinterest works with pictures, so ideally your post should contain a suitable picture for Pinterest to capture and link back to your post.

And if your post doesn’t have this sharing Pinterest option available at the bottom, activating it is so easy!

In the Dashboard, click on ‘Settings’ and then on ‘Sharing’. This will take you to the Sharing Settings page:

Sharing Settings buttons

Here you can see which sharing buttons have been activated and which haven’t. All you need to do is to drag the Pinterest button down from the ‘Available Services’ section to the ‘Enabled Services’ area and the ‘Live Preview’ will automatically show you what it will look like at the bottom of your posts. Rearranging them is as simple as dragging the button to its desired position.

Sharing Buttons 2

Next you decide how and where you want your sharing buttons to be:

Sharing Button Settings

And don’t forget to save your changes! If you don’t like these settings, change them and save before viewing them until you are happy.

Now the Pinterest button will show underneath your posts:

Share Buttons 3

This will allow the reader to pin your post onto their most appropriate board.

The next Magic Moment post will be about how to set up the Pinterest sharing button in WordPress.org.

Magic Moment: Make sure your pictures are suitable #3

Fairy Blog Mother: blogging help

Click my logo to ask me a question!

Here in the third in the series of Magic Moments to make sure your pictures are suitable for your posts, we will investigate aligning, wrapping and padding.

When you upload or paste your image into your post, you will be presented with the option to align its position within the text. If you select left, right or centre, the text will be wrapped around the image (like it is around the Fairy Blog Mother logo).

Picture positioning

How to 'enter' your picture for optimisationIf you select None the text will continue without being wrapped (as the image above). This wrapping option is also available by accessing the picture editing menu by clicking on the picture and then selecting the mountain icon.

If you want to add variable amounts of padding or space around your pictures, select the advanced settings tag in the edit menu to view the options pictured below:

Picture Wrapping

Place a number in the vertical and horizontal space boxes to specify the number of pixels you want your padding to have. Six pixels is a good amount to start with, but you can experiment for further effects. The border box determines how thick you’d like your border to be, if you require one around your picture. One pixel is a normal amount.

Magic Moment: Make sure your pictures are suitable #2

Fairy Blog Mother: blogging help

Click my logo to ask me a question!

Here is the second in the series of Magic Moments to make sure your pictures are suitable for your posts, following on from the post about using pictures instead of words in your post.

It is important to prepare your pictures to an appropriate size before you upload them into your post or your blog’s image gallery (read our first Magic Moment all about having the correct resolution). Find out the optimum image width your blog can accommodate, so that it doesn’t get swallowed up by the design or rejected by the software.

How to adapt the size of your imageWordPress does provide a fixed sizing facility for large, medium and thumbnail sizes, of which the dimension details can be regulated through ‘Settings’ in the left sidebar. These options are available when you upload a picture into your post, and are good if you want your pictures to have a uniform appearance.

How to 'enter' your picture for optimisationIf these sizes are not suitable, or you want to change your picture’s dimensions by a specified amount, access the picture’s editing menu by clicking on it and selecting the mountain icon. Click the advanced settings tab to change the properties of your pictures manually through the options pictured below:

Picture size changes

A tip is to change one pixel amount to whatever you want, for example the width, and make the height box blank, allowing WordPress to calculate its correct setting for you. This alleviates the pain of having to work out percentages of proportions, and WordPress will be more accurate anyway.

Magic Moment: Make sure your pictures are suitable #1

Fairy Blog Mother: blogging help

Click my logo to ask me a question!

Following on from the previous post about using pictures instead of words in your post, it is important to make sure your pictures have been suitably prepared for your blog. So here is the first of a series of Magic Moments to make sure they are.

Resolution greatly affects an image and how it performs on a website. This is determined by the number of dots per inch (dpi) across the page. There is a vast difference in dpi between web-images and photographs suitable for print, and a lot of digital cameras will provide pictures with high resolution that is not suitable for websites.

Therefore it is important your pictures have the correct resolution so it is not too large for the website to download. A normal web-ready picture is between 72 dpi to 96 dpi – anything larger than that will be delayed in appearing on your page, or may even be rejected by WordPress if it is too large.

Picture pixels and resolutionsResolution affects the number of pixels of an image, as a smaller resolution will result in a smaller picture. I know that the ultimate width for my pictures on this blog is 18cm, which is 510 pixels in 72 dpi, and anything larger will overhang into the sidebars. You will also find out the appropriate width for other sizes of pictures that have wrapped text around them.

You can adapt your pictures using appropriate software that provides you with this information, such as Photoshop Elements.

Stuck for words? Say it with pictures

Fairy Blog Mother: blogging help

Click my logo to ask me a question!

Over the past couple of months I have been approached by a number of photographers, artists, jewellers and other creative types about where to find ideas for blog content.

To me the answer is staring them in the face. If they are not natural writers, then concentrate on the areas they know and excel at the most – the visual aspect of their businesses. A blog is a perfect medium to show their pictures, photographs and such like. It doesn’t need to contain words, and adding pictures is so easy to do.

A picture says a thousand words, and every reader will interpret it differently, thus you have magically provided several thousand words for each post! The only words that are necessary are a caption (optional) and the alt tags behind the pictures (extremely important).

Alt tags should not only contain appropriate keywords for SEO reasons, thus enabling the search engines to index the post more effectively, it also enables the picture to ‘talk’ to partially sighted visitors. Their computers will have special software that picks up the alt tags and audibly reads them out, therefore it is important for your alt tags to be as descriptive as possible about your pictures.

How to 'enter' your picture for optimisationHere’s how to put the alt tag behind your images. After you have uploaded and pasted them into your blog, click on the picture and two icons will appear. Choose the one with the mountains to access the menu associated with optimising your pictures.

The menu provides the fields that allow you to write a title (this comes up when you mouse over the picture and is also read by the spiders), a suitable alt tag (SEO keywords and description), and a caption if required. There is also provision to link the image to another page (internally) or website (externally).

Showing the field where the alt tag should go

If you want to show pictures in other social media that doesn’t accommodate images easily, such as Twitter, linking back to your blog post is an ideal solution. You can also further the web-presence of your images through Pinterest and Flickr, and the latter also provides the necessary code to create simple galleries on your blog to show your pictures in a more presentational vein.

So if you are a reluctant blogger who is put off because you don’t know what to write about, here’s your solution: start your blogging career with some fantastic pictures, as these will say all you need, and it’s much easier to post images than worry about what you are going to say each week.

Want to know another way to put images into your post?

Fairy Blog Mother: blogging help

Click my logo to ask me a question!

Over Easter I tried to help a blogger from the States with placing images into her posts.

At first it was simply telling her she couldn’t cut and paste images from another source and place them amongst her text. All images that go into your posts need to become part of your blog first. They need to be given their own identity within the blog, properly saved to get their own URL, and a position within the blog’s space in the internet, which is called the server.

Even my logo has its special place within my blog. I am able to bring it up each time because I have stored it in the media gallery, which you can access by clicking on the image icon above the writing post area. This is the first way of bringing an image correctly into your blog, to place in your post and amongst your other images to use again.

As this poor blogger couldn’t do this (there seemed to be something preventing her from uploading images into her blog’s server), all I could do was to recommend asking help from the WordPress.org forums. I hope one of the technicians provided the answer, such as turning off the plugins first or typing in a special code into the Settings area.

FileZilla

Puzzling over this, I realised there is another way to put images into the server and then into the posts, by-passing the media icon and gallery. This is only possible if you have access to the FTP of your blog, and I use an application called FileZilla for this purpose.

FileZilla reveals the contents within the blog’s server. There are quite a lot of files that go towards making a blog happen properly. If you know your way around, within ‘public_html’ you will find a file called ‘images’ where you can upload your pictures. This will give each picture its own very simple URL, such as yourblog’sURL/imagename.jpg, without any extra files or dates clogging it up.

You can upload your pictures by simply dragging them into that file (once you’ve opened it up in FileZilla) or via the uploading mechanism recommended by your FTP provider. Be careful about naming your images, so you can access them later when there are a lot of other pictures stored there, even though they are placed in time-sequence.

The only problem is that you won’t be able to see them in your media gallery, so make sure they are the exact size you need, and you have a record of the image names (and make sure these are absolutely correct) to save you having to search them out in FileZilla later.

And now you go to your post-content page, place your cursor where you want your picture to go, click on the media icon, and now select ‘From URL’ instead of ‘From Computer’:

Make sure the Image radio button is checked.

The URL field is where you type in yourblog’sURL/imagename.jpg, which is why it needs to be exactly correct, or it won’t match with what’s uploaded into your server. WordPress will let you know if it is correct with a green tick or not with a red cross.

The ‘title’ field is marked as required (shown by the red asterisk) to show a yellow tag when moused over. Ideally the ‘alternate text’ field should also be required (you can use the same description) so that the search engines can read your images, as well as partially sighted visitors.

The rest of the menu is pretty standard, except for the ‘link image to’ field. This is where you can link your picture to another webpage or an email address (by adding mailto: immediately before the email address) like my logo. This is particularly useful if you have created a button image as a call to action.

Once you have confirmed by clicking ‘Insert into Post’, your picture should appear as you desire. Happy blogging!

How to make pictures look better

Fairy Blog Mother: blogging help

Fairy Blog Mother

In my last post you learned how to put a picture into a post. But there’s a lot more to pictures than you think, how they are positioned, creating padding around them, making them readable for the search engines – even understanding how to prepare your pictures beforehand.

When I started working for my boss and her newsletter provider, I was astounded how her staff struggled to prepare the pictures so they were suitable to be inserted. Her newsletter system was very particular, and could only cope with jpegs that were below 30MB, and the software available to use was Paint, which didn’t even work on my computer!

It took me a while to persuade my boss to buy Photoshop Elements, but once purchased, transforming pictures became a doddle. I taught my colleagues about dots per square inch, and that 72dpi is the most suitable for the web. I showed them how to crop a picture to show the best subject matter, how to reduce it in size without distortion, and how to to save it within the required size-frame. I even showed them how to collect images from different sources and convert them into jpegs so they could be used appropriately.

Suddenly the newsletters started to brighten up, look more interesting and attract more attention. And the same can be for your blog.

Click on your newly inserted picture, and you’ll get these icons:

It’s obvious that the red circle on the right means delete, but if you want to edit your picture, click on the left icon and you’ll get this menu:

Here you can change the alignment of your picture, whether it is placed left, right or centre within the page (from where you place your cursor) and the text will be automatically wrapped around it. (If this doesn’t work, which might be the case in some WordPress.org blogs, then you’ll need to add in a caption because then the image will be placed in a caption box which the text can wrap around.) If you don’t need to worry about your picture’s alignment, leave it as ‘None’.

I explained about alternative text in my previous email: alt tags describe the pictures for the benefit of the search engines who can’t read images, so use appropriate and relevant keywords, and for blind people whose computers read the alt tags.

Below that you can see the picture’s special URL, which will link to the picture’s allocated page within your blog. But you can edit that field to any other URL destination, internal or external to your blog, or to your email by typing ‘mailto:’ immediately before your email address.

If you’re happy with these changes, click on ‘Update’.

However, there is an ‘Advanced Settings’ tab at the top:

Here you can change the size of your picture to whatever you want. A tip: change either the width or the height, and then leave or make the other field blank, WordPress will adjust the picture accordingly without distorting it.

I use the image properties for creating ‘padding’ around my pictures. (This isn’t necessary if you have a caption, as padding is automatically created for your caption box.) Padding is the white space in between the picture and the text, preventing them from jutting against each other, and using this can make a big difference when presenting your pictures. I generally put anything from 5 to 10 in the boxes (vertical and horizontal), but you can experiment to what suits you.

The border box obviously provides a border for your picture, but be lenient – use between 1 to 3 unless you want to make a statement!

Again, once you’ve finished editing your picture, click on the ‘Update’ button.

So to sum up, make sure your picture is the correct size, is 72 dots per square inch, is aligned within your text, has alt text added to it, has a link added behind it, and has appropriate padding for ‘breathing space’ within the text. Then you’ll see a difference between professional picture placing and those that don’t know…