Tags

Tags

Recently, I’ve been working on a new feature for my website: tags. On my wordpress blog I can automatically put my posts in a category, and I decided to implement this on my website as well. In this post I’ll explain how I did that. If you don’t know how to code, but would like to understand what I’m talking about, you should check out Codecadamy, Udacity, or Coursera and take an introductory coding class 🙂

The way in which I post my blog entries on my website is by filling in a form, where I enter the title and content for my post. For adding tags I had to, first of all, adapt the form to include an option of selecting which tags apply to the post. I decided to restrict my tag choice to Fashion, Food, Life-style, Technology, and Travelling, and added checkboxes for each of these categories. So when I write a post, I can check the checkboxes for the tags that apply to the post, which can vary between no tags or all of them. post form

Then I had to include a function in my Python code that gets the value of the checkbox, when it’s checked the tag will be added to the post.

get checkbox value

When it’s checked I want the tag to appear underneath the post, otherwise it shouldn’t show. So I had to make sure the checked tags actually appeared underneath the post by adding some lines to the HTML.

no if statements html

What this code does, is that it adds the value of each tag that has been acquired by the Python code above. So if I have checked the ‘fashion’ checkbox this line: fashion = self.request.get(‘fashion’) will find that the box has been checked and then this line:

p = Post(parent = blog_key(), subject = subject, content = content, password= password,
#TAGS:
fashion = fashion, food = food, lifestyle = lifestyle, technology = technology, travelling = travelling)

will put the value fashion = ‘Fashion’, and this will be then added to the post.

Of course, I didn’t just want the tag to appear, but I wanted it to look pretty too, so I styled it in CSS and added a tag icon in front of the tags which I found on Font awesome.

I tested my code on my local host and everything looked great. Unfortunately, this wasn’t exactly the case when I deployed my code. The problem was that for all my old posts (the ones I added without tags)  it showed the tag icon with None None None None None.. What happened was that my code was checking whether I had checked any checkboxes or not, but at the time I wrote those posts I didn’t have the checkboxes yet. So I figured the code was showing “None” to indicate that the checkboxes weren’t present. I solved this by creating a couple of if statements that checked whether there was a value for p.fashion at all. p.fashion will have the value ‘Fashion’ if the checkbox has been checked and it will have no value if the checkbox hasn’t been checked or if there wasn’t a checkbox at all. is tag true

You might say it would’ve been easier to just edit my old posts and add tags to them, but unfortunately it seems like you can’t edit old database entries with Google app engine. It’s a problem that I keep running into (when I restyled my website) so if someone has a solution for this, please let me know!

I managed to get it all working, so now I just had one other step to finish: get posts with a certain tag to appear on a page dedicated to that tag. For example, all posts that have the fashion tag should be on the fashion page as well as on the home page. I did this by creating an HTML page for each of the categories and also added these to the menu. Then on each of the pages I added code to make sure that all posts with the belonging tag appear on that page. This is the code for the fashion page:add post to right page

Specifically the line  {% if p.fashion %} checks whether the post has the fashion tag and if it does it should appear on this page.

I was quite happy with the result at this point, but I still wanted to somehow get my older posts without tags on these pages as well. One option, was just to copy the posts’ content into the HTML, but that isn’t a very elegant solution, and it makes the HTML quite lengthy. So I decided to make a horizontally scrolling bar with a picture of each old post belonging to that category, and linking that picture to the whole post. Which I did like this (of course the LINK TO PAGE should be an actual link and IMAGE OF POST an actual image):

horizontal html

horizontal css

And you can find the result at http://www.mereltheisen.com! I’d love to hear your opinion on this new feature, so let me know in a comment 🙂

Follow me on: BloglovinInstagramTwitter

Tips and tricks for making a website from scratch.

webtipsandtricks

Whoa the first term is really on a roll now. I’m mainly spending my time coding for my courses and trying to enjoy London now and then, but luckily I’ve found some time to write a new post. Since this blog started out as just a part of my project of building a website from scratch, I thought it might be interesting to share my experience of building a website with you and tell you what I learnt and give you tips about things that might come in handy if you would like to make a website yourself.

1. Use a good text/code editor
If you’ve never coded before you might not know at first how to save all of your files or you might just be using word, but a good code editor is key. I’m using Sublime and I’m really satisfied about how it works. The main pro to this editor is that it adds colour coding to your code that’s specific for the programming language you’re using. So it’s a lot easier to distinguish between different types of elements and thus makes it easier to read and edit your code. When coding a website you’ll mainly be writing HTML and CSS and I’d recommend saving those different types of files separately so the colour coding is different for the HTML and CSS parts.

