Custom Layout with varied thumbnail layout vs grid pattern

[dereksurfs]

Hello,

I am interested in creating a custom thumbnail layout with a varied pattern that looks like a collage.  Gizmo recommended looking into possibly using cpmFetch for this as it probably will not work within CPG. 

Instead of every thumbnail looking exactly the same in the standard grid layout I would like to do something like this photographer/web designer did:
http://www.widerange.org/gallery.php?gallery=LargeFormat

This is a php template based layout.  If you examine the layout you will see a pattern emerge based around *two* thumbnail sizes.  This pattern consists of tables with varied rows, number of columns and sizes which repeats itself every ~15 images.  The three primary challenges in doing this are:
1.  Using two thumbnail sizes.
2.  Creating a more complex table based pattern (vs. standard grid layout) which repeats itself every ~15 images.
3.  Using CPG & cpgFetch functionality to perform layout.

As far as the first challenge, I could create the larger thumbnails myself if need be and place them in a different directory/sub directory.

And for the second challenge, I have already examined the discovered the more complex table based pattern used.

The third one is the larger challenge for me after examining CPG's current thumbnail template and function structure - The template_thumbnail_view is very simple.  It is just a template for a single cell in a table containing 1 thumbnail which will then repeat n times.  I think cpgFetch is also based on a single repeated cell pattern.  But I haven't examined the code in detail yet. 

My question is would it be possible with cpgFetch to create a custom thumbnail template made up of *more* than one image like the one shown above and use that layout instead?

Thanks,
Derek

[vuud]

Hello,

I am interested in creating a custom thumbnail layout with a varied pattern that looks like a collage.  Gizmo recommended looking into possibly using cpmFetch for this as it probably will not work within CPG. 

Instead of every thumbnail looking exactly the same in the standard grid layout I would like to do something like this photographer/web designer did:
http://www.widerange.org/gallery.php?gallery=LargeFormat

This is a php template based layout.  If you examine the layout you will see a pattern emerge based around *two* thumbnail sizes.  This pattern consists of tables with varied rows, number of columns and sizes which repeats itself every ~15 images.  The three primary challenges in doing this are:
1.  Using two thumbnail sizes.
2.  Creating a more complex table based pattern (vs. standard grid layout) which repeats itself every ~15 images.
3.  Using CPG & cpgFetch functionality to perform layout.

As far as the first challenge, I could create the larger thumbnails myself if need be and place them in a different directory/sub directory.

And for the second challenge, I have already examined the discovered the more complex table based pattern used.

The third one is the larger challenge for me after examining CPG's current thumbnail template and function structure - The template_thumbnail_view is very simple.  It is just a template for a single cell in a table containing 1 thumbnail which will then repeat n times.  I think cpgFetch is also based on a single repeated cell pattern.  But I haven't examined the code in detail yet. 

My question is would it be possible with cpgFetch to create a custom thumbnail template made up of *more* than one image like the one shown above and use that layout instead?

Thanks,
Derek

Well, you could definately use CpmFetch to get the image data into nice rows and then write the code around it to produce whatever that is...  If you could describe the pattern that one uses, and how it would happen that could help me to point you in the right direction.

One thought I had was to abstract the whole output thing into selectable sets, so people who wanted to do HTML, CSS Layout, Javascript, whatever... could easily (for a coder) do that.

[dereksurfs]

Vuud,

The pattern thats creates the layout for http://www.widerange.org/gallery.php?gallery=Fourteeners consists of two main tables with nested tables inside them.  Here is the code to the first main table:

Code Select Expand


  <table1 border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>

    <td1 valign="middle">

      <table2 border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
  <td colspan="2" valign="middle">
    <div class="thumb"><a href ...><img src="/images/mediumLarge/sneffelsAspen.jpg" ></a></div>
</td>
       </tr>
       <tr>
<td valign="middle" align="center">
   <div class="thumb"><a href="photo.php?id=597&gallery=Fourteeners"><img src=wetterhornDawn.jpg" ></a></div>
         </td>
<td valign="middle" align="center">
     <div class="thumb"><a href="photo.php?id=592&gallery=Fourteeners"><img src="septUncompahgreBW.jpg" ></a></div>
