Oswestry Borders U3A | Older people determining their own ...

  • Doc File 1,335.00KByte



INSERTING PICTURES INTO WORDPRESS

If you don’t want something too complicated, just read the BASIC section. If you want to go into the topic in more depth, read the ADVANCED section as well.

BASIC

To add pictures (and maybe a bit of text) to an existing page:

• Either Bring up the page and put the cursor where you want to add the picture, click Edit This Entry at the bottom of the page and it will switch straight into the Dashboard for that page,

or click Oswestry Borders U3A’ in the black bar at the top left of the page and select Dashboard, Pages, and select Edit for the desired page.

• You can now add/change the text as you wish. Click Update.

• To add a picture, click where you want to add the picture.

• Click Add Media and, if the picture is on your computer, click Upload Files then Select Files and choose the file you want from wherever you’ve stored it. If the picture is already in the Media Gallery, click on it.

• The file will then be put in the Media Gallery. On the right hand side there is a box called ATTACHMENT DETAILS; you need to make your selections:

o Particularly give the picture a Caption (this then stays with the picture if you move it, etc.)

o Alt Text is for blind users who have a voice read out to them what is on the screen.

o Scroll down to ATTACHMENT DISPLAY SETTINGS and select which Alignment you want (Left, Centre or Right). If you want text to wrap round it, select Left or Right

o select Media File for Link to and

o for Size select Medium as it’s big enough to be seen but the file is not so big that it uses up too much of our total free space!

• Finally click Insert into page, then Update.

• You can then click View Page (just below the page heading) to see what your page will look like. This opens a new screen, so it’s often best to close it once you’ve finished viewing.

• If you wish to change something once the picture is published, bring up the picture in Edit page mode, click on it, and two symbols will appear, one to Delete it, and one to Edit it. Click the Edit image symbol and different options become available. You can change the Size (that it will appear on the screen), and the other options mentioned above. If you want to link the picture to a larger version elsewhere, for instance on another website such as Flickr, add the web address in Link URL. Don’t forget to click Update.

To add an extra page, e.g. if you’ve got a lot of stuff to add (for instance about a trip or event):

Bring up the Dashboard again (Oswestry Borders U3A in black bar top left, Dashboard), Pages, Add New. A new page will come up. Add whatever heading, text and pictures you want AND then put it in the right place on the website by going to Page Attributes (right hand column), under Parent choose the page you are adding to, and in Order say whether it’s the first, second etc. page. Click Publish.

To delete a page:

Bring up the Dashboard, Pages, and put your cursor on the page you want to delete. An option to Trash comes up; click it.

More help:

Learn has a lot of useful help. If you can’t find what you need, use the Search box.

These are a shortcut to learning how to do tasks, and can be accessed at .

Get Flashy is the Help page on inserting Galleries of photos, Slideshows (possibly more useful when inserting several pictures on a theme) and Videos.

Very comprehensive tutorials

FastStone Photo Resizer 3.2 is an image converter and renaming tool that intends to enable users to convert, rename, resize, crop, rotate, change color depth, add text and watermarks to images in a quick and easy batch mode. This is a useful tool to reduce the file size of photos, whether you are putting them on the website, adding them to a Borders Bulletin article, or sending them by email. Available to download FREE at . Alternatively, FastStone Image Viewer 4.9 also allows you to view images including comparing up to 4 images on the same page, with a zoom-in facility which enables selection of only the best focussed photos. In addition photos can be moved or copied to other folders easily (for instance, from your camera to a folder on your computer). I wouldn’t be without it!

| | |

| |

ADVANCED

Image Size and Quality



| |

The size and quality of an image for use on a web page is determined by a variety of things.

Physical Size 

The physical size of an image is based upon two things: The size of the image on the screen and the file size. Generally, the file size is treated as a different issue.

File Size 

This is the size of the file on your hard drive or server.

Resolution 

Resolution refers to the number of pixels in an image. Resolution is sometimes identified by the width and height of the image as well as the total number of pixels in the image.

File Type 