2. Make sketches
Making sketches of how you want each page of your website to look like will help you organise your code. First of all, it will help you focus on what you need to do for each page. And second of all, it will prevent you from losing control over what you still need to do because you can compare what you already have to your sketches. Here is an example of a couple of sketches I made when coding my page:

IMG_0552

3. Use the web
I do think that the best way to learn coding is by doing it yourself. However, you don’t always need to reinvent how certain things are done. I made my website during the summer holidays so I had all the time in the world to figure out how to add different elements to my website. But looking back I do admit that I could have saved quite some time on a couple of things. For example, I made the social network buttons on the bottom of my page by saving each image separately, then uploading them to photobucket so I could add a link to each of them and they would be visible on my site. When I started on the new design of my website I came across font awesome. Font awesome is a font made up of all sorts of icons such as social network icons, which you can edit like any font. So it’s a lot easier to add and edit them than images of icons. If only I’d known about it before..

However, you do have to be careful when it comes to copying code from the Internet, because (especially in HTML and CSS) elements have specific names that you have to come up with yourself, and using someone else’s code might completely mess up parts of your code that were right before because this person used different names. The best way of using someone else’s code would be by figuring out how their code works and then re-writing that code into your own project with your project’s specific names.

4. Phone & tablet compatibility
When designing your website you have to keep in mind what devices you want your website to be viewed on. At first, I only checked whether my site looked good on a desktop, assuming that it would be fine on tablets and phones as well (bit naive..), and so when my site was done and I checked what it looked like on my phone I was surprised about how messed up it was. And I spend quite some time to fix it. So make sure you add code to make your website compatible for phone and tablet right from the beginning. This is the code I used to adapt my page for tablets:

Screen Shot 2014-10-25 at 20.36.43

5. Make notes
Every time I came across a problem on my website I made a note of that and also wrote down how I solved the problem in the end. I recommend doing this, because you will learn from these mistakes and if you have a similar problem later on you can use the solution you wrote down. You might not think this necessary, but trust me, you will forget how you coded certain elements and might find yourself solving a problem you did before.

I certainly learnt a lot while doing this project and I hope you find these tips helpful if you plan on designing a website yourself. Feel free to ask me any more questions you might have about making your own website or coding in general 🙂

XOXO
Merel

Follow me on: BloglovinInstagramTwitter

Website update #2

newdesign

It’s been quite a while since I last wrote a blog post, but I’ve got some pretty good reasons for that. First of all, I was busy moving to London (!!!) about which I’ll write more in my next post. And second, I was re-designing my website. I am very happy with the result and hope you like it too 🙂

The main thing I changed is the menu. First, I had a static menu that remained on the top of my site all the time, which looked like this:

oldmenu

Now I made a menu that can appear and disappear whenever the user wants. I did this through jQuery. jQuery is a Javascript library which amongst others makes it very easy to create animations on a web page. I never learnt jQuery but it’s very easy to understand what’s going on when you read the code. For example, in the code below I wrote the part that makes the menu pop out, the body part of the page you’re looking at move to the right and become opaque when you click on the words ‘MENU’. By using jQuery I made my website a lot more interactive and dynamic then it was before.

javascript

But there are other ways through which you can add animations to your website. When you click on any of the pages in the menu tab you’ll see the content fades in. I did this with Animate.css. This lets you add animations in your css code.

Another thing I added is the map on my contact page. I did this by following the steps on the google devlopers page about Google Maps: https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map.

Of course, re-designing my website brought along some problems, most of them were very small but the thing I struggled with a lot was the size of the images in my blog posts. Somehow all of the pictures I added in the blog posts I wrote were deformed. I tried adjusting my css and HTML but nothing seemed to solve my problem. I always post my posts on WordPress first because it’s very easy to add images there and copy the complete post in HTML and then add it to my site. But the thing is, when adding images in WordPress it stets a fixed size for your images, so when I then add it to my site the width and height are adjusted again by my sites’ css and then weird stuff happens. So I decided to post most of my posts again and get rid of the fixed widths and heights wordpress assigned to my images. That’s why it now seems as if I posted al lot blog posts today. I admit this wasn’t the solution I hoped for, but at least I managed to solve the problem.

Let me know what you think of my new design 🙂