</td>
</tr>
       </table2>

     </td1>

     <td1 valign="middle">

       <table2 border="0" cellspacing="0" cellpadding="0" align="center">
         <tr>
    <td valign="middle">
        <div class="thumb"><a href="><img src="septWetterhornBW.jpg"></a></div>
    </td>
    <td valign="middle">
      <div class="thumb"><a href="><img src="/wilsonDawn.jpg" alt="Wilson Peak, Telluride"></a></div>
    </td>
  </tr>
  <tr>
    <td colspan="2" valign="middle">
      <div class="thumb"><a href><img src="images/mediumLarge/wetterhornFlowers.jpg"></a></div>
    </td>
          </tr>
</table2>

      </td1>

    </tr>
    </table1>


* Note that I numbered the table elements to indicate depth (ie - outer table, inner table).  As you can see this pattern consists of six images (2 larger thumbs, 4 smaller thumbs).

I liked your idea about placing the image data in sets.  I was thinking I could fetch the data into two sets/arrays - one for the smaller thumbs and one for the larger thumbs.  Basically retrieve all images which belong to a specific album name.  Then iterate thru the sets or arrays and populate the template.  In the pattern above it would load:
1st table row -> 1 larger thumb, 2 smaller thumbs
2nd table row -> 2 smaller thumbs, 1 larger thumb

The part I am not sure about is how to populate a template like the one above.  Maybe the template would contain largeThumb1, smallThumb1, smallThumb2, smallThumb3, smallThumb4, largeThumb2 variables which could then be assigned to elements of the sets retrieved from cpmFetch.

Any help or ideas as to how this layout might work would be appreciated.

Thanks,

Derek

[vuud]

Vuud,

The pattern thats creates the layout for http://www.widerange.org/gallery.php?gallery=Fourteeners consists of two main tables with nested tables inside them.  Here is the code to the first main table:

Code Select Expand


  <table1 border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>

    <td1 valign="middle">

      <table2 border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
  <td colspan="2" valign="middle">
    <div class="thumb"><a href ...><img src="/images/mediumLarge/sneffelsAspen.jpg" ></a></div>
</td>
       </tr>
       <tr>
<td valign="middle" align="center">
   <div class="thumb"><a href="photo.php?id=597&gallery=Fourteeners"><img src=wetterhornDawn.jpg" ></a></div>
         </td>
<td valign="middle" align="center">
     <div class="thumb"><a href="photo.php?id=592&gallery=Fourteeners"><img src="septUncompahgreBW.jpg" ></a></div>
</td>
</tr>
       </table2>

     </td1>

     <td1 valign="middle">

       <table2 border="0" cellspacing="0" cellpadding="0" align="center">
         <tr>
    <td valign="middle">
        <div class="thumb"><a href="><img src="septWetterhornBW.jpg"></a></div>
    </td>
    <td valign="middle">
      <div class="thumb"><a href="><img src="/wilsonDawn.jpg" alt="Wilson Peak, Telluride"></a></div>
    </td>
  </tr>
  <tr>
    <td colspan="2" valign="middle">
      <div class="thumb"><a href><img src="images/mediumLarge/wetterhornFlowers.jpg"></a></div>
    </td>
          </tr>
</table2>

      </td1>

    </tr>
    </table1>


* Note that I numbered the table elements to indicate depth (ie - outer table, inner table).  As you can see this pattern consists of six images (2 larger thumbs, 4 smaller thumbs).

I liked your idea about placing the image data in sets.  I was thinking I could fetch the data into two sets/arrays - one for the smaller thumbs and one for the larger thumbs.  Basically retrieve all images which belong to a specific album name.  Then iterate thru the sets or arrays and populate the template.  In the pattern above it would load:
1st table row -> 1 larger thumb, 2 smaller thumbs
2nd table row -> 2 smaller thumbs, 1 larger thumb

The part I am not sure about is how to populate a template like the one above.  Maybe the template would contain largeThumb1, smallThumb1, smallThumb2, smallThumb3, smallThumb4, largeThumb2 variables which could then be assigned to elements of the sets retrieved from cpmFetch.

Any help or ideas as to how this layout might work would be appreciated.

Thanks,

Derek

Are you sure this is dynamically generated? The source looks strangely neat and efficent.  Not hallmarks of a generated page.

[dereksurfs]

LOL...

Yes,

I think the 'strangley neat' part is due to the fact that I had to clean up the code so that I could *read it* and recognize the pattern used.  If you view source on the web page above you will see that it is much harder to read.

Also I know a photographer who uses this template and everything is generated for him from the PHP template.

- Derek

[vuud]

LOL...

Yes,