There are basically X image types popularly found on the Internet: jpeg, gif, png and (for favicons (the icons next to the address) Addendum (3)) ico.

The physical size of the image is information we need to know in order to determine how much "space" the image will occupy on a web page. If your WordPress Theme features a fixed width content area of 600 pixels and the image you want to use is 800, the image will push the sidebar and layout of your web page around, messing up your design. Images within that 600 pixel width need to be restricted to that maximum width in order to protect the layout of your page. It's up to you to determine what size they should be from there, matching the image to your overall layout and styles.

File size dictates the time it takes to load your page, the larger the file size, often increased because of a high image resolution quality, the longer it will take to load. People often don't have the patience to wait through long web page loads, so keeping your file sizes low speeds up your web page access times. Typically, large high quality images should be kept between 100K and 60K. Smaller images should be closer to 30K and lower. Larger file sizes also take up more of the space our website has been allocated.

The resolution of the image dictates its clarity. The higher the resolution, though, the larger the file size, so you have to make a compromise between quality and file size.

Luckily, the various file types most commonly used on the Internet have compression features. When you save the file as one of these types, it condenses or compresses the data information in the image file. Internet browsers can decompress this information to display the image on the screen. Some graphic software programs allow you to set the compression rate to control the quality of the image (and file size) at the time you save it. Depending upon your use of the images on your site, you may have to experiment with this to get the right ratio that keeps the resolution quality good while maintaining a small file size.

Websites use four common file types. The end of a filename (called the extension) tells what type it is. One type, ico, is to make a favicon file -- but this is usually only done when a website is first set up. The other three types are used for general images:

• jpg (JPEG) is good for photographs. Saving a photo as jpg removes detail from the photo. Good photo editors let you control how much detail is removed (the "compression"). Different photos need different compression; doing this carefully and viewing the result can give you a usable photo with a small file size.

• gif can be poor for photographs. It's better for line art, like logos, with solid areas of the same color.

• png is for both photographs and line art. It compresses photos without losing detail, but usually makes larger photo files than JPEGs. Some older browsers don't completely support png, though.

If you aren't sure which file type is best for a particular image, try saving the image in more than one type and comparing the file sizes. Using the right type can make a big difference! There's more information in Sitepoint's GIF-JPG-PNG What's the Difference article.

Resizing Images

Not all graphic software packages allow you to resize images, though most should. Check your graphics software table of contents or index for resize, size, transform, reduce, or enlarge, all synonyms for the for the same thing. If they don't have the feature, you may have to find different software.

The process of resizing images is fairly simple. There are usually two methods:

1) You can resize an image through the use of tools provided which allow you to manually shift the edges of an image to deform or resize the image. The best way is to grab a corner, not the edge, to resize the image. The corner "handle" will usually resize the image maintaining the overall height-width ratio. Check your manual for specific instructions.

2) The other method involves simply specifying the image's final size. The advanced graphics programs allow you to set it by exact dimensions or a percentage of reduction or enlargement.

After resizing the image, the image may be smaller, but it may also be slightly out of focus. You can sharpen the focus of the small image by using the sharpen feature in your software.

When you have fine-tuned your small sized image or new thumbnail, export the image as a jpg, gif, or png.

Resources

• Image File Formats on the Web (See Addendum (2) below)

• GIF, JPG and PNG – What’s the Difference? (See Addendum (1) below)

Inserting Images into Posts and Pages



|Contents |

|1 Overview |

|2 Step 1 – Placing your cursor |

|3 Step 2 – Click the Add Media button |

|4 Step 3 – Add or Select Your Image |

|5 Step 4 – Attachment Details |

|6 Step 5 – Attachment Display Settings |

|6.1 Image Alignment |

|6.2 Image Link |

|6.3 Image Size |

|7 Step 5 – Inserting the image |

|8 Resources |

Overview

When creating or editing a WordPress page or blog post, you can easily add images at any time using the WordPress Media Uploader tool. Here’s how to add an image, step-by-step, using the media uploader:

Step 1 – Placing your cursor

