Handling Spreadsheets in a website

(Introducing TablePress)

I am sure most of you are familiar with tables of data in WordPress sites and how to create one and populate it. I have recently been developing a Community Transport website which is nearing completion.  I have done one before, but this was some time ago.

One of the issues with publishing timetables is that the it can be done by simply publishing an image of the timetable. In most cases a JPG or PNG would do the job. It looks ok to people visiting the site, and if we also make a PDF version available as well so someone can download and print a high resolution version, it ticks all of the boxes.  Well not quite.

A computer cannot read an image

I frequently see people placing images on websites with text in them. That is fine for humans, but let’s remember that locally the website has a search function, and of course the whole internet works on search functions as well via Google, Bing and many others. But while a human can see what is in a picture, a computer cannot. You can only rely on what is in the Alt Text field for the image as a matching search string.

An image of a timetable is the same. So how do we get around this? One of the search considerations I made when approaching this new site was the ability for the public to search for their bus stop, or village. If you can search the site for your village, this will return when buses come through provided the time table is in text form.

Workflow

This is probably outside of the remit of a website developer, but one of the things I thought about was workflow from a maintenance perspective. Websites like plants die with no love and attention. So maintenance has to be really easy.

In this case the organisation had all of their timetables in Excel. I took the master sheet and generated PDF’s of each timetable. I then created additional sheets with just the timetable values in and exported each as a CSV (comma separated value) file. This is a very basic array of data that is commonly used in porting information from one system to another. The facility is built into Excel if you wish to use it.

Next I go into the website and load a plugin called TablePress. This allows me to import the CSV file and convert it back to a table. Once this is done, I can then add the table to a page. All remarkably easy and painless to do.

So if you want to add anything that is in a Excel spreadsheet into a WordPress website, take a look at TablePress. It is one of the best implementations I have come across, and in this case it takes out a lot of manual editing.

Catering for all

My final solution (provided I am not asked to change it) was to have a downloadable PDF timetable appropriately formatted. A text version of the same table, and a google map with the routes on.

For a short time you can see the website here, it should be published shortly.

http://wingrove-staging.uk/flittabus/

 

Facebooktwittergoogle_plusredditpinterestlinkedintumblrmail

Free images for your website

I have been making small numbers of premium Adobe stock images available to my client base. That offer is still open, if you want to take a look at the library which is huge with millions of images available.

I have also come across the following list of sites which offer free images. You need to check the details of each, but of the one or two I have looked at, they do look useful.  The article that led me to this was sitting in the dashboard of my WordPress site.    Continue reading Free images for your website

Facebooktwittergoogle_plusredditpinterestlinkedintumblrmail

Understanding how to use this site

I have added a page under the main menu that shows you how to use this site. There are currently over 200 news/ self help/ information items on the site with hints and tips and 34 fixed pages. I realised that some of you visiting here may not be aware they are there because they cannot be located directly through the main menu.

They are news posts that are accessed through the news and alerts page. Each is categorised according to the content in the page and it’s relevance.

To help you get as much information as possible from the information on this site please see this page for more an explanation of how the site works. How to use this site. 

For clients of Wingrove-Media

If you have recently been working with me, and I have developed a site for you, or I am hosting your site you can sign up to a monthly newsletter using the form below:

After clicking Subscribe please check your email account and confirm your subscription

Please note that if you are not recognised as a client you will not be added to the mailing list. Most general articles on this site are freely available to everyone, I have made this available in the same spirit of many other developers who wish to help people, if only in thanks to those that have helped me in the past when I first started. The purpose of the content in this site is primarily targeted at my client base who have a specific implementation or are using specific services to support their website and email. 

Please check the sidebar for a list of articles, or search the site for something using the methods described in the sidebar. There is a category cloud in the side bar which is used to categorise posts. You can use this to narrow down your search.

Facebooktwittergoogle_plusredditpinterestlinkedintumblrmail

Photographs – another strategy!

Image file size and WordPress websites

I have commented in the past, and also cover it in my video tutorial on images that it is important to reduce the size of the image before you place it on your site. The reason why this is important is because it will take up space in your hosting, and cause your site to load more slowly. As a broad guide the image size for most cases should be around 100KB or less, 200KB for a large image. I frequently find images that are 4MB or larger. These have been uploaded to sites pretty much straight from the camera.

The preferred way…

I still advocate; do your image processing outside of WordPress. Shrink the image down to roughly the target size which for images in the content area will be around 600 pixels wide. For images in a gallery, then 1024pixels wide.  Use compression to reduce the file size, then upload it.

If you have fat files on the site already…..

WordPress introduced some new facilities in image processing in May 2015. All sites have this built in.

To access it log into your site and look at the menu on the left and choose Media (Library) and check the last few things you uploaded. Make sure they are around 100KB or less unless they need to be larger.

If you find something that is straight off of a camera and over 400KB, then do the following. Editing images in WordPress

Look for Edit image button in the bottom left of the image.

Click on it.  Look for the Scale Image option in the top right.

scaling images

Change this to something close to your target size. Remember that there is no value in having an image 4000 pixels wide if the screen space in the content area of your site is only 600 pixels. It is as simple as that.

Next change the X value (first dimension) the second one will follow to maintain the aspect ratio of the image.

Then click on Scale. A copy of your image will be created in WordPress to your settings.  It is automatically saved* (*skip down to the bottom of these notes learn about some other things you can do at this stage).

Close the window using the small x in the top right of the window.  At this stage, the original large image is still on the server. But the smaller image is now available to you for adding to pages. So half of the problem has been solved.

You can always restore it back again by going back to view the image in the image library and selecting edit. You will see a drop down which says “RESTORE IMAGE ORIGINAL SIZE”.

