Creating an online portfolio

Hello,

I’m working on a site that will act as a portfolio for a friend of mine. This is my first time making a fully-functional site using MODx, so I’m still learning at a rapid rate.

My main hurdle at the moment is trying to figure out the best way to create the gallery section of the site. The aim is to have a page (called "gallery") which will comprise of a grid of links (an image and some text) to each seperate project. The image portion of each link would hopefully be generated by one of the images that would appear on the subsequent page - perhaps even a user-defined image, rather than, say, the first one purely by default. The text part would also be most likely dragged from the title of each project entry.

Not being too familiar with CMSes or server-side scripting, I’m not sure how I should approach this or which plugins I ought to consider acquiring. I’m not necessarily after a step-by-step, just a pointer in the right direction, and hopefully I’ll be able to read up on the various approches.

Thanks in advance.

Chris

If you are using Revolution, you can use the Gallery extra to implement your gallery.

It’s reasonably good and there’s a good tutorial on how to tweak it using the built-in support for Galleriffic for front-end display.

Nicely posted question!

There are lots of approaches here. First off, are you planning on using Evo or Revo? Both have pluses and minuses when portfolio presentation is a priority...

Thanks both for your responses.
I always forget to mention: I’m using Revo.

I’ve looked at the Gallery plugin, but I’m not sure it wholy addresses this scenario - I could be wrong though.

The way I envisage it would be almost like a blog, in that the client would enter in a whole project in one go, so: the title in one field, year in another, any additional text in another, and all associated images, etc...

Ideally this would just be done once for each project page, and then any and all required data for the main gallery page would be taken from these various entries.

It seems as though Gallery, or at least the info I found here http://rtfm.modx.com/display/ADDON/Gallery only really supports images.

Am I wrong on this one?

Like I said there are lots of ways of doing this...

If I was doing this I would create a design system to present your individual containers for each gallery project. All of these projects could then go into one container document. You could use getResources to aggregate all the galleries. If you wanted to add text, a headline and a teaser image to each gallery project then you could design a mini template for this system. You could then build a TV system (Template Variables) for the headline, intro text, teaser image, etc, and then include a chunk that would present your snippet call for the Revo Gallery system. So far the best system I have found for making Gallery function well is this: http://modxrules.com/articles/modx-revolution-gallery-with-colorbox-and-jquery-asynchronous-image-loader-jail

The nice thing about using TV’s via custom chunks is that you can go to town with adding custom CSS/design/layout etc.

I have done all of this with Evo using MaxiGallery, EvoGallery, jQuery, TV’s, custom chunks and lots of CSS. It sounds complicated but its pretty straightforward and you can get the look and functionality you want. Others with more scripting skills will take a different approach I am sure.

Lots of different ways of getting there with MODx...

Max

Let me just see if I understand you correctly.

If I was doing this I would create a design system to present your individual containers for each gallery project. All of these projects could then go into one container document.

So, create a template for the projects and keep all of these within a "folder" within the resource tree.

You could use getResources to aggregate all the galleries. If you wanted to add text, a headline and a teaser image to each gallery project then you could design a mini template for this system.

Then create a template for the main gallery page that collates each project via getResources.

You could then build a TV system (Template Variables) for the headline, intro text, teaser image, etc, and then include a chunk that would present your snippet call for the Revo Gallery system.

This part I’m not so clear on, i.e. where I need to allocate the TVs exactly - in the main gallery page?

Thanks for you help in all this, I’m just not quite used to the terminology and logic.

Sorry to confuse you. Please understand I am not an expert here.

Some of the Evo & Revo gallery/portfolio presentation tools can handle presenting images in one folder or presenting a series of sub folders or child galleries. If you rely on this you will need to adjust the snippet call for the gallery system you are using accordingly.

If you want to go the extra step and present a styled system (beyond just folders of images) of presenting a headline, intro text, teaser image and then a dynamic gallery system (with image thumbnails the lead to a full size image presentation) then I am saying you can design a custom system to present this using TV’s and some of the existing MODx placeholders when you create each gallery page.

You might want to get your feet wet with presenting a blog like system using getResources. I am just getting used to doing this (with Revo) myself, but I have done this before using Evo using the Ditto snippet. I am always looking for usable "hooks" to attach usable CSS onto. Sometimes I create chunks and TV’s for this purpose.

Adding TV’s (with good descriptions of what they do) makes adding these content elements easy for my clients as all they have to do is fill in the relevant boxes. Its always a good idea to make things simple for the person who will be responsible for managing the site overall. You might want a specific page template just for these gallery pages.

For now I would focus on getting a working version of Gallery to function. I am not in love with this snippet though. That link I added earlier is a good read (the best solution I have found so far). From there you can add individual gallery pages to your parent gallery page.

I think I understand your working now, at least it makes sense in my head - hopefully in practice soon.

I’ve used the getResources plugin in an elementary fashion already, so building on that shouldn’t be too tricky. I’ll have a proper investigation in the next day or two and see where it gets me.

Thanks again for your help.

Look forward to seeing what you come up with.

I sort of avoid reaching for programming solutions as I just suck at programming. Your kind of question might prompt a different solution from a guy who can whip up a PHP script in minutes. I, on the other hand, need to figure out out to combine the snippet, the snippet call, MODx placeholders, added DIVs, custom chunks, TV’s and custom CSS. But MODx is so wonderfully flexible that I can get the job done.

One thing I have found with MODx: I really learn a lot by creating fresh installs of the system locally and then building the most basic and simple templates. I then add one piece at a time. I then use the generated code to help me find my way "through the darkness." Some tutorials and documentation use fancy downloaded templates etc. These are great but all that template goodness adds a lot of generated code. I like to strip things down to its simplest form possible while learning/exploring. Examining the generated code will often reveal all kinds of useful guidance on how MODx works and produce some wonderful "hooks" to add/modify CSS etc.

Good luck!

I’ve been playing around with this all day, and although I’m getting somewhere I’ve hit a bit of a stumbling block...

I’ve created a test album called "project1" and put two images in there simply called "albumimage1" and "albumimage2".
Then, I created a new document also called "project1" (so I can link to the album of the same name) which currently has the content:

This won’t stay in the content section - I’ll eventually put into a chunk - but it’s easier if I work with it here for now.

The problem I have is that I’d like to be able to display the full images here, not the thumbnails that are generated, but I’m really struggling to figure out how to do this. I’m sure for many users it’s a simple task, but I’m not familiar with php enough to follow the data trail and fix this issue.

Any suggestions?

Edit : I’ve found the culprit. In case anyone else comes across this issue, the contention lies in the galItemThumb Chunk. The line that says...

...should read...

..and all works as intended.