In order to add an image to your page or post, you must first insert your cursor in the place in the text where you want the image to appear. By placing your cursor within your text, you can add images inline with your content. You can also place your cursor on a blank line if you want the image to appear by itself instead.

[pic]

Tip: It’s a good idea to place your cursor on the left margin of your text, even if you want the image to appear on the right. That’s because there is a special setting called Alignment that allows you to control whether the image appears on the right or the left side of the text. It even controls how text flows around the image automatically.

Step 2 – Click the Add Media button

Once you’ve placed your cursor on the line where you want your image to appear, click on the Add Media button to launch the media uploader interface, and then select the Insert Media option from the list of actions in the left side of the media uploader window.

[pic]

Step 3 – Add or Select Your Image

You can add or select the image you want to add to your page or post by choosing from either of the following options in the center of the media uploader window:

• Upload Files: Upload the image you want to use from your computer by dragging it into the upload area.

• Media Library: Select from any previously uploaded images in the media library by clicking on the one you wish to add to your page or post.

[pic]

Once you have selected or uploaded the image you want to add, You will see a checkbox next to the thumbnail confirming your selection, and see information about it displayed in the Attachment Details pane on the right hand side of the media uploader interface.

Step 4 – Attachment Details

[pic]

The Attachment Details pane displays a small un-cropped thumbnail of the image, as well as important information such as the filename, date uploaded, and image dimensions in pixels.

There are also action links that allow you to Edit Image, which takes you to the Edit Image page, or to Delete Permanently to remove the image from your site.

In addition, you can edit the following media information:

• Title: The title of this media.

• Caption: The caption for this image. The text you enter here will be displayed below the image.

• Alternate Text: Enter the Alt text for the image, e.g. “The Mona Lisa” to describe the media.

• Description: A description for this particular media.

For more information on these media settings, see the Edit Media page.

Step 5 – Attachment Display Settings

[pic]

The Attachment Display Settings pane controls how the image is displayed when viewed on the site.

You have options to set how you would like the image aligned on the page (in relation to the text and margins) and what the link behavior of the image will be, In addition you can set what size image you would like to display on your page.

Image Alignment

The Alignment setting allows you to determine where you would like the image to appear in your content area and how it interacts with any text on the page. You have the following image alignment options to choose from:

• Left: Aligns the image on the left hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the right.

• Right: Aligns the image on the right hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the left.

• Center: Aligns the image to the center of the page, with no text displayed around it.

• None: Inserts the image in to the page with no alignment

|[pic] |

|Top row: Left and Right alignments. Bottom row: Center and "None" alignments |

Image Link

The Link To settings determine the URL/web address to which the image will be linked when clicked on by a visitor to your site. You can specify the following image link settings:

• Attachment Page: Links your inserted image to its WordPress media attachment page.

• Media File: Links your inserted image directly to the original, full-size version of the file.

• Custom URL: Allows you to set a custom link URL for your inserted image to link to when clicked.

• None: This setting will remove the link completely, rendering the image “un-clickable”.

Image Size

The Size settings determine the size of the image you are adding to your site. By default WordPress creates a range of four image size for you to choose from:

• Thumbnail: Displays a small thumbnail-sized version of your image on the page/post. Note, by default the Thumbnail size is a square, so some cropping of your original image may occur.

• Medium: Displays a medium-sized version of your image on the page/post. This is a good size to use with Left/Right alignments, as it leaves sufficient space for legible text to either side.

• Large: Displays a large-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space.

• Full Size: Displays a full-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space. If your original image is larger than this column width, the full size of the image may not be displayed.

|[pic] |

|Thumbnail, Medium, and Large image sizes (Image Alignment: Left) |

You can visit the Settings>Media section of your WordPress dashboard to customize the above image sizes.

Step 5 – Inserting the image

[pic]

Once you have determined your image settings, click on the blue Insert into post or Insert into page button, to add the image to your page or post. After the image uploader window closes, you will see the image in the text editor window, including a preview of the alignment of the image, if you have specified an image alignment.

At any time, you can edit the image settings by clicking on the Edit Image button in the upper left hand corner. You can remove the image from your page/post by clicking on the Remove Image button.

