Get a bear

I am adding a link behind this image at the bottom of new sites. Admin’s can click on it to go to a special admin page.

This is especially for Divi based websites. I have revised my training for new websites, and am now running the training for Divi based sites within the template environment. My tutorial is based on an ordinary post or page layout. 

If you think it will be helpful, I can add a special private page and post to your website. These can only be seen by an administrator who is logged into the site, the general visitor cannot see them. 

The Admin page has a general description on the relevance of Sections, Rows and Columns; these are elements within the Divi Template. It also talks about the differences between pages and posts.  There is a section with links back to my training videos and other education resources. 

I also include a Template Post which has guidance built into it to help you to remember what to do. It is explained at a very detailed level, and I would anticipate it would help to ensure you cover every step.  I also include a guide built into the website as well. The guide includes screenshots. You can see a copy here. 

Access to this area is through a small bear in the footer of your website. Or for those of you with more adult rather than family content I can use a different icon. The point being you click on it when you are logged in and it takes you to the Admin page with all of the tips on. 

Continue reading Get a bearFacebooktwittergoogle_plusredditpinterestlinkedintumblrmail

Featured Image on Posts

This is only of interest to Divi template based websites. If you use this facility in your template and it is not Divi based, take care to check what it does before you accept using it. Different templates work in different ways.

Many of the latest Divi based designs I have been building for both Home-Starts and other groups have at least one news page, often more than one. For example a summary on the home page of the latest six news items is useful, and a fully featured news page as well for everything. 

Filtering News

You can do this on other sites, but within the Divi environment it is very easy to use:  you can have a fundraising page, and at the bottom of the page have a Fundraising blog. This is an automatic feature where any new posts which you categorise as Fundraising will appear there. They will also change over time as you add more content.

Continue reading Featured Image on PostsFacebooktwittergoogle_plusredditpinterestlinkedintumblrmail

Managing Images in WordPress

I frequently find that people have uploaded images from their phones and cameras directly into the image library and then added them to a page. What they have forgotten to do is optimise the image for the browser screen.

If I look at my camera, it takes image which are 5700px wide x 3800 px high and 10MB in size.

My monitor screen is a little higher definition than HD, so these images are too large for my browser, and if viewed on a phone which may be 700 pixels wide or less they are huge by comparison.

For most users these days, they view websites on mobile devices and may not be doing this over WiFi, so if they are downloading your web page from a 4G or 3G network, it is costing them money.

As a general guide your images need to be no bigger than 150kB in memory size, and no larger than the largest screen you are likely to come across. Today that is around 1200px for the web content space for most sites.  Many of the sites I have built, the content area is no wider than 1080px.  Continue reading Managing Images in WordPressFacebooktwittergoogle_plusredditpinterestlinkedintumblrmail

Mainly for the benefit of new users

How to quickly update your website

This item is largely for the benefit of new users to WordPress and the systems I have put together.  This assumes you are using a Divi based system. If you don’t know what that is, you probably are not using a website based on the Divi template. The steps are broadly the same for any system. But on the later Divi sites I have configured them to work in a specific way with a featured image.

Basics

Your site comprises fixed or page based content, this tends to remain static and can be located directly through the menu. This is the main part of your website. It tells the world; who you are and what you do in a generic sense.

There is another form of content called a Post. Posts are handled slightly differently. They tend to be transient in that they are time based, with the most recent being prominent and visible on your site, and the oldest buried in an old blog page in your site. However both are still in your site and can be located.  Continue reading Mainly for the benefit of new usersFacebooktwittergoogle_plusredditpinterestlinkedintumblrmail

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

Continue reading Handling Spreadsheets in a websiteFacebooktwittergoogle_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 websiteFacebooktwittergoogle_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 siteFacebooktwittergoogle_plusredditpinterestlinkedintumblrmail