Search the Community

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!

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.

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.

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

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

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.

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 Update: This website doesn't use ProcessWire anymore.

Hey guys! I just launched my new online portfolio. http://janploch.de/ This is my second site with PW and I really enjoyed working on it. Its in german, but I want to launch an english version soon (just have to figure it out). I would probably never have finished it without the help of this awesome community. Thanks for your support! Feedback appreciated. (The size of the Images are a bit heavy for mobile, I would like to improve that with "srcset" or the picture element, but Iam not sure how to do that with PW without multiple image uploads.)

Hi guys, just finished new portfolio site. My friend Piter did the design, i did all the coding. In portfolio you can see couple of our sites, all build on processwire. Site is still in tests, so there might be some bugs . Cheers. http://avenueagency.eu/

Just finished this site for artist Natasha Jade: www.artbynatashajade.com It's quite a flexible portfolio site and I would be interested in sharing the PW profile if anyone was looking to make a similar site, just get in contact with me. Thanks

Hello, recently started again with Processwire, building my portfolio as a spatial designer. I am stuck somewhere, as I've designed a template that I'm now integrating into my CMS. What I have is a very simple site that looks like this: Header Project container__________________________________________________________________ |Left Column with project text |Right Column with images from this project (collated vertically, multiple possible, image desc. is the text under the image) Footer The projects will also be collated vertically, the CSS and DIV structure is already working and error free in my example file, however, when I'm creating a new project in the Processwire manager, I have to manually place the images in the content form where the text also goes. So what I was thinking was to input the project description into the content form, and just let Processwire use the images that are already uploaded with that page without having to manually put them into the content. This way I can place the text separately from the image. Each one in their own div. The thing is that I have been searching how this could be done, and I have not found out. It's not a difficult page, and I am sure that what I'm asking should be possible, it's just that I need a bit of guidance of where to find it. Thanks for this wonderful CMS system - Marinus

HELLO! My new portfolio website is nearly finished and I would love some feedback and bugs if anyone has a moment. Built with PW using mixup.js, ajax, loaded.js, tons of css transitions and some custom slideshow and canvas bits. currently here http://benbyford.com/dev/new/ but will be moving it soon to replace http://benbyford.com Thank you!

Hey guys! Our first PW project is online, finally: www.typneun.de So, please do not look into the code TOO close - we are designers, not coders, OK? We started to develop this little portfolio site about 2 years ago, but didn't find time to finish it. So it took nearly 1,5 years to get it done till oct 2012. That's why much stuff is not perfectly coded right now. The site was developed with static html-files - until tonight when I launched the PW-website. Modules we are using: procache multilanguage/german redirects formbuilder (not yet, will come soon) Actually this site was our second one on PW, but the first one is still in development and will go online in a few days. The experiences we made with this first site and the help I found in this forum made me switch to processwire for our own website. So, thanks to all of you guys! Any ideas or criticism to make the site better? Comments are welcome...

I've recently updated my website. This is the first site I've made in it – although I have one other that's in progress (which unfortunately may never be used) – and compared to the process of making a site in something like Wordpress it was far simpler and quicker, and is much cleaner, easier and streamlined for updating, etc. It's a fairly simple site made with Twitter Bootstrap, Masonry.js and making use of the Dribbble API, with the aim of letting the images do the talking.

Hey guys, another green website from the processwire beginners based near munich. This website is our first REAL PW project - and (for us) one of the biggest sites we‘ve ever built. And actually the first one with a CMS/framework that we did totally on our own. So, don‘t be too negative - but don‘t be too positive either. http://www.roha-gmbh.de There are still many things that are not perfect yet, but since we started to design this website in 2011, it really was time to get it "into the wild" now! Many furniture manufacturers still haven‘t sent their best product images, so that is why there are still some lowres images in there. The project chapter needs some work on the photos as well, but that time will come... The site is not responsive yet, because it wasn‘t our main goal in 2011 - so we only wanted to get it working on tablets and phones, but without any special mobile styles. This will come, but that may take a while. The modules we used: - formbuilder - procache - redirects - versioncontrol - sitemapxml I‘m totally glad I found processwire a few months ago, because at first we planned to get that site done with pure static html. Which would not be TOO nice with about 80 html pages and many, many images (about 400). Finally a few "thank you"s to ryan, soma, diogo (for creating processwire and your help in this lovely forum) and to mademyday (for posting this on twitter, which made me read about processwire). Comments are welcome! Of course!

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 ) All critic, suggestions etc is welcome: http://pw4.nogajski.de/

