Jump to content
benbyf

Photographer Caroline Leeming

Recommended Posts

Nice design! Thanks for the showcase.

I find it a bit hard to navigate though. One opens a slide show at the bottom of the page (for example), but after closing it we are left at the top, so to check out all the photos one has to jump back and forth a lot, or am I missing something? And the /projects/sid-magazine/ slideshow starts with a different photo (different from the one we click on as a preview). At first I was confused.

Another thing is Isotope: switching between ALL and COMMISSIONS swaps some(?) photos in the middle(?). I can only only see the top of three photos changing. What happens actually and why?

 

  • Like 1

Share this post


Link to post
Share on other sites
46 minutes ago, szabesz said:

Nice design! Thanks for the showcase.

I find it a bit hard to navigate though. One opens a slide show at the bottom of the page (for example), but after closing it we are left at the top, so to check out all the photos one has to jump back and forth a lot, or am I missing something? And the /projects/sid-magazine/ slideshow starts with a different photo (different from the one we click on as a preview). At first I was confused.

Another thing is Isotope: switching between ALL and COMMISSIONS swaps some(?) photos in the middle(?). I can only only see the top of three photos changing. What happens actually and why?

 

interesting, can you tell me your browser and OS? all new content should open at top.

categories clicked should change the thumbnails displayed, was previously more obvious as it would scroll to the thumbs on change.

Share this post


Link to post
Share on other sites

I'm on OS X 10.11, at first in Firefox 50.1.0 I could only see the header and the navbar at the top, but the rest of the page looked empty, even though I could see the code with the build in Inspector, after a while (because of the lots os refreshes?) content just appeared. Here is a 12fps licecap screengrab from Chrome 55.x (in 57.x, Firefox and Safari looks the same or very similar):

[...old issue with and old image, I removed it to save space...]

Note that in Chrome's console I get: Slow network is detected. Fallback font will be used while loading: http://carolineleeming.com/site/templates/styles/fonts/DTLDocumentaSansST.woff2

Even though speedtest.net reports 75/10 Mpbs at the moment.

Share this post


Link to post
Share on other sites

really strange. I get missing .js (made with AIOM module) now and then which is why its blank, as isotope only triggers when all images are loaded using imagesLoaded

mmm...

  • Like 1

Share this post


Link to post
Share on other sites

Does it make much sense to use isotope in this case? When one resizes the browser the isotope animation looks cool, but users rarely do it and other than that kinda pointless, or is it just me? Or am I missing the point?

  • Like 1

Share this post


Link to post
Share on other sites

not sure you get the use case for it. here i'm using it for two reason 1. to arrange the images (its uses masonry for this as they're made by the same people), 2. to animate filtering of the content - using the category links in this case. you can also do loads load more stuff with it - http://isotope.metafizzy.co/layout-modes.html

  • Like 1

Share this post


Link to post
Share on other sites

You or your client must have some deep pockets for font licensing. From the DTL website:

Quote

The eot, woff, ttf and svg fonts are sold as @font-face bundle and such a bundle costs €1250 per weight/style (single byte).

 

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • 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 AndZyk
      A small website for the Black Forest based filmmaker Markus Ketterer. You can discover his portfolio or get more informations about him by clicking the logo. Each film page can contain two film stills and two behind the scenes pictures. The transitions between the pages were made with Barba.js (thanks to @LostKobrakai for mentioning it).
      www.luchs.digital
      Modules used:
      ProCache ColorPicker Markup Sitemap XML Tracy Debugger Regards, Andreas
    • By tpr
      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.
      http://baksaimre.hu/

      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.
×
×
  • Create New...