Tag: programming

So this is a little more of the @keyboard stuff. I have started to migrate the websites I manage to WordPress.

Initially, I was using a platform called Django, which offers to make coding up a custom backend for a site easier (it uses the Python programming language, which I like using). It sounded like a good idea at the time, but last few years had very little time to advance what I had done, and WordPress has advanced — a lot. So time to make the change. One of the main things I am hoping is it makes it easier for others to add content to the sites (one thing I wouldn’t say I like doing).

The first site done is paulinefathers.org.au which is for the Australian Province of the Order of St. Paul the First Hermit.

The main thing was picking a base theme (I used Ultra) and making a child theme of it to customise and bring its appearance back to what it was before—than importing all the content. The last part was not much fun—a lot of copy and paste. However, I did take the chance to add a little extra content and use better images where possible.

Coding some customisation in PHP

There was also a little of trying to change things to be precisely how I wanted them. For example, trying to get the posts on the home page to line up in a perfect grid — I can be a bit OCD sometimes. So I started a plugin called “My Hacks”, into which I started putting bits of code. For this particular change, I needed to wrap the image in more HTML, which was easy enough once I found the right point to hook into. Here is the code.

function content_view_thumbnail_wrapper($html) {
	$matches = array();
	preg_match('/src="(.*?)"/', $html, $matches);
	return '<span class="pt-cv-thumbnail-outer-wrapper" style="--bg-image:url(' . $matches[1] . ');"><span class="pt-cv-thumbnail-inner-wrapper">' . $html . '</span></span>';
}
add_filter('pt_cv_field_thumbnail_image_html', 'content_view_thumbnail_wrapper', 10, 1);

A simple function that finds the thumbnail link of the <img> tag and then wraps it twice in two <span> tags. The last line then registers the function to hook in at the right moment.

Making it pretty with CSS

After just needed some CSS (what web-pages designs/style is described with and what I edited to customise the theme). I wrote this to go with it.

img.pt-cv-thumbnail {
  width:auto;
  max-height:166px;}

.pt-cv-href-thumbnail {
  width:100%;
  display: inline-block;
  padding:10px;
  border:1px solid #ddd;
  border-radius:5px;
  margin-bottom:10px;
  text-align:center;}

.pt-cv-thumbnail-outer-wrapper {
  width:100%;
  display: inline-block;
  background-size:cover;
  background-image:var(--bg-image);}
  
.pt-cv-thumbnail-inner-wrapper {
  backdrop-filter: blur(25px) opacity(0.7);
  width:100%;
  min-height:166px;
  line-height:166px;
  vertical-align: middle;
  display: inline-block;}
  
.pt-cv-thumbnail-outer-wrapper .pt-cv-thumbnail {
  margin-bottom:0px !important;}

This CSS limits the height of the thumbnail image, horizontally or vertically centres the thumbnail and fills the background with a blurred and faded version of the same thumbnail. I like the results. I also applied it to MonkAtKeyboard for if I don’t always use an image with the same height-to-width ratio.

There was more than this, about 100 lines of code, but I have not touched PHP for a while, so it was a little slower. The next site will need a lot more code written, but I will save that for another post.