Hi everyone. I'm coming to an old thema of mine. When it comes to present different sized and different orientated images on screens, it is always a bit frustrating. Maybe most time (on desktop) there is a landscape oriented widescreen, on which you can show a panorama image (2:1) very large but that it fits into the viewport. If you want to show a square image (1:1) you only have the half (content/amount?) of surface area. (The image only has half superficial content). And if you want show a Portrait (maybe 2:3) this image is somewhat more smaller displayed than the square one. So, I'm searching for some math that calculate dimensions depending on a equivalent superficial content and depending on the available viewport. Puh! But maybe it also shouldn't be a (technical) linear one. when downsizing the panorama to an equivalent, it looks a bit poor, alone in the viewport. For example, with the width and height of an image one can create a superficial content number: 100 is a square, 200 is a 2:1 and so on: 1:1 = 100 5:4 = 125 4:3 = 133 3:2 = 150 2:1 = 200 Is there anybody on the forums who can build a elegant maths formula for that? Or there are other suggestions, thoughts to that?

My very first PW site: http://fantastique.ch/ Launched a week ago. The bulk work was not design or scripting / CMS-related, but writing copy and choosing what work to include and what not. Oh, and exporting tons of data from MODX Evo and import to PW (lots of data was in an ancient site / on another domain). It was a great learning process, and I must say it's a real pleasure working with PW. Thanks for all the help I got so far with my n00b questions in here. I'm not happy yet with the frontpage (should add more content and probably more visuals). I'm gonna add some case studies (simply describing a project from start to finish in more detail). And if I really have a full week or two, add a german version as well. Initially, I wanted a multilingual version from the get-go, but I decided it's better to launch something, rather than nothing. In June, I'll launch my 1st PW-powered client site. Looking forward to discover even more PW awesomeness along the way.