Resources

• Using Image and File Attachments

• Embeds - Inserting different medias.

• Photoblogs and Galleries - Using WordPress as photoalbum, photoblog etc

F.A.Q.s

• The image uploader won't let me change the image size to small, medium, or large. It only allows full size.

o Go to dashboard, settings, media and put in the max sizes you want for images. If these are set to zero, the option to change size in the uploader is greyed out.

• I have the radio option of FULL SIZE but all others are greyed out. I checked out that link but nothing in there has worked for me. I'm still without the use of image resizing. I can just give the image parameters manually but it's nice to have the option to do so with a single click.

o If you want to resize images, you need something on your server to be able to actually do that. Neither of these are specific to WP, mind you.

I admit, the little note on the codex about Resizing images is a little helpless. But basically yes, you need some image handler on your server to do that.

Edit: I have both on my server, but I prefer ImageMagick

• Size of images to load onto the website?

o Personally, I would use no larger than 600px wide...maybe even smaller and if you want to provide larger images make them thumbnails that are clickable to larger images. I don't make the images clickable to larger sizes, but I could easily do that if I wanted.

Links to forums for more help

ADDENDUMS

Addendum (1)

GIF, JPG and PNG – What’s the Difference?

James George

Published May 1, 2011

This article was written in 2011 and remains one of our most popular posts. If you’re keen to learn more about the use of images on the web, you may find this recent article on lorempixel of great interest.

When working with digital image files, it is essential to know the differences between each one, so you know when to use them. The main difference between files formats is how they are used when designing for the web and the outcome they produce. One produces highly optimized simple graphics, another is used for most images, and the third option is used for complex graphics, gradients and transparency.

Files Used on the Web

Gif, jpg and PNG files are all three used for the web.  The difference is the resulting image. Each one has its place for use on websites, and jpeg images can also be used in print files as well, although they need to be print resolution. Web images are typically 72 dpi, making them load quickly.

Gif

Gif images are great for creating very low resolution files for your website. They support transparency, which is great. Transparency allows you to place the gif over any color background or even photos, and you won’t see a border or background in the image. All you will see is the icon.  You typically use a gif for simple logos, icons, or symbols. Using a gif for photos is not recommended, because gifs are limited to 256 colors. In some cases you can use even less. The less colors that are in your image, the smaller your file size will be. Gif files also support a feature called interlacing, which preloads the graphic. It starts out blurry and becomes focused and crisp when it is finished downloading. This makes the transition for your viewer easier, and they don’t have to wait as long to see logos or icons on your site. Gifs also support animation. Gifs don’t support the level of animation that Flash files do, but it still allows you to add movement or transitions to your site, without a lot of programming or coding. More advanced web designers and developers tend to use jQuery to create animated effects. Gif files are also compressed, which gives them a small file size.

You mainly use a gif file format for logos and graphics with solid areas of color. You wouldn’t use a photographic image, or a graphic with gradients.

Dither

Transparency Dither is a method to disperse pixels, so that a gif can transition into its background easier. This was before PNG, which supports levels of opacity. You can choose to have no dither, Diffusion, Pattern, or Noise Transparency dither. Diffusion spreads out the edge pixels in order to let some of the background sow through. Pattern does the same thing, but uses a repeating pattern around the edges. Noise is straightforward and uses noise around the edges to feather the edge pixels.

DIffusion:

[pic]

 

Pattern:

[pic]

 

Noise:

[pic]

Jpeg

Jpeg files can be relatively small in size, but they still look crisp and beautiful. Jpegs support up to 16.7 million colors, which makes them the right choice for complex images and photographs. With the wide range of colors, you can have beautiful imagery without a bulky file size. With new responsive techniques, you can also have flexible images without large loading times. There are also progressive jpegs, which preload similar to interlaced gifs. They start out blurry, but come into focus as their information loads.

PNG

