Symphony.

Hello,

I’m looking to redesign my portfolio website and add a back end to it. I have played about with Symphony, and managed to create a basic portfolio page, that gets an image, client name, and description.

However, on my current portfolio page, some projects display one image and when clicked on it opens a lightbox which can then scroll through multiple images from that project. To get a better idea, my portfolio is at www.165studios.co.uk. I basically want to replicate how the portfolio bit works.

A workflow idea would be along the lines of:

• add client name
• add description
• add image
• the option to add another image

I would also like it if I could just upload the full size image, and it would auto crop it and display that.

Another thing is, I have some movie files there too, obviously with a static image to click on it. How would I go about doing that too?

My heads becoming confused already, so I hope some of you would be kind enough to help me out!

Thanks!

Can you do this? Yes. Easily.

The client name and stuff… Yeah your’e just filling ou a form. For multiple images look at Nils’ Subsection Manager extension. You could also use this to upload an image and relating video file (or image and link to video file).

The image cropping bit… That’s the reason I chose Symphony over the myriad of other open source content management systems out there. It has the JIT Image Manipulation extension by default. What this allows you to do is change the URL and have the image resize, crop, crop to fill, resize, scale, add background buffer space if you’re scaling and it doesn’t fit the dimensions… All of it is done automatically. I use this on all my site snow so my client can upload one image and it will automatically make a thumbnail and automatically make the image X pixels wide and tall for the light box.

Every content management system in the world should have this feature. It basically takes what is a long tutorial for WordPress and makes it a three minute little blurb.

Thank you for the reply!

The Subsection Manager looks great. I will have to install the newer 2.08 version it seems, which is no problem. As its in RC state, I assume it should be stable enough to run live on my website.

I will look into the JIT extension to figure out how to use it!

Yeah, Wordpress is annoying for the hacks it needs sometimes. I’m very familiar with it, so I could probably use it on my site, but I want to use something that contains only what I need. Symphony seems perfect for that!

2.0.8RC3 is pretty rock solid. There’s been a lot of talk of pushing it out as the final version and putting some more focus on 3.0.0 (which is expected sometime later this year, I think).

I managed to break something using 2.08RC3 and Subsection Manager! However, it does seem to work with 2.07, so I’ll stick with that for now.

One thing I am confused about is when adding the Subsection Manager field into the section, it asks for a “Related Section”.

I am not entirely sure what this is wanting. My guess is possibly a separate image section where it pulls images from. I am going to have a play about soon to see if I am right, but if anyone could explain beforehand, that would be great!

Cheers.

The subsection manager allows you to manage entries in another section, so the related section it asks for is the section to manage with the field, i.e, like you say, an image section.

It’s super useful…

I’m not sure if I’m setting this up right or not, but using Mediathek, it works.

I have this at the moment:

A section titled “Uploads” A section titled “Portfolio”

“Uploads” contains a text box and an upload field. “Portfolio” contains the Subsection Manager field, with the related section set too “Uploads”.

When I go to add content in the “Portfolio” section, Subsection Manager just says “There are no selected items”. However, if I use Mediathek, I get the option to edit or create a new entry.

Is there anything I am missing to get Subsection Manager working?

My guess is you didn’t grab the Stage or Draggable files?

I say this a lot, but keep in mind that the Subsection Manager is still in beta and that features might (no: will) change in the final release. With the final release there will be a download package bundling Stage and Draggable directly so the usual problem of missing submudules should be solved.

I do have draggable and stage in the lib folder yes, both in there own folder. Is this correct?

Cheers!

Just to update, I completely removed Subsection Manager, and re-downloaded it and the other two files. It now works so I’m not too sure why that happened!

I’m having issues when using a standard upload field in it though. When I select a file to add, it doesn’t show up in the upload box even though it does add it. Is that supposed to happen?

Now I guess it’s time to figure out how I can make it function like my current portfolio!

Apologies for the tripple post, however I just need a little advice on the same subject!

I have dropped Subsection Manager for now, and on my Portfolio Section, I am using 4 upload fields, as I shouldn’t need any more than that.

They are titled “item-one”, “item-two”, “item-three”, and “item-four”. What I am doing is seeing if each item exists, and if it does, output the correct HTML which my lightbox needs to work. “item-one” is also used for a thumbnail. My code is this:

