Jump to content
horst

My new Portfolio

Recommended Posts

Hi all,

I want to present a preview of my new Portfolio.

Actually I'm unsure with some points and the images aren't the final ones and other pieces aren't finished too. But the look is ready and maybe it would be good to get some feedback from the critics here ;-)

The site actually runs on PW 2.3 stable, the used modules are:

  • ImagesManager
  • ImageMinSize
  • Thumbnails
  • FieldtypeTextUnique
  • Minify

I have disabled direct access via .htaccess to portfolio-images that resides in the files folder. Thumbnails and images related to infos and news can be accessed directly, all others have to use a proxy page I have build as PW-template.

With the ImagesManager I initially have created my six categories (albums) and manage all uploads. Via a hook into ImagesManager on upload I'm able to rename the original images and create 3 variations (600px, 900px, 1200px). Also I stripp all Exif and IPTC data from them but populate them with the minimal needed IPTC data. That way I never have custom related infos in the images, neither in filename nor in metadata.

I use serverside mobiledetection and also JS to detect viewport dimensions. This should be used to serve images that fit best to devices and viewport dimensions. But it isn't ready now.

The layout / design is done from HTML5 boilerplate. There are no frameworks or thatlike used / needed.

But there is heavy use of Javascript (jQuery-Libs: Swipe, Stapel, Flexslider), but the site also runs completly in noscript mode. :)

Also the single-image-view in NoScriptMode lets you loop through the gallery and displays the content scrolled down to the image if needed. (That's one of the advantages of old veterans that have build html-pages during browser war 1995/98 :P )

All critic, suggestions etc is welcome: http://pw4.nogajski.de/

  • Like 8

Share this post


Link to post
Share on other sites

Amazing photography horst! Great colour palette too. I think your portfolio page should be your homepage. It is such a nice page and I really get the feeling browsing your photo's.

Minor bug: the loading image has a different background color. See attachement.

post-365-0-58224500-1372963699_thumb.png

  • Like 1

Share this post


Link to post
Share on other sites

Cool gallery website! :)

Some critique:

The main menu is a catastrophe in my opinion. The rounded corners on the left and right bottom side plus the margin between the links doesn't look good.

The gallery loader.gif has a black background, which doesn't work with the blue background of the site.

I would switch the keyboard arrow navigation. Right for next img, left for prev. More intuitive that way.

  • Like 1

Share this post


Link to post
Share on other sites

Very beautiful! I love it!

Two minor issues: 

1. On info pages, on the right side (featured content), when viewing one of those pages, e.g. http://pw4.nogajski.de/de/news/greenscreen/, I see no english flag on the left to choose my language...

2. Is it possible, to dynamically change the HTML language declaration to match the selected language? So, if viewing the page in English, dynamically change this:

<html lang="de" class="no-js">

to this:

<html lang="en" class="no-js">

Only reason I ask is to stop my Google Translate Extension from automatically trying to translate (or asking me if it should translate) the page from German to English even though I have already selected English on your website. It's just a minor niggle from Google, but just wondering... :)

  • Like 1

Share this post


Link to post
Share on other sites

Amazing photography horst! Great colour palette too. I think your portfolio page should be your homepage. It is such a nice page and I really get the feeling browsing your photo's.

Minor bug: the loading image has a different background color. See attachement.

@arjen: many thanks for the warm words :)

Yes, I have thought about starting directly with the portfolio page, but was a bit scared because the heavy load on small bandwith. But I will re-think it!

loading image fixed, thanks!

Share this post


Link to post
Share on other sites

Hi kongondo,

many thanks for the feedback.

1. On info pages, on the right side (featured content), when viewing one of those pages, e.g. http://pw4.nogajski.de/de/news/greenscreen/, I see no english flag on the left to choose my language...

That's right, because there is no english version available. But I don't want to hide all entries that are not available in english. Therefor I display a (only in german) under all those entries in the overview.

2. Is it possible, to dynamically change the HTML language declaration to match the selected language? So, if viewing the page in English, dynamically change this:

<html lang="de" class="no-js">

to this:

<html lang="en" class="no-js">

This definitely should set to the current selected language, but is broken. Thanks for finding that!

Share this post


Link to post
Share on other sites

Cool gallery website! :)

Some critique:

The main menu is a catastrophe in my opinion. The rounded corners on the left and right bottom side plus the margin between the links doesn't look good.