PNG files were developed to build upon the purpose of gifs. Designers need the ability to incorporate low-resolution images that load quickly but also look great, too. This is where PNG comes in. PNG-8 does not support transparency, but PNG-24 and PNG-32 do. PNG transparency is different from Gif transparency, because they can have different levels of transparency. Gifs are either transparent or opaque. Below is a comparison of how a gif will look if the edges of the image are blurred or they are semi transparent:

[pic]

You will notice that the edges are rough and pixelated. Gifs are best for crisp edged graphics. Below is the same file, but saved as a png-24:

[pic]

You will notice in the PNG file above that the edges are blurred or feathered, just as we had set it up in our Photoshop file. This will allow for some nice effects for websites and images.

PNG files are lossless, which means that they do not lose quality during editing. This is unlike jpegs, where they lose quality. PNG files tend to be larger than jpegs, because they contain more information, and are lossless. PNG files do not support animation. For this purpose, a gif should be used.

If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like Vector Graphics From Scratch.

Comments on this article are closed. Have a question about web graphics? Why not ask it on our forums?

Addendum (2)

Image File Formats

by Ross Shannon

Choosing the right file format to save your images in is of vital importance. There are three image formats in constant use on the net — GIF, JPG and PNG. Each is suited to a specific type of image, and matching your image to the correct format should result in a small, fast-loading graphic. Saving and exporting into these formats will require a decent image editor.

When choosing the format for your image, you should always be conscious of both the image’s quality and filesize.

GIF — Graphics Interchange Format

Compuserve’s 8-bit GIF format has long been the most popular on the Internet, mainly because of its small size. It is ideal for small navigational icons and simple diagrams and illustrations where accuracy is required, or graphics with large blocks of a single colour. The format is loss-less, meaning it does not get blurry or messy. GIFs use a simple technique called LZW compression to reduce the filesizes of images by finding repeated patterns of pixels, but this compression never degrades the image quality.

GIF files can be saved with a maximum of 256 colours. This makes it a poor format for photographic images. Because this can sometimes be tight, GIFs have the option to dither, and will mix pixels of two different available colours to create a suggestion of another colour.

GIFs can be animated, which is another reason they became so successful. Most animated banner ads are GIFs. You will need an animation program to make your own animations.

GIFs allow single-bit transparency, which means when you are creating your image, you can specify one colour to be transparent. This allows the background colours of the web page to show through the image.

GIFs can also be interlaced, which is a way of saving a graphic so that it loads progressively — first a blurry, low-detail version is loaded, and then successive layers of detail are added. This usually means a larger overall filesize, but it means that a version of the image gets placed onto the viewer’s screen much quicker, and so is beneficial in many situations, as it gives the impression of a speedier download.

GIFs (variously pronounced “gif” or “jif”) are a very good format for most of the graphics you’ll be using on your site, though PNGs below are better in many regards. Experimentation is the key to success.

GIF Examples

This first image is indicative of the optimum properties of a GIF image — small, low on colours, and containing large areas of continuous colour.

This is the same graphic, but the number of available colours has been reduced. The filesize is improved, but it doesn't look quite as smooth. To remedy this, we can add some dithering (which does add a bit to the filesize), to produce the image on the right. The loss of colours becomes less obvious, and the filesize overall is about half as big.

This is the same image again, but with the red background colour set to transparent. As you can see, the background of the page shows through, but the edges are jagged, as this image was not designed for this background colour.

Finally we have a rather rubbish animated GIF that I just knocked up in ten minutes. Hooray. This single GIF file simply contains many frames of animation, which your browser shuffles through.

JPEG — Joint Photographic Experts Group

The 16-bit JPEG format (usually written without the E), was designed with photographs in mind. It is capable of displaying millions of colours at once, without the need for dithering, allowing for the complex blend of hues that occur in photographic images.

JPGs use a complex compression algorithm, which can be applied on a sliding scale. Compression is achieved by ‘forgetting’ certain details about the image, which the JPG will then try to fill in later when it is being displayed. You can save a JPG with 0% compression for a perfect image with a large filesize; or with 80% compression for a small but noticeably degraded image. In practical use, a compression setting of about 60% will result in the optimum balance of quality and filesize, without letting the lossy compression do too much damage.