<xsl:for-each select="entry"> 

    <!-- display thumbnail and link it to the item-one -->
    <a href="{$root}/workspace{item-one/@path}/{item-one/filename}" rel="prettyPhoto[{@id}]">
    <img src="{$root}/image/2/120/60/5{item-one/@path}/{item-one/filename}" /></a>
    <!-- if the other items exist, add a link to the items for lightbox use -->
    <xsl:if test="item-two"><a href="{$root}/workspace{item-two/@path}/{item-two/filename}" rel="prettyPhoto[{@id}]"></a></xsl:if>
    <xsl:if test="item-three"><a href="{$root}/workspace{item-three/@path}/{item-three/filename}" rel="prettyPhoto[{@id}]"></a></xsl:if>
    <xsl:if test="item-four"><a href="{$root}/workspace{item-four/@path}/{item-four/filename}" rel="prettyPhoto[{@id}]"></a></xsl:if>

 </xsl:for-each>

Is this the right way to do to it? Or is there a better way?

Thanks.

Maybe something like…

<xsl:for-each select="entry/*[starts-with(name(),'item')]"> 
    <a href="{$root}/workspace{@path}/{filename}" rel="prettyPhoto[{../@id}]">
    <img src="{$root}/image/2/120/60/5{@path}/{filename}" /></a>
</xsl:for-each>

There are a number of ways to do it, for-each vs apply-templates and so forth, but the key is that you’re repeating the same markup for each item, so you want to keep that DRY.

Thanks for the input. The code you have displays all images uploaded, however I only want to display one from each entry, with the lightbox doing the rest. The outputted code needs to be basically:

<a href="image1.jpg" rel="prettyPhoto[id#]><img src=image1-thumb.jpg></a>
<a href="image2.jpg" rel="prettyPhoto[id#]></a>
<a href="image3.jpg" rel="prettyPhoto[id#]></a>

Item-one is my thumbnail image, linking to the bigger version. Then any other images added just need to be links My way works, but I’m sure there will be a better, more flexible way, in case I add more than 4 upload boxes.

Here’s another way, assuming you prefer to use for-each since you’ve used it above:

<xsl:for-each select="entry">
    <xsl:for-each select="*[starts-with(name(),'item')]">
        <a href="{$root}/workspace{@path}/{filename}" rel="prettyPhoto[{../@id}]">
            <xsl:if test="name() = 'item-one'">
                <img src="{$root}/image/2/120/60/5{@path}/{filename}" />
            </xsl:if>
        </a>
    </xsl:for-each>
</xsl:for-each>

Not sure how this would compare performance-wise to the above, since it’s got more iteration but fewer conditionals. It’s cleaner, though, in that if you ever need to change the link markup, you do so in one place and not four.

I’m sure someone else can think of something nicer…

Thanks for that, I only used for-each as thats all I know at the moment, if there is a better way, then I’m happy to use that. That code is almost there, however there is one bug with it; it outputs this:

<a href="image4.jpg" rel="prettyPhoto[id#]></a>
<a href="image3.jpg" rel="prettyPhoto[id#]></a>
<a href="image2.jpg" rel="prettyPhoto[id#]></a>
<a href="image1.jpg" rel="prettyPhoto[id#]><img src=image1-thumb.jpg></a>

This means when the lightbox opens, instead of clicking next, I need to click previous. The one with the image needs to be at the top of the list.

Had to abandon this project for a while, but I’m back on it now!

I’m using Subsection Manager now, and have the posting of images/thumbnails working perfectly.

As said above, I want it too look like my current portfolio (www.165studios.co.uk). What would be the best way too to add the intro text, profile text, and the contact sections seeing as the content is on the same page?

Also, is it possible too re-order published items? I’d like to have the option to change the order of uploaded portfolio items.

Cheers!

You could always make a section that’s the content for that page and then use the Static Section extension to make it one entry only. That’s what I tend to do.

That is, if I’m not just writing the copy directly into the page’s HTML.

Thanks, that looks like it will do the business!

I’ve found an order extension too, which supports drag and drop from the back end. (http://symphony-cms.com/discuss/thread/557/1/) this will certainly come in handy to organize my portfolio!

With a basic grasp on XSLT, I’m finding Symphony brilliant. I might even go the extra mile and put categories in for a more dynamic portfolio… I’ll be back here if I get stuck!

Not sure if you know but other than the resources here, I highly recommend this site by Stephen Bau - http://designprojectx.com/tutorials/hello-world-a-basic-xsl-stylesheet/

Really useful if your just starting out.