Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2013-09-25 20:28:33

aslsw66
Member
From: Canberra, Australia
Registered: 2004-08-04
Posts: 342
Website

My personal site

After spending time off and on working on other sites, I finally figured I should get around to doing something about my own.

TheSamaras

As you can see, I built the design around Twitter’s Bootstrap mainly for ease of development. Hopefully, it doesn’t look and feel like the classic ‘bootstrapped’ website.

The carousel at the top of the homepage showcases 5 random photos, while the gallery towards the bottom of the homepage showcases 10 random thumbnails that simply link through to my Flickr account. I also use images for linking to some articles. I’ve been using Flickr for many years to store my best photos ‘in the cloud’ and only use Textpattern’s image capabilities to feature selected photos in this way. I’ve figured out a good image workflow using bot_image_upload and ebl_image_edit.

Where I can identify a location, I use a custom field to hold the combined coordinates of the location and then use these to display a Google map on the article page.

Some things still to be done:

  • show all article locations on a single map,
  • allow the map on the trip articles to show a start and end point with a line between them,
  • modify zem_contact_reborn to allow for classes to be passed into individual elements. The plugin hard-codes its own classes, but I want to use the Bootstrap ones,
  • add a star rating system to my ‘review’ articles,
  • convert my map coding into a full-blown plugin – 50% done (yes, I know there are some out there already but I want to achieve maximum flexibility), and
  • convert the design to mobile-friendly Bootstrap (Bootstrap 3 if I have the time and the courage).

As always, I would really welcome any ideas, suggestions, corrections or other comments.

PS. Earlier versions of Internet Explorer won’t enjoy the experience!

Offline

#2 2013-09-25 21:48:00

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 9,776
Website

Re: My personal site

Nice stuff, Anura. Easy to navigate, and some cracking photos. Your last.fm feed seems to be doubling up the artist/album in the Listening list, btw. Hope it’s not one of my plugins misbehaving!

If you’re interested, I have a hacked version of zem_contact_reborn which adds a class attribute to all tags so you can override the default class names. It also adds a truckload of HTML 5 input types and relevant attributes to control them. Oh, and gets rid of the separate zem_contact_lang plugin in favour of a Textpack.

It could always do with some willing testers and, if it works well enough, I might propose it to Ruud as the basis of the next version. Let me know if you’d like a copy to play with.

Last edited by Bloke (2013-09-25 21:48:44)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#3 2013-09-26 07:58:40

aslsw66
Member
From: Canberra, Australia
Registered: 2004-08-04
Posts: 342
Website

Re: My personal site

Thanks for the comments Stef. It’s interesting that although I use Flickr as storage I really don’t spend much time going back to my photos, but ‘curating’ them to showcase some for my site has made me realise that some of them are pretty good! On to Textpattern stuff …

The duplication in the last.fm display is actually coming from the feed. It might be because I have been experimenting with live scrobbling from my phone and didn’t turn off scrobbling from iTunes as well. Something to look into but definitely not anything to do with your plugin.

I would be happy to try out your hacked version of zem_contact_reborn. I have only had one contact through the contact page (from a friend who already knows how to get hold of me) so if it breaks somewhere I don’t think I will be missing too much.

The final thing I need to do with my site is turn on comments. I’ve been reluctant to do so till now as I want to explore what are the best practices used by others on the forum. I really want my friends to be able to keep track of me (I’m away from Australia for a couple of years) and interact through the comments without (1) making it too onerous for them and (2) making it too easy for the spammers out there.

Offline

#4 2013-09-26 19:29:09

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 1,716
Website

Re: My personal site

Very nice site. I would love to see an how-to article on how you created your site… perhaps in the TxPMag

PS as you say, “Hey, it’s 2013” … comments are so yesterday.


…. texted postive

Offline

#5 2013-09-27 15:34:17

jpdupont
Member
From: Virton (BE)
Registered: 2004-10-01
Posts: 752
Website

Re: My personal site

Nice !
On Firefox, I don’t see the icon’s. (It was OK the first time I see your site, yesterday ?).
No problem on Chrome, IE10.