I think the 'strangley neat' part is due to the fact that I had to clean up the code so that I could *read it* and recognize the pattern used.  If you view source on the web page above you will see that it is much harder to read.

Also I know a photographer who uses this template and everything is generated for him from the PHP template.

- Derek

Can you get ahold of the php template?  Be easier than reverse engineering.  Thats assuming its OSS

Oh, incidentally:
1.9.5 released tonight:  see this post
http://forum.coppermine-gallery.net/index.php?topic=39640.0

But more relevant is that I opened a new file for my layout management plan, then decided it would kill me to try it before this release.  So anyway, that is close.

[dereksurfs]

The template is not open source and I cannot get a hold of it.  That is why I want to create something similar myself which can be made available to the OSS community.

Since I have figured out the pattern (which can be varied), I think the tricky part left is figuring out how to populate it with CPG thumbnail data.  What do you think of placing thumbnail variables in a template representing different layout locations? 

Your idea of using data sets helps decouple image data from layout structure which can offer more flexible use.  The new layout management plan sounds promising.  If you could build it flexibility enough to accept 1..n number of images to be placed in a template, I think it could achieve complex layouts like this.

I could do some pilot work with it on my website.  I write software in my day job so I am not afraid to code.  The main stuff I work with is Java, C, C++, Oracle.  But I am noticing a lot of similarities with PHP and c/c++ such as sprintf, etc...  It is not bad for a scripting language.

Thanks for your ideas and help,

- Derek

[vuud]

The template is not open source and I cannot get a hold of it.  That is why I want to create something similar myself which can be made available to the OSS community.

Since I have figured out the pattern (which can be varied), I think the tricky part left is figuring out how to populate it with CPG thumbnail data.  What do you think of placing thumbnail variables in a template representing different layout locations? 

Your idea of using data sets helps decouple image data from layout structure which can offer more flexible use.  The new layout management plan sounds promising.  If you could build it flexibility enough to accept 1..n number of images to be placed in a template, I think it could achieve complex layouts like this.

I could do some pilot work with it on my website.  I write software in my day job so I am not afraid to code.  The main stuff I work with is Java, C, C++, Oracle.  But I am noticing a lot of similarities with PHP and c/c++ such as sprintf, etc...  It is not bad for a scripting language.

Thanks for your ideas and help,

- Derek

Yeah, I do Perl, VB, (did some C++), Java - and PHP is 100 times easier to do web stuff.  Luckly you have a programming background so you understand seperating the model and view - which makes PHP tolerable.  I see so many programs that mix it all up and they just are unmanageable.

Anyway...

The new layout template will be a parent class for any new output classes.  So my existing HTML output would be moved to be based on it, a text only would be based on it, etc...  It should be flexible enough to do most anything.

The trouble is abstracting out the basic common criteria - and if you have any thoughts I would love to hear them.

Basically my current thoughts - which is not very far along,  is that I need to pass the data set, and various requirements into the base class.  PHP4 has pretty abysmal object support so its always a lot of fun doing this sort of thing.  I'd also like to be able to get the generated code back in chunks that can be applied around the PHP view page. 

For example, I am working with highslide.  So I need to output a bunch of javascript that would be at the top of the file, then the actual layout that would be at the bottom.   Right now you have to code up a bunch of PHP to get this to work - most people get confused.

I have no real idea on CSS Layout code, so that may have different requirements. 

My vapor-design right now involves defining base function like:

startHeader
startLayoutArea
startRow
startEntry
makeEntry
endEntry
endRow
endLayoutArea
endHeader

So whatever layout class you define, it has to support these. 

Again, this is all vapor in my head, so it may be crazy - but you get where I am heading.

Any thoughts or what not are welcome!

1.9.5 is up, 1.9.6 may have the start of the layout class... I make no promises on that.


As for the layout you are talking of...   Doesn't CPG scale down thumbnails to the same general size?  In that case, you may need to draw from two galleries.  OR, you could mark some with a custom field, then for those drag down the medium sized image and resize it via the browser (which sucks, but has gotten better than it used to be).

If the layout is a set pattern, then its much easier - I was thinking you were looking to have it grab images, and on the fly decide how to fit them all together nicely

[dereksurfs]

Vuud,

The approach of your design looks solid.  I think that starting with the goals of flexibility and separation of the model and the view are really good.   

The thing I like to do when starting out with the functional detailed design is to start out with the bare essentials.  Then build from there.  In the most simple form we have two basic elements:
1.  A front end layout template
2.  The image data which will populate the template

