Jump to content
tpr

Porfolio of Imre Baksa

Recommended Posts

This is a reworked website of Imre Baksa, a Hungarian actor and director. His former (static) website was also made by me back in around 2009. He asked me to do a redesign but I decided to involve ProcessWire to make content management easier.


post-3156-0-84595800-1450865662_thumb.pn

Lesson 1: templates - no thanks

It is tempting to use ready-made templates for a project because most of the work is done, there's some tweaking here and there and mission completed. Okay, this is the theory. I have to admit that I have never found a suitable template/theme for my projects, but being a web designer this is the way it should be, I guess.

This time I found one that looked fine: Landed from HTML5 UP. In fact there was a self-made design for the site and this template looked 90% similar, so it really seemed to be an easy task to bring it into ProcessWire. 

Soon turned out that some of the fancy features of the template required advanced JavaScript knowledge. That means, I had to dive into it and learn how it worked. I did so and I was able to tweak things then, but I wasn't satisfied with the outcome. So I went back to the drawing board and dropped the template.

This experience reassured that starting from scratch would have been a better choice on the long run. The good thing is that I learned some new things that will come in handy in the future.

Lesson 2: template engines - Latte is still my best friend

I was using Nette's templating engine, Latte in previous projects and I liked it a lot. It is similar to Twig, which is more widespread, so I decided to try that for learning purposes. This sounded like an easy journey because ProcessWire supports Twig through modules. However, at the end of the day I sort of regretted that. Latte has some small helper features that makes templating easier, and these differences made up a huge difference. Maybe I'm getting old but I felt Twig more of a nuissance after Latte. Finally I got rid of Twig and I guess I will never look back :) I will keep using Latte in the future even if I have to bootstrap it manually.

Lesson 3: frontend development is hard

Having ProcessWire at hand, backend is the minor part in web development, at least in smaller projects. I've used only a few jQuery plugins but making them work together nicely was a real challenge. At the end I had to make a compromise by removing SmoothScroll because it didn't work well with JScrollPane. Even so, I had tough times to eliminate content "jumps" when a lightbox is opened, and to make JScrollPane work the way I wanted to work. Making the whole thing responsive added another level of complexity as features needed to be destroyed/reinitialized on different screen sizes. I like to polish things as much as possible but the current state of the web makes it almost impossible to reach certain level of perfection.

Moduling up

This was the project where I felt that a link checker button would be helpful so started to develop InputfieldURLChecker. I use this in a few projects and it does the job nicely. My other pet PW module FEEL also got some polish during site development. For site-wide settings I used MultiValueTextformatter so I didn't need to create a field for every setting, just one for all.

Other modules used:

  • SEO: must have!
  • Admin Template Columns for better admin layout
  • Page List Image Label: to add featured image to the list of pages in the admin
  • Pageimage Remove Variations: remove unused image variations
 

Forms: one step closer to simpler form processing

For the contact form I used Nette Forms, because it is so easy to add forms to the site with it, with frontend & backend validation in one go. Processing them still needs some sweat, but this time I finally put together a class to make this easier. Surely it still needs some iterations but it's a huge help: it takes only a few parameters to save submissions as Pages or send email to the admin or the visitor. For email templates I also used Latte (what else? :)).

I also created a "json_storage" field to store submission. The beauty is that while it's only one field (a textarea), in the admin it is displayed as formatted key-value pairs using a hook.

Summary

The site looks fresh and the year knob on the left makes it fun to use. Content management is easy as 1-2-3 thanks to ProcessWire, even if it's mostly me who will deal with the updates.

While it's not visible on the site, in the background there are many improvements to my development tools and workflow that will be of huge help in the future.

  • Like 16

Share this post


Link to post
Share on other sites

Hi Roland, Nice work!

You might want to know, that by blocking the Google AJAX Search API the site will not get through the "preloading" phase, it gets stalled at the flashing circle in the center. I use Safari with Ghostery installed which is set to block anything Ghostery "knows about", but by whitelisting this script in question, the site loaded just fine.

  • Like 1

Share this post


Link to post
Share on other sites

Thanks, I will check that.

Share this post


Link to post
Share on other sites

Hi,

Nice looking site. Well done.

Would you mind sharing what is your workflow for using Nette components (Latte template engine  and Nette Forms) ?

Thanks

  • Like 2

Share this post


Link to post
Share on other sites

It's on its way, in a form of a site profile. I wanted to start it in these days but got some hardware issues to solve first.

  • Like 1

Share this post


Link to post
Share on other sites

Update 2019-11

I'm learning Angular nowadays and this project seemed to be a perfect one for a rewrite. I planned to do that beforehands mainly because of the design and slowliness (frontend issues) anyways.

I kept PW as the API source, so I could use the current admin as before. The major change was to remove all template files except for "admin", and added a new "api" template. Of course a bunch of frontend modules were also removed, eg. TemplateLatteReplace.

Things are determined in ready.php.

There's also a saveMeta() function that creates a meta.json file on the server, that is to be able to dynamically update the Open Graph meta (and page title) in the Angular entry point "index.php" (renamed from "index.php"). See more about this here.

There was some unforeseen issues during the development but mostly on the Angular/.htaccess side. ProcessWire itself was easy to handle, my biggest concern was to design the JSON response in an easy-to-process way.

Although the initial load may take slightly more time, the speed and responsibility is almost instant afterwards. Images and video thumbs need additional requests but otherwise everything is very snappy. You can read some more about the site on my blog.

baksaimre-2019-640x0.png

  • Like 11

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By MateThemes
      Hello everyone!
      I am working with Processwire since some time. But some topics are quite hard for me.
      I have a Portfolio (Gallery) Page.
      I am build a template with Portfolio Index and pages with portfolio entries.
      Structure:
      Portfolio Index
      -- Portfolio Entry
      -- Portfolio Entry
      and so on.
      Portfolio Entry has an Image field with max 12 images and are accessible Templates. 
      Now I want to display the single Portfolio Entry on the Portfolio Index and Paginate them. In the index page all images of a single Entry page should be displayed (I should not be organized as albums, where a random image of the portfolio entry should be displayed). 
      I have no clue to achieve this. May someone could give me an advice.
      Thank you in advance!
    • By FrancisChung
      Does anyone here a personal portfolio site or a personal website that I can draw some inspiration from?
      I need to knock one up with minimal effort.
      I was wondering if there's any commercially available themes or solutions I can leverage?
      I looked at something called Gitshowcase but it didn't quite output what I needed, as it seems to have a very limited biography section.
       
    • By jploch
      I just relaunched my portfolio website. It's my first ajax driven website using ProcessWire as a CMS.
      Its a showcase of some of my work as well as a digital playground to improve my coding skills.

      If you encounter any bugs or have feedback, feel free to share  

      janploch.de
    • By benbyf
      http://www.karenthomasphotography.com/
      modules: AIOM+, ProcessPageDelete, TextformatterVideoEmbed.
      js: isotope, imagesloaded, fitvids, scrollTo, and Jquery with custom AJAX magic.

    • By benbyf
      http://carolineleeming.com/
      New website for still life photographer Caroline Leeming. Website build and design by myself - http://www.benbyford.com
      Using Jquery, alot of AJAX loading of content and the thumbnail grid with http://isotope.metafizzy.co/, slideshow hand coded by me.

×
×
  • Create New...