Jun 29

I’m ExpressionEngine 1.6 powered now!

2007 at 10.16 am posted by Veerle

Finally I found the time to update to the new version of ExpressionEngine. This was actually done in an instant really. The only thing you need is full concentration. Not sure if you’ve noticed this lately, but I’ve added a banner to Layers magazine at the bottom of all my Photoshop-Illustrator articles. This appears automatically. It didn’t took me too long to figure out and implement this in ExpressionEngine. This is how…

Analyze what I need

In my templates I have a template group which is named "includes". In this group I store the header, footer, sidebar, flickr thumbs etc. Actually all repetitive components of my blog. If I want them to appear on a certain template I just have to add the EE "include" tag and I'm done. So I figured maybe I can do the same thing for the banner, but have it only appear on the articles that belong to the Photoshop-Illustrator category. This way it automatically shows up on the related articles, just where I want it to appear.

Implement in a second (well OK, almost)

Here is what I did. I created a template called "sponsor" in the template group "includes". In this template I pasted my static XHTML code and I gave it the proper styling via my CSS stylesheet. Then I added the EE "include embed" tag in my "comments" template. This template is the one that is loaded here. It's the article page with the comments below. At the bottom of my article code I added this simple line of code:

ExpressionEngine code

I'm using the variable pair 'categories' for this. Now that I can use these tags, the only thing I need to do is adding a conditional variable to make sure this banner appears only in articles that belong to the category 'Photoshop-Illustrator'. In this code I'm referring to the ID of this category. You can find this if you go to Admin > Weblog Administration > Category Management.

About Layers magazine

I'm going to write a 4 pages article for Layers magazine that will be out somewhere in the Fall. Even online you'll find a taste of what the magazine has to offer.


22served

gravatar

1

permalink this comment Neil Bradley Fri Jun 29, 2007 at 12.20 pm

Hey Veerle,
Informative as ever. That could be really useful for displaying other related sections of the site too.

Have you also tried the Multi Site Manager as well? I’m looking at implementing this for 3 of my sites.


gravatar

2

permalink this comment Deron Fri Jun 29, 2007 at 04.18 pm

Thanks for the quick tutorial Veerle. I’m a die hard EE user and I always love reading articles on EE like this.


gravatar

3

permalink this comment Vanni Fri Jun 29, 2007 at 04.36 pm

Great timing ...I was just thinking about updating to 1.6 myself, but was wondering if it would a lot of time. And you just answered that concern. So will do the update this afternoon.
(p.s. Do you have any insights on adding images to an entry in such a way that the person adding the image doesn’t have to do anything to format it? I was wanting to have an art_image field for articles and automagically format it).


gravatar

4

permalink this comment Neil Bradley Fri Jun 29, 2007 at 05.22 pm

Hey Vanni,
I’ve had a little look into the formatting of images myself. As far as I can tell you create your custom field {art_image} and then add this to the template that will display the image.

You could then wrap the field in a div and then sprinkle some CSS love to it which would change the appearance of the image and also display it where you intend on the page - so perhaps a nice border etc.


gravatar

5

permalink this comment ZenBug Fri Jun 29, 2007 at 06.14 pm

If I want them to appear on a certain template I just have to add the EE “include” tag and I’m done.

Do you mean the Embed tag?


gravatar

6

permalink this comment Thijs Fri Jun 29, 2007 at 06.45 pm

Wow, it’s unbelievable! You could write about one of the most essential and most widely used features of computer languages like a if-statement as if it were the next big thing.


gravatar

7

permalink this comment Deron Fri Jun 29, 2007 at 07.27 pm

Vanni:

Neil is right, it’s pretty easy to do.  To add to what Neil said, you could create a custom field called {art_image}, then in your template where you want the image to show up, you could do this:


<img src="{art_image}" alt="{alt}" title="{alt}" width="100" height="100" />

This is what I do, and I actually take it a little further and add another parameter to my img tag in the html for the “alt” and “title”.  I simply just add one more custom field called {alt} and it’s that simple. 

Hope that helps.


gravatar

8

permalink this comment vanni Fri Jun 29, 2007 at 07.53 pm

@Deron and Neil - Many thanks! Very helpful and timely.
one more last bit ... do i need to add a conditional for when no image has been added.
PS Veerle and others. I have been dabbling with EE for two years now. But with this latest try I am really getting into it! Thanks to your helpful posts on EE and to your reader’s advice. cheers all…


gravatar

9

permalink this comment Michiel Sat Jun 30, 2007 at 06.33 am

Hey Veerle,
Welcome to the club,
i am a long time user of EE and it can bend, bend and bend even more it still do what you want.. it’s a great system and hope they keep improving it.