Though JPGs can be interlaced, they lack many of the other special abilities of GIFs, like animation and transparency; but as I said, they really are only for photos. Simple graphics with large blocks of colour should not be saved as JPGs because the edges get all smudgy.

The » JPEG (“jay-peg”) format is likely to be replaced at some point in the future by the updated JPEG2000 format.

JPEG Examples

|[pic] |[pic] |

|0% compression |60% compression |

|[pic] |[pic] |

|80% compression |99% compression |

PNG — Portable Network Graphics

PNG is a format » invented specifically for the web in response to a licensing scheme introduced which meant the creators of any software that supported the GIF format had to pay five thousand dollars for the privilege (this tax has since expired). While they were at it however, the creators of PNG (“ping”) went ahead and created a format superior to GIF in almost every way.

One version of the format, PNG-8, is similar to the GIF format. It can be saved with a maximum of 256 colours and supports 1-bit transparency. Filesizes when saved in a capable image editor like FireWorks will be noticeably smaller than the GIF counterpart, as PNGs save their colour data more efficiently.

PNG-24 is another flavour of PNG, with 24-bit colour support, allowing ranges of colour akin to a high colour JPG. PNG-24 is in no way a replacement format for JPG, however, because it is a loss-less compression format. This means that filesizes can be rather big against a comparable JPG.

PNG’s main draw are alpha-channels. Instead of the rudimentary transparency options in other formats (where a pixel is either transparent or opaque), an alpha channel can specify the opacity of any pixel from 0–255, where 0 is fully transparent and 255 is fully opaque. This allows you to create a graphic that can be placed on top of any background colour and will retain a translucent effect, with the background showing through the pixels that are not opaque.

The problem with this — and there had to be one — is that IE6 doesn’t support alpha-channels. Once a new version of IE comes out with this vital support, you should see the effect springing up on trendy designers’ sites across the web.

And what of animation? PNG can be made into multi-image files through the MNG extension of the format, but browser support is patchy for this format. Stick with GIFs for your animations.

Where does all this leave the PNG format? It may take a good number of years to find widespread usage, but as it stands at the moment using PNG-8 in place of static GIFs will lower the filesizes of your images. There’s no reason not to adopt them now as the format you create your site icons with.

Addendum (3)

Creating a Favicon

A favicon (short for "favorites icon") is an icon associated with a website or webpage intended to be used when you bookmark the web page. Web browsers use them in the URL bar, on tabs, and elsewhere to help identify a website visually.

A favicon is typically a graphic 16 x 16 pixels square and is saved as favicon.ico in the root directory of your server. You can use a favicon with any WordPress blog on a web server that allows access to the root directories.

A favicon can be created using any graphics/image editing software, such as GIMP, that allows the saving of .ico files. There are also online services that will allow you to create a favicon for free.

The image should be clear and is usually designed to match your blog's image and/or content, a big task for something so small.

To prepare the image to be saved as favicon.ico:

1. By cropping or adding space around the image, make the image square.

2. Resize the image to 16 x 16 pixels.

3. Save the file as favicon.ico.

If you're using an online service to create your favicon, such as (creates 24bit favicon.ico with a transparent background, favicon.co.uk or Dynamic Drive, follow the instructions provided by the site and then download the favicon.ico image to your computer.

Installing a Favicon in WordPress

If there is already an old favicon.ico file in your current theme’s main folder, delete it using FTP Clients.

1. With an FTP Client, upload the new favicon.ico file into your current theme’s main folder.

2. Upload another copy of your favicon.ico file to the main directory of your site (ie. ). This will display the favicon in your subscribers’ feedreaders.

In order for your favicon to show up in some older browsers, you will need to edit your page header. Remember, the best way to edit your theme's files is via a Child Theme. For the purpose of the following instructions you will need to create a copy of your parent theme's header.php file in your child theme.

1. Go to your WordPress Administration Panel.

2. Click on Appearance.

3. Click on Theme Editor.

4. Select the file called Header or header.php to edit the file.

5. Search for the line of code that begins with ................
................

Online Preview   Download