The gallery loader.gif has a black background, which doesn't work with the blue background of the site.

I would switch the keyboard arrow navigation. Right for next img, left for prev. More intuitive that way.

Many thanks for your reply.

the main menu: I'm unsure, maybe, may not, but many thanks for saying it clear! :)

EDIT: I have deleted the margins between them and have added small borders. Maybe thats better.

loader gif: solved!

the arrow keys: the original behave was as you say, but I was confused all the time that way and therefor I have switched it.

Edited by horst

Share this post


Link to post
Share on other sites

Nice site thanks for sharing.

Really cool photos. But what is very annoying on mobile is you can't zoom them. Or didi I miss something?

What did you use now for the image scaling?

Does the min size plugin work with ImageManager?

  • Like 1

Share this post


Link to post
Share on other sites

@soma: thank you!
 

Really cool photos. But what is very annoying on mobile is you can't zoom them. Or didi I miss something?


Oh, I see. I have changed the settings for Swipe and have not tested on mobile after that.

Normally Swipe displays the images nearly fullscreen, but on desktop I don't want that. Therefor I have hacked it at several points. I think I have to change it once more so that the hacks depend on the setting of var isMobile.

 
 

Does the min size plugin work with ImageManager?

I do not use the min size plugin together with the ImageManager. I use it on info pages imagesfields only, not in the portfolio where I use the ImageManager.

What did you use now for the image scaling?

Actually I only select one out of three sizes, depending on the report of the ajax script that sends viewport dimensions (initial and on resize).

Here I stuck a bit, there are some thoughts but not very clear. Maybe I have found an interesting script what I want to analyze and try to combine with the Swipe somehow: http://responsiveimg.com/

But there are other options too.

Share this post


Link to post
Share on other sites

I am not sure what you are doing with images (slideshow pictures) but it takes ~30 seconds to load on my latest Chrome browser on my Win7 laptop which run on the LAN cable (not wi-fi).

See attached snapshot.

post-777-0-17883000-1372986898_thumb.jpg

Share this post


Link to post
Share on other sites

Greetings Horst.

Beautiful photos! You obviously have talent, and the imagery in your web site does a great job of showing your skills. I like the way you introduce the various themes for your work.

I have some small comments, which may follow some of what has been said here already:

1. Perhaps add more direct mentions of your themes on the home page?

2. The home page slider should perhaps identify the theme of each of the slideshow images.

3. The home page slider does not "light up" the disk of the current image.

4. The galleries load extremely slowly. Sometimes, images scroll to the next one before they load.

5. It would be great to have some brief statements in writing from you in key places throughout the site -- just a bit more of who you are or what is behind the work we are looking at.

My comments come from viewing the site with Safari and Chrome on an iPad 3. I will take a look from desktop later.

Thanks for sharing,

Matthew

  • Like 1

Share this post


Link to post
Share on other sites

I am not sure what you are doing with images (slideshow pictures) but it takes ~30 seconds to load on my latest Chrome browser on my Win7 laptop which run on the LAN cable (not wi-fi).

See attached snapshot.

This must be on your side or slow connection. It takes 5 seconds here with wifi.

  • Like 1

Share this post


Link to post
Share on other sites

Hi Matthew,
 
many thanks for the reply and your thoughts! This is very helpful.
 

[...] 
1. Perhaps add more direct mentions of your themes on the home page?

2. The home page slider should perhaps identify the theme of each of the slideshow images.

3. The home page slider does not "light up" the disk of the current image.

These thoughts are right, but the slider on the homepage, or better: the complete homepage only was created because I was a bit scared about slow loading of the portfolio page. But the homepage doesn't provide new or other content than that from the portfolio.

So, in the next round (5), I skip the homepage and focus on the images loading first.

4. The galleries load extremely slowly. Sometimes, images scroll to the next one before they load.

Yeah, I need a concept here! Actually there isn't one, only fragments of different approaches that don't fit together.


 

5. It would be great to have some brief statements in writing from you in key places throughout the site -- just a bit more of who you are or what is behind the work we are looking at.

Yes, this should be. What do you mean with "in key places throughout the site"?

There are some articles under infos that explain some parts of my work. Actually only in german, but I think I let translate (some of) them. Also I want add more to it.

I'm not sure if I should put all under that point?

and also if "infos" is the right name for it?

Anyway, there is some more work to do before official (re)launch. :)

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 picarica
      so hello i am trying to combine my whole ass gallery with custom created watermark, i wanted to combine my images with simple text little opaque but that seemed harder and i couldnt make it work, well i cant make this work either, how are you handling watermarks? i would prefer if it would be plain PHP no imagemagick or some custom plugins scripts, but if neccesary i wont deny.
      so here's my code
      $pa = $pages->find("template=basic-page|art_gallery, images.tags!=''"); /* $pa = $pages->find("has_parent!=2,id!=2|7,status<".Page::statusTrash.",include=all"); */ echo "<div BRUUH class='row gtr-50 gtr-uniform js-filter' id='gal' >"; foreach ($pa as $p) { foreach($p->images as $image) { $obrazok = $image->url; $image = imagecreatefromjpeg($obrazok); $frame = imagecreatefromjpeg($pages->get('/settings/')->watermark->url); /* echo $image; echo $frame; */ # If you know your originals are of type PNG. imagecopymerge($image, $frame, 0, 0, 0, 0, 50, 50, 100); # Output straight to the browser. $img = imagepng($image); $options = array('quality' => 70, 'upscaling' => true, 'cropping' => 'center', 'sharpening'=>'medium'); $thumb = $img->size(400, 300, $options); $large = $img->size(1200, 0, $options); echo "<div class='$image->tags' class='col-4'>"; echo "<span style='overflow:hidden;'class='image fit'>"; echo "<a href='$large->url'>"; echo "<img class='uk-transform-origin-top-right' uk-scrollspy='cls: uk-animation-fade; repeat: false' src='$thumb->url' alt='$image->tags'>"; echo "</a>"; echo "</span>"; echo "</div>"; } };  
    • By horst
      Hi, on a site I want to disable access to original images and only allow to access thumbnails and watermarked image variations.
      EDIT:
      A good solution for protecting original images can be found a bit down in this thread:
       
      Old content of this initial post:
       
    • By Guy Incognito
      I seem to be running into a repeated fatal error in a fresh PW install version 3.0.148. I can't quite put my finger on the pattern but it seems to be around deleting image fields or removing images from certain image fields.
      This is the trace from the log generated by trying to save a page and delete an image from an image field:
      Fatal Error: Uncaught Error: Cannot access protected property Pageimage::$original in /wire/core/PageimageVariations.php:256 Stack trace: 1. /wire/core/Pageimage.php(1327): PageimageVariations->getInfo() 2. /wire/core/Wire.php(386): Pageimage->___isVariation() 3. /wire/core/WireHooks.php(823): Wire->_callMethod() 4. /wire/core/Wire.php(450): WireHooks->runHooks() 5. /wire/core/Pageimage.php(1369): Wire->__call() 6. /wire/core/Pageimage.php(399): Pageimage->getOriginal() 7. /wire/core/WireData.php(333): Pageimage->get() 8. /wire/core/PageimageVariations.php(256): Pro Line 256 of /wire/core/PageimageVariations.php Earlier in the day I was experimenting with custom fields for images for the first time and kept running into this error, thinking it was me using this feature wrong and not having time to read up I deleted the custom image fields template and went about my business. So now I don't know if I triggered an issue or whether it was never related to the custom image fields in the first place?
      Any ideas?
    • By humanafterall
      I'm using some Custom fields for images: 
      https://processwire.com/blog/posts/pw-3.0.142/#custom-fields-for-files-images

      When I save the page, and return the fields are blank. When I re-add the text to the fields and save again then the fields save as expected.

      I know this is stated as being quite experimental but it's super useful feature I'd love to get working correctly.
      I have fields that are CKEditor fields but have overidden this on the image specific template. I've also tried it with regular text fields and I get the same bug.
      (currently using Processwire 3.0.155)
      **UPDATE**
      I've found this issue is specific to editing on pages using the PageTable fieldtype. The fields are not saving when I save the page in the PageTable.
    • By Robin S
      Displays image tags overlaid on the thumbnail using customisable colours. This makes it easier to see which images have which tags without needing to open the edit pane for individual images or changing to the list view.
      Screenshot

      Usage
      Enable tags for one or more image fields. Install the Image Thumbnail Tags module. Optionally configure colours for any of your tags.
       
      https://github.com/Toutouwai/ImageThumbnailTags
      https://modules.processwire.com/modules/image-thumbnail-tags/
×
×
  • Create New...