Jump to content

PhotoWebMax

Members
  • Posts

    246
  • Joined

  • Last visited

  • Days Won

    2

Everything posted by PhotoWebMax

  1. This is the current state of my photos.php template: <?php include("./head.inc"); $options = array( 'quality' => 100, 'upscaling' => false ); ?> <div class="grid_12 content"> <h1><?php echo $page->title ?></h1> <p><?php echo $page->summary ?></p> <div class="photo-wrapper clearfix photos"> <?php $photos = wire("page")->photos; ?> <?php foreach ($photos as $photo): ?> <div class="photo single"> <a href="<?php echo $photo->width(1000,$options)->url ?>" title="<?php echo $photo->description ?>"> <img class="max-img border-primary" src="<?php echo $photo->size(100,100,$options)->url ?>" alt="<?php echo $photo->description ?>"> </a> </div> <?php endforeach; ?> </div> </div> <script> Q.push(function() { $(document).ready(function() { var photoswipe = $(".photos a").photoSwipe({ enableMouseWheel: false, enableKeyboard: true, allowUserZoom: false, imageScaleMethod: "false" }); }); }); </script> <?php include("./foot.inc"); ?> There are a few container divs in this code that I really do not need scenically. I then downloaded the FancyBox jQuery lightbox script. There is quite a lot of stuff in this download folder with a lot of code samples. To make things super simple I created a very basic html page to get FancyBox working in its most basic form. The standalone (not part of my PW install) html file looks like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Fancybox test</title> <!-- Add jQuery library --> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- Add fancyBox main JS and CSS files --> <script type="text/javascript" src="scripts/jquery.fancybox.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css" media="screen" /> <!-- Optionally add helpers - button, thumbnail and/or media --> <link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" /> <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script> <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script> <script type="text/javascript"> $(document).ready(function() { $(".fancybox").fancybox(); }); </script> </head> <body> <h1>Testing</h1> <p>Stunning paragraph goes here</p> <p> <a class="fancybox" rel="group" href="images/cube.jpg"><img src="images/cubeTeaser.jpg" alt="" /></a> <a class="fancybox" rel="group" href="images/midget.jpg"><img src="images/midgetTeaser.jpg" alt="" /></a> </p> </body> </html> The next thing is to add the FancyBox system to my PW photos.php template. This will replace the photoSwipe script call at the bottom of the template. I will to customize the jQuery script call so that it triggers the images I upload to the gallery page. CSS classes are part of this: note I am using the class="fancy box" and rel="group" for my images in the test html file. I am also assuming that there is some extra PHP needed to run the gallery page pagination from within PW? I am pretty sure 100% positive I need help with this...
  2. No, sorry, I decided to back out of trying it this way. I had several templates and test gallery pages that were not working so I scrapped them all and started over from scratch. I created this thread of my journey to image gallery success here: https://processwire.com/talk/topic/6158-photography-galleries-best-solution/ *** I am quite a ways from reaching success though...
  3. Horst, Thanks for the input! I will try your suggestions. Well spotted: that is a Bronica. The 6x7 GS1 to be exact. I really do not shoot much film any more. I did build a nice Polaroid 180 recently though. As soon as I finished the project I heard the sad news that Fuji is discontinuing the black and white instant film that everyone uses, namely FB3000. My main addiction is lenses. I think I have over 20 lenses for my Canon DSL systems. For a while there I was adapting the best of the old Minolta, Pentax and Olympus lenses to the Canon EOS mount. I was also one of the main moderators at cinema5d.com, a film making site that focussed on DSLR systems. I helped champion their use and promoted interest in adapting 50-year-old lens technology with modern cameras. Generally speaking I am suspicious of any script that changes image pixels from a server. I cant tell you how many times I have handed client images over only to then see how mangled and blurry they become after being "served" by some script that I have no control over...
  4. Is it hard to upgrade PHP within MAMP? I have always downloaded new additions of MAMP and just add production projects to the new htdocs folder. I think I have four versions of MAMP on my Mac... For now I am getting reacquainted with the FancyBox jQuery script: creating a super basic static html page with the simplest gallery I can formulate. From there I am hoping to add the FancyBox script to the PW gallery template I am working with. I am expecting some bumps along this road but I am sure I will get there eventually... I really appreciate all the input though!
  5. Guys, I am running the most recent version of MAMP (not the PRO version) 3.03 and it looks like the PHP component is 5.5.10 if that helps...
  6. This is the site I am attempting to replicate in ProcessWire: http://www.seattlerealestatephotography.com I would like to refresh this site and add new content. The gallery system is a major component to this site. It took me quite some time to get it working like I wanted. This site is built with MODx Revo. One of the snippets (MODx term for module) is called Gallery. I could never get Gallery to present and paginate my galleries like I wanted. I found a guy who had the same issue and he added a Colorbox and a jQuery Asynchronous Image Loader (JAIL) system which seems to work well. This gets added on top of the MODx Gallery snippet. I am also using a custom TV (template variable) to add the gallery id number to the page that aggregates the different galleries. I adopted all this and it works. Some extra steps involved though. I built my own CSS for the presentation. 2013 was a rocky year for MODx it seems. One of the principal developers, Shaun McCormick, has left MODx completely. He built and maintained many of the most popular snippets in the MODx system, including Gallery. As my whole image gallery system has several moving parts in MODx I now find that some pieces get updated while others do not. Upgrading MODx itself seems to give me grief as some of the new code impacts stuff I am left hanging onto. I also feel a little uncertain as to where MODx is going as a project? The developers are desperate for money and are struggling to figure out what is needed to get the project into the same size arena as Wordpress and Drupal, etc. Growing pains I guess. The other issue is with sites I hand over to people. Some do their content management only intermittently and they forget the steps involved. I then have to repeat the lessons. The MODx Manager (admin) interface has way more complexity than what I am seeing with PW. PW seems cleaner and more intuitive. This alone is why I am thinking I would like to make the switch...
  7. Here is a sample of one of the photos I am uploading to the page: You can see how blurry the image looks once it goes through the PW system. The thumbnail looks even worse. I did change size to width like Adrian suggested and I get the full image on the page now. One thing I noticed is that the name of the image gets changed, it adds the dimensions to the file name? Bathroom.jpg becomes Bathroom.1000x0.jpg. Don't want that to happen. The other issue is if I set a desired width of say 1000px then every image will be set to 1000 pixels. This is ok for horizontal images but produces huge vertical images that are bigger than the original file.
  8. Oops! Ok, the photos.php is now this: <?php include("./head.inc"); $options = array( 'quality' => 100 ); ?> <div class="grid_12 content"> <h1><?php echo $page->title ?></h1> <p><?php echo $page->summary ?></p> <div class="photo-wrapper clearfix photos"> <?php $photos = wire("page")->photos; ?> <?php foreach ($photos as $photo): ?> <div class="photo single"> <a href="<?php echo $photo->size(1000,$options)->url ?>" title="<?php echo $photo->description ?>"> <img class="max-img border-primary" src="<?php echo $photo->size(100,100,$options)->url ?>" alt="<?php echo $photo->description ?>"> </a> </div> <?php endforeach; ?> </div> </div> <script> Q.push(function() { $(document).ready(function() { var photoswipe = $(".photos a").photoSwipe({ enableMouseWheel: false, enableKeyboard: true, allowUserZoom: false, imageScaleMethod: "fitNoUpscale" }); }); }); </script> <?php include("./foot.inc"); ?> I get the thumbs (still blurry) but when you click on a thumb it takes you to a blank page but it only shows 1000x1px of the photo? The height is only 1 pixel. The page produces a URL of: http://localhost:8888/ProcessWire-SREP/site/assets/files/1009/master_deck.1000x1.jpg
  9. Also, at the bottom of the photos.php we have: <script> Q.push(function() { $(document).ready(function() { var photoswipe = $(".photos a").photoSwipe({ enableMouseWheel: false, enableKeyboard: true, allowUserZoom: false, imageScaleMethod: "fitNoUpscale" }); }); }); </script> even though I have not added the actual photoSwipe script to the server scripts folder is the imageScaleMethod responsible for the blurry images?
  10. This is what the modified photos.php looks like: <?php include("./head.inc"); $options = array( 'quality' => 100 ); ?> <div class="grid_12 content"> <h1><?php echo $page->title ?></h1> <p><?php echo $page->summary ?></p> <div class="photo-wrapper clearfix photos"> <?php $photos = wire("page")->photos; ?> <?php foreach ($photos as $photo): ?> <div class="photo single"> <a href="<?php echo $photo->size(1000,?options)->url ?>" title="<?php echo $photo->description ?>"> <img class="max-img border-primary" src="<?php echo $photo->size(100,100,?options)->url ?>" alt="<?php echo $photo->description ?>"> </a> </div> <?php endforeach; ?> </div> </div> <script> Q.push(function() { $(document).ready(function() { var photoswipe = $(".photos a").photoSwipe({ enableMouseWheel: false, enableKeyboard: true, allowUserZoom: false, imageScaleMethod: "fitNoUpscale" }); }); }); </script> <?php include("./foot.inc"); ?> But when I go the front end page I get this: Parse Error: syntax error, unexpected '?' (line 19 of /Applications/MAMP/htdocs/ProcessWire-SREP/site/templates/photos.php) This error message was shown because you are logged in as a Superuser. Error has been logged. Line 19 reads like this: <a href="<?php echo $photo->size(1000,?options)->url ?>" title="<?php echo $photo->description ?>"> Is there an error in there somewhere? For now I want to create my own full size images in Photoshop. The longest dimensions will be 1000px. To get this going I want the PW system to generate 100x100px thumbnails. Also, is now good time to remove the function call to the photoSwipe script and replace it with FancyBox? Thanks!
  11. Gebeer (love your avatar by the way), I am just following Craig's generous solution. I used his code for the two templates he presented. Check his link to the code for the two templates. After not liking the big thumbnail size I modified the size in the templates. I did flush the original image uploads and started fresh with new images, but the image quaintly is still awful. I have done nothing about adding any specific CSS to the gallery presentation. These problems aside I like how the backend PW admin system uploads images. I never really need to upload a ton of images into any gallery at one time so any extra robust upload system is overkill for me. Managing galleries in MODx Revo is sort of a pain in comparison. I added a lot of extra functionality to the MODx Revo Gallery system to get it to perform like I want. I am pretty picky with my gallery presentation. If I can get the PW system to match the original image quality of my Photoshop files with decent thumbs then I will be happy. I like the FancyBox script. I am sure that some of you PW pros must think I am a hamstrung newbie with silly issues, but I did help/collaborate with the developer of the FancyBox script (which is now hugely popular) with graphics and CSS several years ago...
  12. OK Craig I am back. I set up the photos & photos_index templates, added the fields and created a new Portfolio test page using the photos template. I then dragged in some photos and got a vertical row of thumbnails on the page! This is progress: we have images. The thumbnails are huge though. The image quality of the thumbnails and the full size images displayed is really awful: very blurry. I reset the size of the thumbs in the photos template to 100x100 pixels. I then trashed the images I had uploaded to the page and added some more. The thumbs are now a better size (to my liking) but the image quality of the thumbs and full size images are still really lousy. Also, the thumbs, when clicked on, will take you to a new blank page where only the full size image gets presented. I am sure that this is due to me not installing the Photoswipe jQuery plugin yet. There is also not any CSS happening as well. I can deal with the CSS later. Fortunately I am ok with CSS. But, I would prefer to use the FancyBox jQuery script to present the thumbs and full size images. Is that difficult? Any idea why the thumbs and full size images are so blurry? Thanks so much! Max
  13. Thanks Craig, I have to run to a wine tasting but I will look this over very carefully. I did try a couple of threads detailed in the forums but could not get any images or thumbs to appear on the front end page. I might be rushing through the process or missing some steps though... Max
  14. Sorry, I tried this but no images or thumbs show on my page... I get this message: Error: Call to a member function first() on a non-object (line 24 of /Applications/MAMP/htdocs/ProcessWire-SREP/site/templates/gallery-index.php) This error message was shown because you are logged in as a Superuser. Error has been logged.
  15. Ah, but the devil is always in the details...
  16. I tried using the ImagesManager module. I got the module working. I could upload images and see them in the module, but no images or thumbs appear on the desired front end page... Not sure if this is the best solution for me? I will look into your suggestions first Kongondo... Being able to manage image galleries is an absolute must for me. If I don't connect with the system that I use with PW to manage image galleries then its a total deal breaker. I am a photographer so this is a critical factor for me...
  17. Hi All, Moving onto the next stage of learning PprocessWire: photo galleries... I am NOT a coder so I need something simple to get going if possible. Requirements: * jQuery script like Fancybox or Colorbox, etc * Image file uploader from the PW admin system (front end) would be nice, but I am ok with uploading the images to the server via FTP if I have to. * Must have control over the generated thumbnail size. This is critical. The full-size images will be set by hand using Photoshop. * Access to the grid presentation of gallery thumbnails via a CSS file. * Pagination: ability to have a single page presenting one gallery of images or a page presenting multiple galleries on a single page. * Fast load times. * Ability to include image title names and captions OR the ability to not include titles and captions. Any obvious choices for me to explore here? I have seen a few threads that highlight some options but I thought I would present this question in detail as it might be good for others to follow in the future... Thanks!
  18. Craig, Brilliant! That totally works. Interesting reading on the config page as well. Thanks!
  19. I have a problem... In my original topNav I am using a single navsprite image for all five active & hover state links. I am using a little jQuery eye candy as well. The existing code looks like this: <ul id="topnav"> <li><a href="http://www.sitename.com/" class="home"><span></span></a></li> <li><a href="portfolio.html" class="portfolio"><span></span></a></li> <li><a href="services.html" class="services"><span></span></a></li> <li><a href="about.html" class="about"><span></span></a></li> <li><a href="contact.html" class="contact"><span></span></a></li> </ul> <!-- topnav ends --> I can hide these pages from links so that they do not appear in my second sideBar navigation. I am working locally on MAMP here. I then created the actual Portfolio page. I also have the Home page. The Home page address is //localhost:8888/ProcessWire-SREP/ If I click on the Portfolio link in the topNav I get taken to this page: //localhost:8888/ProcessWire-SREP/portfolio.html but get no content and a "the page you are looking for is not found" message. If I change the link in the topNav to read <li><a href="portfolio" class="portfolio"><span></span></a></li> (dropping the .html at the end) I get taken to the correct page with the URL of //localhost:8888/ProcessWire-SREP/portfolio/ showing. If I then click on a link in the sidebar and then click back on a link in the topNav I get the error message and the url of //localhost:8888/ProcessWire-SREP/site-map/portfolio (after visiting the site-map page) Obviously I need to make changes in the topNav UL. I need the empty span tags and the CSS classes for the positioning of the links and for the Jquery to work. I also think I need the .html to show at the end. Any pointers on where to go from here? Thanks!
  20. Good points! On the MODx forum there used to be a lot of chatter about the importance of the project development coming first and that any documentation was secondary. And the documentation that followed was written by and for developers. I get that, totally. But... What follows is the desire for the project to grow and become popular with different users. After a point the user base becomes stratified with different skills brought to the table. There are a ton of pixel orientated people who what to display content with minimal programming study. To serve these folks there are the forums. Any growing CMS needs a solid forum. Its just vital. What can happen with forum members is burnout from helping newbies. This can become infectious. The risk is that new members feel unserved and unwelcome while the forum base only sings to their own choir. What I see in visiting the various CMS sites is a ton of buzz words and lists of features. For the most part I find little content like "what do you want to build? This is how to get it done with MagicEasyCMS". Instead these details are usually presented in the forums for new users to dig through. My point is that good documentation and tutorials will help reduce the volume of new "how do I..." queries. As far as tutorials go videos can be wonderful. Producing good video tutorials is an art form all on its own. Too many tutorials feature video windows that are too small to see what is going on. Some lack voice narration with just recorded mouse clicks. Some move too fast or too slow or assume too much from the viewer. XXX Anyway, I came back at my self assignment and made solid progress on several steps. I moved the body placeholder in my template and created some test fields (using echo statements) in the sidebar area of my template and got it all working. I then hid the set in stone pages that are linked in my upper navSprite navigation (topNav). I then installed the MarkupSimpleNavigation module and added this to my sideBar section of my template: <?php $treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module echo $treeMenu->render(); // render default menu ?> And voila: my sideBar links are there! Some CSS issues with the links but I am ok with addressing CSS. So, I am feeling much better about things overall. Always a good idea to walk away when frustrated. Next up is feeling my way with presenting attractive photo galleries... Thanks again to all... Max
  21. Thanks guys. I had to walk away from this before my head exploded. Sort of dejavu with my experience learning MODx. Scheduling, work and circumstance creates periods where I am focused on building/managing sites and long periods when I do nothing. Coming back always seems to require refreshing my familiarity with the system I am working with. After getting quite comfortable with creating static sites I moved into Evo and then Revo, both MODx products. I sort of have a love-hate relationship with MODx. But the fact is that I have a lot of time invested in the system. When I say a lot of time I mean it. My brain is the limiting factor. Learning this stuff just requires major effort and frustration on my part. I just wish I could pick up programming and coding skills. I was ready to kill myself learning Fortran in college. There has been a lot of chatter on the MODx forums on the question: is this system a playground for developers and code geeks or can designers and end users actually deploy the system and get working on managing their content? To my eye MODx Revo is suffering in new added signal to noise ratio when it comes to learning how to get things done. I have read the PW API page and while it lists a lot of under the hood features it fails (IMHO) to provide the basic "what do you want to do & here is how you do it" roadmap for building sites. The MODx documentation was bogged down in geekdom before great people like Mary starting writing progressive tutorials on actually getting results. Most open source documentation follows a geeky format that is difficult to digest for new users. Snippet documentation would list endless parameters and code details but fail to explain why they would be useful and what they actually do. Designers, photographers, etc, really need easy to deploy and manage web sites. Systems like MODx and PW can be great tools for one sided brain types like me. I am a photographer by trade. Building sites is very much a secondary activity. I just wish the documentation was better. But enough. I am rambling here. I am not ready to give up on PW yet. I think I need to fiddle with it until I have that "aha" breakthrough. However, the other thing is the voice in my head which is telling me "after all this time with MODx why are you battling with a new system from the ground floor all over again?"
  22. I think I have too much to contend with. Soooo, I think you are right: I need to build a very basic HTML / CSS structure. I then need to start with a stripped down blank profile install of PW and start from there...
  23. Thanks Craig, I really do not know PHP and doing this is way out of my depth. I did follow the basic tuts I found and they went well. But I am really battling with getting an existing site to look and function properly in PW. Most of the content gets positioned below the container divs I want. Obviously I am missing how the default PW system placeholders get placed into a template. I need to get the fields to work where and how I want them before I figure out the navigation issues I started this thread with. Newbie issues for sure. But I cant help feeling my initial positive reaction to PW has taken a hit. Most forum threads I chase down seem to focus on code. I really want to get to managing the content...
  24. Hmmm, Really battling converting the MODx template into a system that PW likes. This will take more effort than I thought...
  25. Thanks! Keeping the topNav static will be simpler. I will try the MarkupSimpleNavigation module for the sideBarMenu now...
×
×
  • Create New...