This case study relates to the topic here: http://processwire.c...ndpost__p__8988 about creating an archive of 'stories' about how PW has helped in relevant real life scenarios. Website: http://www.ray-dale.com RayDale Multimedia Ray Dale is a multimedia designer. His portfolio website was 2 years old as of March 2012 and in need of a refresh. He found that the content management for his website was more time consuming than he wanted and the website was generally slow in performance and complex to update. Ray needed: A website that could showcase his latest work with separate portfolio content types The ability to show lots of images and videos in each section Complex interlinking between each portfolio item - where each item would belong to a number of simultaneous categories To be able to publish a number of pages under various sections on the website To have a condensed navigation structure - not over-facing the user with navigation A blogging space that was easy to update To gain complete control over the HTML, CSS & JS markup and therefore the design of the website The ability to take more control over the admin experience - without using a host of plugins - so that the CMS could be used for clients to make their lives easier Speedy performance - even if a shared hosting platform were used Good site security The previous solutions Ray was previously using Drupal as a content management system. Drupal is a great system, it’s incredibly flexible, it can be made faster and using template overrides, almost complete control can be taken of the HTML and CSS output. However, the process to achieve any of this is time consuming and clunky from a web designer / front end developer perspective. Drupal was also going to require a number of plugins to be installed to achieve a lot of the required functionality. Ray tested migrating his website over to WordPress. WordPress is another fantastic blogging system with light CMS functionalities. WordPress is generally easier to use than Drupal and a lot of control over the HTML & CSS markup can be delivered - in a much easier manner than Drupal. However, WordPress is still light on CMS features in the admin system. This means that it is difficult without either using a lot of plugins or custom php development (using the WordPress API) to have custom content types and fields. The decision to use ProcessWire Having searched around for an alternative to Drupal and WordPress - revisiting other CMSs that Ray had also previously used - Ray eventually landed on ProcessWire having read about it on a forum. Right from watching the initial video produced by Ryan Cramer (the creator of ProcessWire) Ray was intrigued by the possibilities that ProcessWire seemed to offer - effectively solving all of the issues currently faced. To summarise ProcessWire offered: Custom content types in the admin Custom field types in the admin Good control over media uploads A simple to use admin system A neat and simple API for custom frontend / backend development A customisable admin experience The ability to have a custom admin url Complete control over HTML markup Good security with flood control A powerful and flexible templating system (that was also simple) Ray was extremely impressed by the features that ProcessWire offered, however, many CMSs look great until you actually start using them - where the unnecessary complexities, weak architecture and terrible, bloated functionality often start to appear. The functionality seemed so promising that a gamble was taken to build the Ray Dale Multimedia website - with very little time now available - to ProcessWire and test how it performed. Building the website Having built the original Ray Dale Multimedia website in Drupal, then converted to WordPress before deciding to gamble on ProcessWire - Ray now had very little time left to build his portfolio website. As a testament to the ease and speed of using ProcessWire - he was able (with a little help from articles in the forum) to rebuild the Ray Dale Multimedia website in two days of effective full time development. This included all of the content creation and learning the new system - with the inevitable (but surprisingly smooth) learning curve. Enabling complete control over output ProcessWire allowed Ray to write HTML and CSS without any of the interference you get from other CMS systems. So, Ray was able to use the following frameworks of his choosing: HTML5 boilerplate jQuery Modernizr Masonry A customised version of the 960 fluid grid system PrettyPhoto for lightbox images Less - to create minified CSS Though it must be said that literally anything can be used as ProcessWire makes no assumptions on the frontend - even on the Javascript framework. Quick and easy API One really pleasant surprise was the jQuery influenced API that ProcessWire offered. For example you can use php queries such as: $pages->find("selector"); $pages->get("selector, path or ID"); to find content in the system - you can even filter your queries by template type, fields attached to that item, etc. You can even use a range of selector operators. The API effectively works as a super powered and infinitely more flexible alternative to the WordPress loop. Cross referencing pages easily Complex cross-linking between portfolio items was needed so that capabilities, technologies and services could be linked to each item. It was easy to create a taxonomy system that worked the exact way required once the fundamental concept of how pages work in ProcessWire was understood. Building navigation that works Unlike a lot of CMSs that work effectively as ‘bucket systems’ - meaning that content is separate from any kind of structure or hierarchy by default in the system - whereas everything in ProcessWire is a page and arranged hierarchically. Whilst this may seem strange and restrictive to some used to the aforementioned ‘bucket systems’ - it works incredibly well and enables you to build navigational structures that are easy to plot a current location in. It is also something easy enough to break away from if you want a more ‘bucket’ type system. For example, in Drupal and WordPress it can be very difficult to highlight the navigation on a website if you are using custom content types. Try using custom post types in WordPress and keeping your navigation tracking which page the user has landed on - it’s extremely difficult without a fair bit of custom development (this is true as of the time of writing - WordPress 3.3.1). Because ProcessWire uses a structure and hierarchy by default - this structure makes building navigation that can track the current page very simple. Easy / flexible admin system The admin system in ProcessWire was easy and fluid to use, logical and stable. The admin system can also be overridden with templates (there are already some great community contributed templates). Modules used Whilst ProcessWire has a number of contributed modules from a thriving and helpful community - absolutely no additional modules were needed. All functionality on the website was achieved from a vanilla version of ProcessWire. Performance Another area of importance was the performance of ProcessWire. Again, Ray found this aspect to be well covered with built in caching capabilities that were thoughtfully included ‘out of the box’. The caching was simple to enable on templates and fields. The memory footprint of the Ray Dale Multimedia website was a third of that of Drupal on the same website without using addon caching plugins. Challenges The only real challenge faced was understanding that ‘pages are everything’ in ProcessWire. You build categories, taxonomy, articles, blog systems with the ‘page’ (and any fields it contains) being the basic building block for all of this. ‘Pages’ in ProcessWire can be attached to templates and injected with fields to enable the creation of literally anything conceivable. However, understanding this concept takes a little work for people used to other CMSs such as Drupal, WordPress and Joomla. However, in context - and compared to other systems - this learning curve is still fairly easy. There are so many other time savers that this learning curve becomes negligible. The other area that Ray had to understand about ProcessWire was that there aren’t any template system paradigms that exist in Drupal and WordPress. Other systems have parent and child templating systems with default parent templates that can be leveraged, however, because ProcessWire makes no assumptions on how you are going to build a project (being a true framework) you currently need to create your own template files. This is made easy by good documentation on the ProcessWire website and a decent set of ‘starter’ template files that come as part of the default install. Conclusion ProcessWire was an absolute dream to work with. Ray found it to be very stable, well thought out and hugely flexible. So much so in fact, that Ray has decided to standardise on using ProcessWire for upcoming web design projects. The flexibility and simplicity of the admin system, combined with power in frontend development that ProcessWire provides is something that Ray found to be liberating and more importantly ‘best in its class’.