gravatar

10

permalink this comment Veerle Sat Jun 30, 2007 at 10.24 am

Neil Bradley said:

Have you also tried the Multi Site Manager as well?

No not yet, I’m not in that stage yet. First I have to have a 2nd site :) Still designing the duoh.com site.

ZenBug said:

Do you mean the Embed tag?

Oops, yes my mistake. I’ve fixed it. Thx, for pointing this out. Guess I was confusing the naming with the name of my template group.

Thijs said:

Wow, it’s unbelievable! You could write about one of the most essential and most widely used features of computer languages like a if-statement as if it were the next big thing.

Well not all of us are gifted programmers, so sorry if a *simple* designer like me gets excited.

Vanni said:

Do you have any insights on adding images to an entry in such a way that the person adding the image doesn’t have to do anything to format it? I was wanting to have an art_image field for articles and automagically format it

I do almost the same as Neil is describing for the images that link to my art section on the homepage and in the right column if you are in one of the “art” sections of my site. I’ve created this custom field for the image:

{sidebar-img}

This field’s formatting is set to none. The styling is done in the CSS. However, the difference with Neil’s way is that I have to enter the entire img element in that custom field. He’s taken this another step further. The user has to enter the path in a separate field and the alt attribute in a separate field. So he doesn’t have to deal with the code of the img element.


gravatar

11

permalink this comment serg Sun Jul 1, 2007 at 01.45 pm

I always love reading articles on ExpressionEngine like this. I was just thinking about updating to 1.6 myself.


gravatar

12

permalink this comment Kari Pätilä Sun Jul 1, 2007 at 02.39 pm

Wow, it’s unbelievable! You could write about one of the most essential and most widely used features of computer languages like a if-statement as if it were the next big thing.

It is kind of unbelievable, but in a good way since there aren’t that many engineers around who still get excited about the basics.

This article was well written - so well in fact, that I didn’t even stop to think that “hey, I know all this already”.

Personally, I think that bridging the gap between graphic design and programming makes for an inspiring read, as long as it’s the designer making the move towards programming and not the other way around.


gravatar

13

permalink this comment ceviri Sun Jul 1, 2007 at 08.09 pm

Thanks for the quick tutorial Veerle. I’m a die hard EE user and I always love reading articles on EE like this.


gravatar

14

permalink this comment Donit Mon Jul 2, 2007 at 04.49 pm

Already updating to 1.6. Thanks


gravatar

15

permalink this comment Jane Tue Jul 3, 2007 at 12.40 am

Since you mentioned your illustrations page ... I really like your artwork.


gravatar

16

permalink this comment Jog Tue Jul 3, 2007 at 04.44 pm

Hey Veerle, thanks for the help.


gravatar

17

permalink this comment Magic_b Tue Jul 3, 2007 at 09.50 pm

Interesting article!


gravatar

18

permalink this comment daveH Tue Jul 3, 2007 at 11.06 pm

Excellent as always. Nice to learn about the small details that make everything so much eaier.


gravatar

19

permalink this comment Konin Mon Jul 16, 2007 at 09.51 pm

Thanks for the quick tutorial.That could be really useful for displaying other related sections of the site.I love reading articles on ExpressionEngine like this.


gravatar

20

permalink this comment iWantToKeepAnon Tue Jul 17, 2007 at 08.14 pm

Veerle, love your blog and sorry for the trolls in your other EE 1.6 post.  I am pro-opensource but I also realize the benefit of comercial software too.

I love your boldness in color choice, not just bold but really well chosen. 1 question, why the wide layout? I realize you use big mac monitors and target the design community .... maybe I just answered the question :-> but I am left to scroll right to check out the art and flickr sections.


gravatar

21

permalink this comment Veerle Wed Jul 18, 2007 at 08.19 am

iWantToKeepAnon said:

why the wide layout? I realize you use big mac monitors and target the design community .... maybe I just answered the question :->

I guess you did :) I just checked my stats from today going 2 years back in time and 97.7% uses a screen resolution higher then 800 x 600. It was my intention to create a smaller layout as well and have it resized with javascript, but it’s just not worth all the effort really since this 2.3% will keep on shrinking. I’m focussing on improving my blog with a new design and better structure etc.


gravatar

22

permalink this comment iWantToKeepAnon Wed Jul 18, 2007 at 04.57 pm

@veerle, I agree that maintaining 2 designs or writing the JS code for a small group isn’t worth it.  Personally I run at 1024x768 but I don’t like any apps maximized, including my browser.  So it’s my fault I scroll left/right.  Keep focusing on good design and keep telling us what you find!



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist