Horticultural Society Website

Showcase
1

Excited to show off my latest client website with you all!

Kelso Horticultural Society :tulip:

This website is for a small local society in Scotland who host two flower shows a year, run events and work with the community to provide support to those who are lonely.

All content, as of now on the site is still placeholder content as my client has not yet added their content to the site!

Image of the homepage on the website
Image of the homepage on the website1920Ă—1151 157 KB

Frontend :art:

This site was designed in Bootstrap Studio in Bootstrap 5, there is only 67 lines of custom CSS. This is mostly for some small tweaks to the CMS pages and animations on images. It uses a modified version of the Lux theme with all changes done in Bootstrap Studios theme editor.

Image of the gallery page on the website
Image of the gallery page on the website1920Ă—1159 180 KB

For the album pages, the slideshow uses a modified version of the default Bootstrap Carousel. Images in the slider, and in the full photo view below are compressed versions of the original photos, clicking on the default Lightbox gallery element loads the full sized images.

Backend :gear:

The website run on OctoberCMS, using the following plugins:

OctoberCMS uses PJAX for each page load, so only content that changes is loaded when the user clicks on a new page, this creates very fast load times. OctoberCMS, as always was really fast and easy to use to develop this site and definitely worth checking out.

All content is easily editable by my client, with no code needed on their end to add pages, change nav bars, add events and galleries and it all works seamlessly behind the scenes.

Colleague of images of the OctoberCMS backend
Colleague of images of the OctoberCMS backend1890Ă—1125 280 KB

Hosting :cloud:

The site is hosted with my business, BlackFox IT, on our custom load balanced, cloud operated hosting platform in the UK, and uses our custom CDN to serve the site assets quickly and efficiently. It is powered by 100% eco friendly energy sources which I think adds to the green fingered credentials to this site :green_heart:

Conclusion :wave:

I had lots of fun developing this site, there are only a few small things to touch up and my client is thrilled with it so far. I love using Bootstrap Studio to develop my sites with, its made site creation to live fast and fun. The more I use it, the more I learn and the less custom CSS I have started writing.

Feedback :ear:

I am happy for others comments, since this is now a finished client site that I have been paid for any feedback while appreciated, most likely will not be carried forward but I will still learn from! Any questions about the site, or CMS also feel free to ask me about!

3 Likes
2

Hello @catkin I love the website. I just had a question on how to link October CMS to my website. Also is it easy to do. I dabbled in java and python. Also HTML and CSS but never done used a faceless backend before.

3

Hello!

Always happy to talk and introduce people to October CMS, its a great pairing with Bootstrap and workflow.

So, by faceless backend I think you mean Headless CMS - October is not a headless CMS its more like WordPress in terms of some setup.

You will require web hosting, its not available on the hosting provided by BSS. It requires PHP 8, a mySQL server and preferably an Apache web server. Thankfully this is all quite standard across web hosts so you can easily find hosting. OctoberCMS has a very simple installer, you first create an account on octobercms.com, then download the installer from here. Simply upload this to your server, navigate to the /install.php file and it will guide you through the installation.

OctoberCMS is not free software, although you get one free licence with your account. Additional licences cost $19/year (you are able to pay for one year of updates but continue to use the software after this date, but you will not get security updates) more info on pricing here

OctoberCMS uses TWIG to template pages, even if you have limited knowledge of coding it is easy to understand and learn. Since you have used Python and JavaScript before, you will probably pick it up faster.

Below is a photo of the code used in the Layout file for the static pages:

static page code
static page code2438Ă—1290 170 KB

As you can see, its simple HTML with the TWIG code to add partials and events.

OctoberCMS splits your site into Layouts, the page layout, Partials, smaller areas of your site like the nav or header.

1 Like
4

The only constructive criticism I would offer is in regards to SEO on your home page - specifically the use of heading tags. A page should only ever have a single <h1> tag (which ideally contains the primary keywords for which you would like the page to rank.) Then you should use <h2> and <h3> tags to further clarify other parts of the content. Google likes to see <h1> through <h3> tags on a pages.

Your pages will make more sense to search engines when you follow this strategy, and you’ll likely rank higher as a result.

1 Like
5

Google have confirmed that they don’t mind multiple h1 headings on a page

6

As @richards has said, the H1 tags and alike are not as big an issue as they once were. It is still apparently recommended for screen readers, however.

The multiple H1 headings are actually because of how OctoberCMS is set up. Is has a WYSIWYG text editor, as part of the Static Pages plugin that lets you add headings in. While I can override the editor and setup my own headings and tell it to apply the “H1” class on a “p” tag instead, I didn’t feel it worthwhile (in terms of the budget I was working to) for this site to have this configured.The society is also incredibly small and this site will see less than 100 hits a month, most likely. So I applied only basic SEO optimizations, the client also declined my SEO add-on.

However, I do appreciate your feedback.

1 Like
7