BUT…..

The settings built into WordPress are quite aggressive. It really depends on your images and what is in them whether this works for you or not. I generally find that any image manipulation on the server yields a smaller file (good) but the image is soft (less detailed … bad).  So use with care. This is why I think it is best to do this work outside of WordPress before they are uploaded.

Other things you can do in WordPress

While in the image editor, you can also do the following within WordPress.

  • Rotate the image clockwise or anti-clockwise
  • Flip the image horizontally or vertically
  • Re-crop the image

50% of the problem solved!

It appears that these actions create another copy of the image. I am pretty sure that there is a course of action you can take which will remove the original. While experimenting and writing this article, I could not reproduce the key/ screen sequence. But I am sure I have done it in the past.

If you are trying to scale down a large file accidentally loaded on the site, then the last step is remove the original after you have created a copy. If I can reproduce those steps, I will come back and edit this. It is however worth resizing images as this will save bandwidth at the server and to the client. Remember mobile users pay per MByte.

 

 

Facebooktwittergoogle_plusredditpinterestlinkedintumblrmail

Take care removing things from your site!

I dealt with a situation yesterday where someone needed to remove a sponsors logo from the footer of their site because they were no longer receiving sponsorship from the organisation. They were not sure how to do it, so they located the image in the media library and deleted it.  It solved the problem of removing the image from the bottom of the site, but created a new one. The code was still there, and a little symbol appeared along with the text “footer-logo” next to it.

I have not generally given information out about the footers. There is a reason for this; it generally seldom changes, and in most cases it is specially written code rather than created through the Widget menu option under Appearance. So it is not easy to edit, and with current security running on most of the sites, you cannot edit it anyway without compromising the security.

So if you need a footer changed let me know and I will change it for you. Continue reading Take care removing things from your site!

Facebooktwittergoogle_plusredditpinterestlinkedintumblrmail

Using Images on your site

The following is covered in one of my video tutorials. Check video tutorial 7 for more details.

Some people are uploading images to their sites straight off of the camera or iphone. Firstly, well done for adding visual content to your sites. This is absolutely the right thing to do. However be aware of the following limitations and the impact they can have on the hosting and on your users.

An image displayed on your website is limited in size to the space available for it. Generally I advise 610 pixels wide unless it is in a gallery, then it can be larger so 1024 pixels wide might be ok. This means you need to scale down the size of your image before it is displayed on your site.

Why?

The website is set up to display an image in the available space on the page or in the gallery. If the image is 5000 pixels wide, it is reduced to 600 pixels wide in the browsers rendition of your website. So there is no value in sending a 5000 pixel wide image for a space that is only 600 pixels wide. (A pixel is a picture element or small dot that can represent one of 24 million colours, the screen you are looking at has millions of small dots). Continue reading Using Images on your site

Facebooktwittergoogle_plusredditpinterestlinkedintumblrmail

Asking your visitors to comment on your site

I completed a Home-Start site this week for Home-Start Bracknell Forest. One of the requests for content was quite unusual compared to the 100+ other charity sites that I have built over the past 3 years.

This group had an old site that I replaced. I was asked to add a feedback page, so they could gather comments from those people that came past the website on their views about the website.

I have used a function that is built into all WordPress websites where you can invite comments on articles (posts and pages). I have turned it on at the bottom of this page so you can see an example and make a comment. You can do this on your site as well (and turn it off again).  But you need to be aware of what might happen.

Catering for the Bots

A growing problem is Form Blasting. This seems to be a relatively new tool in the world of the hackers and fringe groups who use computers to post adverts and links into forms. I have seen several examples over the past month where those that use Form Blasting advertise the fact in one of the forms that is submitted from your website. You pay say £150 and they will place your advert for knock off Gucci bags on 10,000 websites. Continue reading Asking your visitors to comment on your site

Facebooktwittergoogle_plusredditpinterestlinkedintumblrmail

Highlighting a quote on your site

Sometimes there is a need to highlight a message or piece of information on your site, these may be quotes extracted from the text or something that you want to visually stand out. There is a double quote icon on your editing screen. If you start a new paragraph and then apply the (double quote) icon to that text it will look similar to this.

Do all crabs thing humans walk sideways?

The style applied will depend on what master template is used on your website, so it will not look precisely like this unless you are using the WordPress TwentyFifteen template. Continue reading Highlighting a quote on your site

Facebooktwittergoogle_plusredditpinterestlinkedintumblrmail

Collapsing Posts

Editing Tips

Ideally your News page should appear as a series of short posts listed in date order. Depending on how your site is set up these posts may automatically collapse into a shorter article with the text Continue Reading at the end, or the full post is presented.

You should bear in mind that not everyone will want to read everything on your site, and to help them choose what to read it is good practice to introduce a Post with a summary at the start and then insert the Continue Reading attribute in the editor after the introductory paragraph(s). As a very rough guide ensure it collapses down to half a screen.

Here I have inserted an “Insert More Reading Tag” to reduce the length of this post. Continue reading Collapsing Posts

Facebooktwittergoogle_plusredditpinterestlinkedintumblrmail

Manipulating the News Timeline

Editing Tips

Most of you have sites with a News page. This is the basic blog model where you can quickly go into your site and create a Post (news item) which goes to the news page, and if supported the news item is also notified through the sidebar on your site. You did not need to tell the post where to go.

The benefit of this method of propagating news is that it is all pretty much automatic and very quick and easy to do. Each new news item goes to the top of the page with the others moving down. Continue reading Manipulating the News Timeline

Facebooktwittergoogle_plusredditpinterestlinkedintumblrmail