Offline

#6 2013-09-27 15:40:32

aslsw66
Member
From: Canberra, Australia
Registered: 2004-08-04
Posts: 342
Website

Re: My personal site

Yeah, I get that every now and then on FF at work, but never at home. Sometimes they come back after a couple of refreshes, but I really have no idea what would be going on – possibly some debugging if/when I get the time and care enough about it.

I know that one of the risks with using Font Awesome and Google fonts is that the files are stored elsewhere so the site really relies on those resources being accessible all of the time.

Offline

#7 2013-10-01 10:11:35

rubelharry
New Member
Registered: 2013-10-01
Posts: 1

Re: My personal site

HI Anura Your site is really eyescatchy , You can do some more seo work to get traffice. and one more thing is that your time load is very high. reduce it for user experience.

Offline

#8 2013-10-01 10:54:35

aslsw66
Member
From: Canberra, Australia
Registered: 2004-08-04
Posts: 342
Website

Re: My personal site

Thanks for the feedback.

On the SEO front, frankly I’m not really fussed – this is really just for me to share with friends and family, particularly while I’m overseas, and if I drive too much traffic to the site then my hosting provider will start charging me more! I’m on a really cheap hosting plan but they provide great service so I’m happy enough for now.

The issue of loading time is a tough one, because there are just so many factors at play:

  • as I say, my hosting plan is pretty cheap so my site is sitting on a shared server somewhere,
  • as I use Bootstrap, there is about 424kb of overhead already (including jQuery and font awesome),
  • I also know that my approach to using pages and forms in Textpattern drives a few database queries, but
  • the real killer is the images. The six images being pulled in for the carousel at the top of the homepage total over 1,000kb.

At the moment, the carousel images all have to load with the page. What I would prefer to do is have only the first image load with the others loading in the background after the page has loaded. But my coding skills really aren’t up to that yet!

Thanks again for the feedback, it has certainly given my some things to think about in terms of tweaking for performance.

Offline

#9 2013-10-01 13:15:44

Gocom
Plugin Author
From: Helsinki, Finland
Registered: 2006-07-14
Posts: 4,533
Website

Re: My personal site

aslsw66 wrote:

as I use Bootstrap, there is about 424kb of overhead already

Bootstrap is component driven. You can build a version with just the components you need.

jQuery

<script src="http://code.jquery.com/jquery.js"></script>

That’s not the file you want to link to. That isn’t a minified production version, and its moving. That file is always the latest release version; your scripts depending on jQuery may unexpectedly break as the file changes over time. Change that to:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

One extra request:

<link href='http://fonts.googleapis.com/css?family=PT+Serif|Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

You can merge those into one:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=PT+Serif|Droid+Sans:400,700|Open+Sans">

That is if you both of those; I personally wouldn’t. Two stylistically similar sans typefaces, both meant for body content, normally do not go well together.

Last edited by Gocom (2013-10-01 13:16:34)

Offline

#10 2013-10-01 13:45:40

aslsw66
Member
From: Canberra, Australia
Registered: 2004-08-04
Posts: 342
Website

Re: My personal site

First things first – did I mention that I was lazy?

Bootstrap is component driven. You can build a version with just the components you need.

Good point. I took the lazy option when I designed the site to just use the full suite of Bootstrap components, so it might be time to go back and be more selective.

That’s not the file you want to link to … Change that to:

Thanks, that’s a great tip. Nothing seems to have broken (yet).

I personally wouldn’t. Two stylistically similar sans typefaces, both meant for body content, normally do not go well together.

Good advice, thanks again. Although they are different when used at the size and weighting of a heading, I found I could easily ditch one and condense this down.

Those were the easy fixes. When I changed to the CDN version of the core Bootstrap CSS files it completely breaks my site. The CSS file I have hosted says its version 2.3.2, the same version as the CDN version, but clearly something is different between the two (and I didn’t change the underlying Bootstrap files at all). I do want to squash all of these issues so I will spend some time tonight trying to see what the difference is.

All great advice.

Offline

Board footer

Powered by FluxBB