Resources

Leave a comment

Here are a large amount (that I kept track of!) of my resources:

http://php.net/

http://ellislab.com/expressionengine/user-guide/index.html

http://www.extendstudio.com/blog/2010/03/how-to-make-a-testing-server-work/

http://www.adobe.com/devnet/dreamweaver/articles/setup_testing_server.html

http://www.1stwebdesigner.com/css/how-to-create-php-website-template/

http://buildinternet.com/2009/12/using-the-php-include-function-to-template-faster/

http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=145

http://etuts.org/how-to-install-expressionengine-offline-on-your-local-computer/

http://amobil.se/2011/11/responsive-embeds/

http://uk.reuters.com/news/oddlyEnough

http://www.train-ee.com/courseware/free-tutorials/comments/working-with-categories/

http://ellislab.com/expressionengine/user-guide/modules/channel/categories.html

http://www.solspace.com/forums/viewthread/5411/

http://www.solspace.com/docs/freeform/form/ – notify_admin

http://ellislab.com/expressionengine/user-guide/modules/channel/channel_entries.html – url-title-path

http://www.jotform.com/

http://couchable.co/blog/post/expressionengine-for-designers-displaying-and-resizing-images

http://viminteractive.com/blog/using_expressionengine_image_manipulation_in_templates/

Reading:

Building an ExpressionEngine 2 Site
Michael Boyink
ISBN:9781453794234

Problems

Leave a comment

I had various problems through the course of the assignment. Some I have discussed, others I have not.

Comments Form – When I first applied the comments form across every single entry page, it was not appearing on any page other than the videos page. I managed to solve this by adding the extra channels to the comment_entry embed template comments channel tag pair.

RSS feed – This was an unsolved issue – basically I followed a tutorial to get an RSS feed up and running. I’ve not included a post about it, as it didn’t seem to work for me anyway and it seemed pointless to document it in depth to then say “but I didn’t use it anyway”. It was interesting because if I loaded the news template that only had the information for new posts, I could see the feed, however when linking it to the actual feed code it just didn’t work. I’ve left the remaining code in the site as well as links so that hopefully when it is marked I’ll find out what I did wrong and why it wasn’t working and i’ll be able to implement one in the future.

FreeForm – To be quite frank, this pissed me off a lot. I have no idea why it wouldn’t work. I did exactly the same as Shelley, and yet mine just wouldn’t conform. I solely put the blame on either GoDaddy, or ExpressionEngine Core. They can split it if they like, I don’t care! I think that next time I create a website for a client, I will use another host. I managed to do a workaround which worked fine and did the job it needed to, just without the email notification. I’ve documented how it works to show my understanding, but other than that, never mind!

Display:block; – This isn’t really a problem, it’s actually the solution to the problem.  It does however have a visual companion! I kept getting gaps under all of my pictures – I’ve had this problem before, but for some reason only this time have I decided to actually sort it out! It’s good to know for the future.

problem - space below picture 1

Adding display:block; eliminated the gap!

problem - space below picture 2

Font size Opera – I found that when I viewed my website on Opera, the text was much larger than on other browsers. I am using ems for most font sizes, and the default font size (1em) in most browsers is 16px. In Opera, the default font size is 20px. To counteract this, I set font-size to 16px as a css rule for body.

Borders around IE images with links – This was an easy one to fix. I’ve had this problem before where IE adds borders to images that are also links. This was a simple case of adding this: a img{border:none;}

Updates

Leave a comment

I’ve made a few changes to the site layout/design since the initial creation. First off I’ve created a more fitting header image – changing the logo from Comic News to Comedy News, incorporating it into a psd file with a couple of accompanying images to create a more bulked out, attention grabbing header. The logo has changed slightly too – I’ve gotten rid of the outer glow behind the words and added a 2px stroke around the outer edge to make it stand out more in front of the other images. You will also notice the RSS feed logo is underneath the search bar. I did try to configure a feed for my website, however it didn’t seem to work properly. I’ve left it there with the link in the hope that it may just randomly work at some point.

I’ve added a background image with an opacity of about 15% to the container – this gets rid of the blank space, and provides me with something other than a flat colour to sit behind the main content of the page. I like the overall effect it gives the page. I used a comic strip to keep with the theme of the site.

As for the navigation, I’ve gotten rid of the rounded corners and toned down the drop shadow by a significant amount. I’ve also changed the borders from solid black, to a thinner grey border for more subtlety. I didn’t want the navigation to be the most attention seeking area of the website and quite frankly the massive borders and large shadows didn’t really help. I’ve pretty much repeated this process around every border-radiused and bordered divs. It does give a much cleaner effect to the site.

windows8

The colour scheme has changed slightly too. I was advised to choose colours that were of the same saturation and brightness as they would go well together rather than two completely random colours, whether or not they compliment each other. I looked at the Windows 8 UI, which is relatively flat but effective, using colour well to divide attention across the page. I’ve matched the colour of the logo to the other orange areas as well, because originally the shade of orange being used was one that did not appear in the site anywhere else.