To keep things flexible for a variety of different looks I think it is important to not provide too much required structural elements.  For example in CPG the template_thumbnail_view function everything is based around a single cell which repeats n times.  The problem with this simple approach is that it restricts every layout to using a grid type pattern.  However there are so many other ways to present images that may look better/more interesting. 

So the question is, how can a template interface be provided which allows for a more flexible layout while still providing similar functionality (i.e. - clickable thumbnails which are logically grouped and open to a larger image or navigate to another sub category)?

One of the ways I think this might be done is to provide all the elements which *are* common every time in a array set.  The theme_display_thumbnails function does most of this work for example.  It packages thumbs with their captions, hyperlinks, and meta data. 

Then let the front end determine how to distribute this data.  So instead of having a single repeating html template layout design, use a template layout with markers (i.e.- image1, image2, etc...) for where the image data will go.  This breaks the coupling between the model and view and leaves the job of GUI layout to the front end where it belongs.  This is a 1..n image approach to the template.  So for n number of markers populate the template, then repeat this pattern until the full thumb list is iterated. 

Those are some of my ideas for now regarding design.

As far as my case and varied thumb sizes, I have been thinking about different ways to go about this.
1.  Use the intermediate image for the larger thumb, then use original size for the larger image view.
2.  Call ImageMagik's api myself to generate the the mid sized images.
3.  Possibly use a second gallery as you suggested.
4.  Request eventual CPG support for multiple size thumbnails.

- Derek

[vuud]

Vuud,
The approach of your design looks solid.  I think that starting with the goals of flexibility and separation of the model and the view are really good.   

Pretty much you can see that design in cpmfetch between the cpmfetch and the cpmfetch_dao objects.  I can't stand it any other way

The thing I like to do when starting out with the functional detailed design is to start out with the bare essentials.  Then build from there.  In the most simple form we have two basic elements:
1.  A front end layout template
2.  The image data which will populate the template

The second is set, the cpmfetch_dao returns nice arrays of data.  The front end layout template is buried in the cpmfetch object, which achieved its original design goal of putting images on the pages.  This is when I wrote it just for my own personal use - and thought for laughs I would put it online...  sigh.

To keep things flexible for a variety of different looks I think it is important to not provide too much required structural elements.  For example in CPG the template_thumbnail_view function everything is based around a single cell which repeats n times.  The problem with this simple approach is that it restricts every layout to using a grid type pattern.  However there are so many other ways to present images that may look better/more interesting. 

So the question is, how can a template interface be provided which allows for a more flexible layout while still providing similar functionality (i.e. - clickable thumbnails which are logically grouped and open to a larger image or navigate to another sub category)?

One of the ways I think this might be done is to provide all the elements which *are* common every time in a array set.  The theme_display_thumbnails function does most of this work for example.  It packages thumbs with their captions, hyperlinks, and meta data. 

To a degree the cpmfetch return type of result set does a nice job of packaging the data and stuff together.  As of 1.9.5 it automagically populates the paths to the images to use, the subtitles and all that gunk.

Then let the front end determine how to distribute this data.  So instead of having a single repeating html template layout design, use a template layout with markers (i.e.- image1, image2, etc...) for where the image data will go.  This breaks the coupling between the model and view and leaves the job of GUI layout to the front end where it belongs.  This is a 1..n image approach to the template.  So for n number of markers populate the template, then repeat this pattern until the full thumb list is iterated. 

Yep, are you sure you are not a split personality of mine?  Pretty much this is exactly where I am heading.  With the above aside, we may have to generate two different blocks of stuff... for example, highslide and the javascript part, then the html that displays and calls the javascript.

Those are some of my ideas for now regarding design.

As far as my case and varied thumb sizes, I have been thinking about different ways to go about this.
1.  Use the intermediate image for the larger thumb, then use original size for the larger image view.
2.  Call ImageMagik's api myself to generate the the mid sized images.
3.  Possibly use a second gallery as you suggested.
4.  Request eventual CPG support for multiple size thumbnails.

- Derek

I've used imagemagik directly on a lot of my files just to optimize them, add some text and stuff... Have not done it on the fly though. 

Thank you for the thoughts and sanity checks - your ideas a great (as they mirror my own thoughts on it)

I may do some work over the weekend on this - hopefully the next dev release will have at least the existing stuff ported over to a new methodology for the templates!

Vuud