Hello processwire users i am new here. I used to do my sites with wordpress, but i read many good things about processwire and i would like to give it a try on a small project. I'd like to do a simple multilingual portfolio with a blog. I read a few tutorials and watch a few videos already. From what i understand there are many ways of using processwire to achieve this project. I would like to explain the website details so you could indicate me the right way to do it and the good modules to use. I already did the html / css / js for the front end. it is in 3 languages : english (en), spanish (es), french (fr) it uses 2 templates : project list, project page. 1. the project page contains the following informations : title description text date category tags photos (not translated) embeded content from the web (same for every language) the blog posts behave like projects posts. One category would just be named "blog". the url are like this : www.urlofthesite.com/language_code/date/project 2. the project list is used for homepage, categories page, tags pages the url are like this : homepage : www.urlofthesite.com/language_code/ www.urlofthesite.com/language_code/category_name/ www.urlofthesite.com/language_code/tag_name/ translations all the fields are translated except photos and medias. i would like to be able to translate tags and categories from one place and then assign them once to a project (and not re-type them in every translations) I would appreciate any advice or more about the best way to do a project like this. especially concerning the modules to use and the way to handle the translations. thank you

Hey, guys. After much reading, learning, and experimenting with ProcessWire, I finally have something to show: humblebump.com It's not totally finished - there are some features I want to add - but I feel good shipping it as is and adding as I go. ProcessWire is great because I can add things as I learn. It's really flexible. Thanks for checking it out. Let me know what you think or if anything looks/works strangely.

Hey everyone, I'm trying to build a single-page portfolio on ProcessWire, I think I've got the header and footer right, but I'm having doubts on how to setup the portfolio area. I was hoping you guys could give me a hand since I'm very used to ExpressionEngine designer-friendly tags. My english is not very good so I created an image to show what I'm trying to do: http://i46.tinypic.com/23r1tl3.png So I'm trying to figure out is: -how to create the slider for every project I add -how to create tags or categories for every project The date I suppose I should use the datepicker field, right? And title and description are basic text fields...

I'm a Toronto-based web designer and developer. Tinacious Design is my ProcessWire-powered website and it includes my web design and development portfolio and information about my services. See the website here: TinaciousDesign.com The back-end uses a modified version of the Moderna admin theme. I also posted a video on Vimeo showing the behind-the-scenes process of adding a new portfolio item.

I just launched a site for my brother, a New York based travel photographer: http://bit.ly/PXw2bI I've been developing in WordPress for the past five years. While not my first ProcessWire site, it was refreshing to develop in a flexible content management system without the "bloat."

I'm working on a portfolio site where I want the following public site structure that organizes projects by categories: /work/ -> Listing of all projects /work/strategy/ -> Listing of strategy projects /work/user-experience/ -> Listing of user experience projects /work/development/ -> Listing of development projects Then, projects would be structured as: /work/project-name-a/ /work/project-name-d/ /work/project-name-c/ /work/project-name-e/ ... My question is, what is the best field type to use to categorize projects? Should I use a Page with Multiple pages (PageArray)? I guess my confusion is moving from WordPress categories/taxonomies to PW's use of pages. Any insight would be appreciated.