updated website - top half

As for the footer, I’ve not really done anything. I’ve simply applied the font being used around the site to the p tags, and floated the validation logos to the right to stop them spilling out of the footer.

updated footer

Featured Images

Leave a comment

I felt that because my website was mainly based on the videos uploaded to the site, I needed to include more about the images on the home page. I had reserved a space on the page with NivoSlider. However when incorporating the channel entries to the slider, I found that the slider did not operate as it should have done. It loaded (well, made dimensions for, the images never actually loaded) the full size images despite being given the link to the thumbnails, I also couldn’t add any channel fields outside of the slider otherwise it would load the slider three times (I planned to have three featured images on the home page).

To get around this, I got rid of the NivoSlider, and replaced it with just an image – it would show the most recent featured image uploaded to the website, and be able to access the other sections where I wanted to show information regarding that particular entry.

The code was pretty much the same as the channel entry for the single entry page, just using the thumbnail image rather than the fullsize image. This also made a point of only selecting entries with a status of “featured”, as defined in the channel entries opening tag. I’ve added a featured status to a couple of images to get this working.

featured image - code

This was the result – a featured image on the home page:

featured image - in place

Comments

Leave a comment

What’s a comedy site without a comments thread?!

I wanted to add a comments form to each entry so that users could discuss each entry with one another. I had no desire to set limits or pagination for this, as comments wouldn’t take much to load.

Firstly I created a form (again using the template I had created previously, editing where necessary) in its own embed template – this was so that I could repeat the form on all single entry pages without repeating code over and over and over again.

The first tag pair started with {exp:comment:entries channel=”{embed:the_channel}”}. This allowed me to show how many comments there were in the heading. The variable {embed:the_channel} was entry page specific, where in the embed for this form I will add the channel name so that it knows what channel it is commenting on.

The second tag pair was {exp:comment:forml}. This is where I set the form to an EE dynamic form, assigning all channels to the form. This is an important stage as without it the form will not show up at all on the entry pages.

comments embed code

When this template was finished, I updated and finished editing. I then went to each single entry template, and under the channel entries tags, I wrote {embed=”embeds/entry_comments” the_channel=”gallery”}. You can now see the variable being passed into the embed function, explaining to the form what channel it is aiming at. Obviously for the single entry blog posts and videos, the channel name will be appropriate to the channel.

comments embed code in entry

Making sure comments were enabled on each channel, I went to a video and added a comment .Voila! A working comments form.

comments in entry

To further the use of this form, I added a comment count on the multi-entry pages.

Each entry had this added underneath the heading:

{if allow_comments}
({comment_total}) Comments
{/if}

This shows how many comments are on each entry.

To show that this works, here is the entry I posted in above, which should display 2 comments as above.

underdogger comments

Awesome!!!!!! My website is now fully dynamic with multiple dynamic features.

There are a few tweaks I need to make and a few issues I need to resolve, but I will go over all of these and problems I had in the next couple of posts.

Search

Leave a comment

The search feature was not going to be as kind as the pagination. This was a slightly more complicated process. Luckily at the beginning of the channel creation, I made sure that every entry on every channel was searchable. This was to make sure that I wouldn’t have to go back and check again.

The first stage was to create a new template group entitled: Search. In this group, I created two different templates. Both based on the template for blog, one would be a results page, and the other would be a (yep, you guessed it…) no results page.

Firstly, I created the no results page. As this page required no channels or tag pairs from EE and it simply had to relay a message describing how there were no results. As there is no EE code, you can see the template below:

(screenshots taken and updated 14/05/13)

search 1

The page simply displays ‘SORRY – NO RESULTS’ and a short apology message instructing the user to search again.

After this I opened the index page from this group.

To display search results, I had to use the {exp:search:search_results} tag pair. Inside these, I included {title}, {category}, {excerpt} – this takes 50 words from a chosen category to preview the entry, and {auto_path}. Auto_path was a new parameter that had to be coded so that it knew where to go from the ‘view post’ link.

search code

In channel preferences, I set the path for each single entry page for each channel.

search path

Finally, I had to add a search bar to my templates. I wanted this to be in the header so that users could choose to search as soon as they access a page, and don’t have to look for where the search bar is.

search bar code

I used the tag pair {exp:search:simple_form}, applied every channel to the search form, assigned the following attributes to link pages to results: no_result_page=”search/no_result” result_page=”search/index” search_in=”everywhere” and included a small form inside the tag pair. I styled this using CSS and now it looks like this:

search bar

I tested it a couple of times, but I forgot to add all of the channels initially so it wouldn’t work at first! Now I’ve fixed it though. As a trial, I will do a search for ‘Dolan’ – a word that I already know is associated with a gallery image, so lets see what happens:

search dolan

Good, it found it! And where does it link to…………..

search dolan result

Tada! Working search form.

Additional Photos

Leave a comment

Here are some photographs of myself in recent meetings where we constructed the piece.

finished box

working 1

working 2

working 3