Belchamp Walter logo

Image handling using the W3 Framework

Seeing as I am developing a new template for "Friends" pages I may well adapt it so that I can use it for the sub-pages on the Parish Council site.

Creating a page for the Bells of St. Mary, based on the information that I already had on my main website, I noticed that the images were not rendering in a responsive manner.

St Mary's Church, Belchamp Walter

I have learnt that to use the Framework to display images properly I need to make sure that I place the images in a correctly configured container. I may find that I still have not got this totally under control but that it the whole purpose of this exercisse. I might actually learn something!

This page has the image code that I think is correct. I chose an image at randon for those that are related to the Church. I need to fully diseminate the different ways that the iamages re-size themselves.

For example, the image on the "Bells" pages should re-size in a different way to the one on this page.

Notes

Sections within the page probably need their own containers. However, the method I use on my main site pages still seems to work. This is what I am using here.

Awesome Fonts

When playing around with this page, in the aim of making it a new template, I discovered the Awesome Fonts.

There are all sorts of icons from the Font Awesome 5 extension. These seem to be integrated into the W3 framework.
- an ambulance

There is no real hurry

The "Friends" intiative is not going to do anything important any time in the near future. Developing this template for the Parish Council site is probably more relevant.

I think that it is more important to get as much as can uploaded to my own website where I can review how it works. Those visiting the Parish Council site and the "friends" pages are few and far between. Things such as the Social buttons are not, yet, implemented properly (in fact I am not sure how they will be!).

In the interim the prototype "Friends" pages are hosted on my main website - while this could be confusing I am doing this in case that the Parish Council version is accessed by those that I know are not going to dig too deep.

Top of page - I am not sure if I really need this as the emphasis is for a mobile touch screen rendering, the user will scroll to the top using touch.

External Sources