I shouldn’t be surprised at this, but it is frustrating. Google is not the company they once were. They change their “rules” more often than a politician lies. They debut new services, get millions of people to depend on them, and then shut them down with virtually no warning. The release guides on how to do things, and then a year or two later, half the stuff is no longer applicable. Too many cooks in the kitchen, on a ship that has become too large to navigate.

2 Likes
8

Awesome showcase, thanks for sharing.

1 Like
9

I been looking at October CMS. Did you know you can create a routes.php for a Larvel plugin that will allow you to then access the assets folder if exported to the root folder from Bootstrap Studio ? You would not have to change all the links and scripts like you have to if you were adding the folder to the apps folder or even if you were using the |theme twig url method to get the assets from inside the theme folder. I mean, Bootstrap Studio already handles nicely the visibility of css and js per page and the paste linked feature handles the nav part so …save some steps and complex nature of these cms that want users to end up hand typing everything. The twig template convert can be handled after export but just started playing…

Also your homepage does not show image on your demo site on my mobile and possibly other sizes due to resize not working or something.

/* The file “/home/sites/22a/b/bc6fb0186a/kelso_html/storage/temp/resize/raw_1260_430_0_0_auto_img_be98884c00f67fa256177f89b5a874fa.jpg” does not exist */ :person_raising_hand:

Its a pretty advanced CMS, thanks for sharing

1 Like
10

Something I’ve done before is to create a SFTP connection to the assets folder of my theme and then export only the CSS, JS and Images to the folder. This means that I can quickly sync changes I make in Bootstrap Studio. However, I didn’t do that here since I didn’t need to do many changes to the CSS.

As for the missing image, the content is managed by my client and they must have removed this themselves. I am not in charge of the content. Not an issue with the image resize plugin.

Glad to have introduced you to this CMS!

11

I have a feeling, regarding heading tags anyway and putting aside Google’s algorithm’s getting better and focusing on user experience, that they worked with the web they have. So many people are making their own websites now, I saw one recently and all the content was in h3 tags. Why? because they picked a font size they wanted :joy:

I still sick with the basics though 1x H1 tag per page, and proper flow.

1 Like
12

I used October for while, it’s great, but I stepped back when the split happened, and now the dust has settled, I am really impressed with the improvements. Tailor looks great, so much of this we had to do with the Builder plugin before. So I am looking forward to getting back into it. Also thanks @catkin for linking to the install wizard, It looked like they had dropped that for a bit when the new version of October came out. Im glad it’s still an option. :smile:

13

Yeah, I was worried about when OctoberCMS became a paid subscription to use, but the pricing isn’t that bad at only $19/license for a year. And for that you’re definitely getting your money’s worth, development has been fast, bugs are fixed extremely quickly and support from the team has always been very good in the Discord server and over email. Considering there are more expensive CMS’s out there that offer less utility than October, it’s worth trying again.

I remember crying trying to get the builder plugin working to add features lol, tailor has been much better!

They now give you one free license when you sign up so that’s also useful!

They don’t shout about the installer anymore like they used to, and ask you install OctoberCMS over SSH but the install file does still work, it was made for V2 but just grabs the latest version. Using it does mean you have to manually configure a few extra options they added in V3

Feel free to message me if you ever want to chat more about it!

14

I loved it, used it for every site I built for October. Yeah I would rather use the wizard to install than SSH :joy:

Yeah I have a number of projects listed in my account still. I did cash in on the free license for my own site.

1 Like
15

Nice site @catkin , looks pretty well thought out.

1 Like
16

Nice site, very polished logo. :+1:
In the Edge browser, everything is fine, but in Chrome the fonts are very small (100% standard setting).
Green buttons don’t work on the …/event/Autumn-show page (links, of course, work)

1 Like
17

Thank you @hybataa,

The society has been using that logo for many years, as it turns out it’s actually some free clip art. I discovered this after the logo I was sent by the client was too small to be used on the site. The client also wanted it to be black and white, fortunately I found a free SVG version on another site that I ended up using in this design!

I am unable to replicate any issues with the fonts and I conduct testing using BrowserStack to make sure my sites are relatively bug free and consistent across all supported browsers. Since Edge is also chromium based I expect you may have changed the font sizing preference in Chrome.

I also am unsure which buttons you mention that does not work? I believe you could be mistaking the badges/tags for buttons.

18

Oops, I didn’t notice that my daughter was logged into Chrome. She was using smaller fonts. After changing the settings, everything is fine.
When I finish the my website , I will ask you for help, because for now it is resistant to browser settings…
I mean these tags because they are positioned in relation to the links so that they encourage people to click.
They are quite similar to the SEND button.
This is not a criticism, just a test by a random user.

1 Like
19

Not sure why, but I’m getting broken header image links on your Home, Photos and Event pages. Only the header image on the contact page is showing up.

https://kelsohorticulturalsociety.co.uk/resize/be98884c00f67fa256177f89b5a874fa-1

/* The file “/home/sites/22a/b/bc6fb0186a/kelso_html/storage/temp/resize/raw_1260_430_0_0_auto_img_be98884c00f67fa256177f89b5a874fa.jpg” does not exist */

image
image1197Ă—671 123 KB

20

Already responded to this