I know this might sound silly but how do I actually use this module?
So, I setup the imagefield the gallery connects to but how do I display it? Do I embed it in a page or what?

Help appreciated!

Comments

EclipseGc’s picture

You don't need to do anything, just be sure to visit both administration pages and the system should work properly. The module does all the heavy lifting, it actually replaces the imagefield default output with the imagefield_gallery output. So it's easy as pie. :-) Hope that helps.

Eclipse

omnyx’s picture

hm...i'm still confused - maybe the best way to understand would be to tell me how would one create the page that's given in as the 'demonstration' (the one with the grid view of starwars space ship images)?
I.e How do I create the page with the gallery in it? and what controls the grid display?

thanks!

Delta Bridges’s picture

Why not try?
1) Make a new content type called gallery with CCK
2) Add a new field on this new content type. The new field is a image field of course. Select multiple values.
3) go to Imagefiled admin and enable imagefield gallery for the content type you have just created.
4) Create a "gallery" node and upload several pictures.
5) submit: you will see the pictures displayed as in the demo site.
6) Click on one of the thumbnail and the flash display will appear.

Expat9 :)

EclipseGc’s picture

Status: Active » Closed (works as designed)

That's pretty close to the entirety of it. :-)

The most important thing to remember is that this module has two admin pages, ie the page that configures which content types to use imagefield_gallery on and the page that helps to configure specific css for your imagefield_gallery. This is generated per node type, so be sure to manually set something (even just visit the page and accept defaults) I'm still working to make that part more intuitive. Anyway, so a specific example:

You must have a content type with an imagefield on it... if you don't have that, this doesn't work. If you have one with multiple imagefields (ie more than one actual field) this won't work as expected. Currently it only works with one imagefield, and it's best if that imagefield accepts multiple values.

Next you visit the imagefield_gallery content types admin which can be found at "admin/settings/imagefield_gallery_types"
Select the content type you wish to use (the admin only displays content types with imagefields) and set up the imagecache presets you want to use for thumbnails and previews. It's important to have your imagecache presets ready to go.

Next visit the imagefield_gallery css admin which can be found at "admin/settings/imagefield_gallery"
At the very least just submit this page (creates defaults). It's best if you actually work through this page and play with the settings some to get some css spacing, sizing etc you like. I tried to make as much of this dynamic as possible, so that you aren't just stuck with what I liked. For best experience I'd install the colorpicker module. Makes picking border colors much nicer.

Finally, create a node of the content type we've been using here, and upload images to it. That should be all you need to do. From this point forward nodes of this type will use these settings.

Hope that helps.

Eclipse

omnyx’s picture

thanks a bunch everyone. I'll give this a try

btran222’s picture

Hi!

I followed the instructions written by Expat9 and am having problem with step #5. The images show up on my node in original size instead of thumbnails as in the demo site. Please help!

EclipseGc’s picture

so... try following my steps instead. :-)

btran222’s picture

EclipseGc - I followed your steps and it works. This module is awesome. Thanks!

Bach

EclipseGc’s picture

Assigned: Unassigned » EclipseGc

Glad that worked out

btran222’s picture

I notice that the thumbnails on my gallery only show the top left of my images while the thumbnails on the demo site are a good representation of the entire image. I drag the thumbnails from my gallery, drop it on my desktop and i get the entire image while i drag the thumbnails from the demo site, drop it on my desktop and i get the thumbnail. It's like the thumbnails on my page is the entire image.
Below are my settings

Imagefield Gallery Content Types
art_gallery thumbnail: art_gallery preview:
original original (Here i only see 2 options original and No Preset)

Imagefield Gallery Administration Page
Thumbnail Width: * Thumbnail Height: *
100 100

Top Margin: * Right Margin: * Bottom Margin: * Left Margin: *
10 10 10 10

Border Color: *
#ffffff

Border Style:
No Border

Border Width:
1 Pixel

Please help!

Thanks,
Bach

EclipseGc’s picture

Sure sure, this is one of those little things that people miss a lot. When you want to maximize the amount of area you see in your thumbnail frame you need to configure your imagecache preset scale to be "outside dimensions" and then make the thumbnail as close to your imagefield_gallery "width/height" margins. This way you're sure that the image is always larger, and the div keeps the overflow from showing. This is really more imagecache related as it's about your preset settings. I hope that helps out.

Eclipse

thamas’s picture

Does the Star Wars Artists Guild use this gallery?

On that page the galleries links to image nodes, not images - are those views grids or what?

EclipseGc’s picture

Thamas,

SWAG DOES use it yes, but only in the blog section. Everything else is done via the views module.

btran222’s picture

EclipseGc - Thanks again for your help. I created preset as you suggested and it work.

Thanks
Bach

Anonymous’s picture

You must have a content type with an imagefield on it... if you don't have that, this doesn't work. If you have one with multiple imagefields (ie more than one actual field) this won't work as expected. Currently it only works with one imagefield, and it's best if that imagefield accepts multiple values.

I've just started using Imagecache, Imagefield and Imagefield gallery, and I think that it's pretty much the best image handling module I've found for Drupal yet. I'm using it pretty much exclusively on a website I'm building – you can see it in action here – http://79.170.40.167/theillustrationgallery.com/

However there's something that I really need to be able to do, and I was wondering whether it was possible with Imagefield gallery. Basically, I want to make a page that has one large image at the top of the page, (a straight up imagefield), then a series of smaller imagefield gallery thumbnails at the bottom.

If you go to this page – http://79.170.40.167/theillustrationgallery.com/exhibitions/the-freedom-... – you can see the big Imagefield image at the top, and at the bottom there's some pictures from the opening. Currently I've used PictoBrowser to handle the slideshow, but ideally, I'd like Imagefield and Imagefield Gallery to handle everything.

I did experiment with adding two imagefields to my content type, but as EclipseGc said, it didn't work right.

Any ideas on how I can make it work? It would make me very happy to hear that it was possible...

Thanks!

EclipseGc’s picture

Rick,

Nice, I'm digging the site. A couple quick things for you to think about/chew on. What you're asking is completely feasible with imagefield gallery, however, you'll have to get a little "code-monkeyish" for it to work properly. I'll outline that here for your pleasure.

First off, you need to understand that imagefield_galery works by utilizing hook_nodeapi... what that means for you is that I'm actually rewriting the output that is going to show up in $content. $content is actually going to get built up with all the content that should display in it, and because of this we have some issues to address first. Since we're going to manually call imagefield gallery ourself, we'll need to make sure that $content doesn't get populated with it, which can be done inside of the main cck content type editting area. Here you should have a visibility section that makes turning off the display of our imagefield possible. Do this for both teasers and full nodes and that portion is done.

Secondly, we'll want to display that main image. This can be done through the node-type.tpl.php. If you're unfamiliar with what I'm talking about read up at http://www.drupal.org/phptemplate It's imperative you understand a bit about phptemplate if you have any expectation of pulling this off. CCK does a couple of things for us, the afore mentioned $content work is only one part, the second is the ability to address any field individually if we so desire from the $node object. Thus, if we wanted our imagefield we could find it in the node-type.tpl.php file by simple $node->field_fieldname. Now imagefields are stored as arrays (pretty standard for cck) so we'll want a couple things. First, if you're not already familiar with print_r, or var_export, now's a good time to get familiar. You can print_r($node->field_fieldname) and find everything in that field. Similarly if you're having trouble finding that field you can probably find it by print_r($node). I personally prefer the following as it has helped greatly in the past.


drupal_set_message('<pre>'. print_r($node->field_fieldname, TRUE) .'</pre>');

I know if this works inside the node template, so should be pretty easy... point being you're going to get a print out of an array, and it'll look something like this:

Array
(
    [0] => Array
        (
            [fid] => 1
            [title] => 
            [alt] => 
            [nid] => 1
            [filename] => 34f.jpg
            [filepath] => files/blog_images/34f.jpg
            [filemime] => image/jpeg
            [filesize] => 60649
            [view] => 
        )

    [1] => Array
        (
            [fid] => 2
            [title] => 
            [alt] => 
            [nid] => 1
            [filename] => 34b.jpg
            [filepath] => files/blog_images/34b.jpg
            [filemime] => image/jpeg
            [filesize] => 56442
            [view] => 
        )

)

where "view" is your actual image. This is the array that imagefield gallery is expecting to be handed when it outputs what it outputs, so we're going to do VERY little manipulation.

Since we want the first image on it's own, we'll do the following:


<?php print $node->field_images[0]['view']; 

?>

Put that in the node-type.tpl.php where ever it is that you want it to appear. We have access to imagecache as well, so you may choose to use an imagecache preset here instead of the raw image (I would) you could even build your own preset for this purpose (I would) so... yeah very straight forward. Looks like this:


print theme('imagecache', 'scale_preview', $node->field_images[0]['filepath']);

Lastly we need to get the imagefield gallery on the page and we have two ways to go here. The first use case is that you want all images shown in it, in which case you can simply:


print theme('imagefield_gallery_lightbox2', $node->field_fieldname, $node);

Put there where you'd like it to render inside of the node-type.tpl.php and all is well.

Our second use case is "I already displayed the first image, I don't want it in the gallery." which is where we'll do a little extra work. Basically we have to slice the array into what we want, should look like this:


print theme('imagefield_gallery_lightbox2', array_slice($node->field_images, 1), $node);

You can find array_slice docs on php.net, but essentially that "1" is just an offset.

I hope this helps.

Eclipse

Anonymous’s picture

Eclipse – that looks like it'll do just what I need. Thank you!
phptemplate is still the undiscovered country for me really, but I'll have a crack at it tomorrow and will post the results here.

Thanks again for your help!

Matt

Anonymous’s picture

It works! You sir are a genius!

See here: http://79.170.40.167/theillustrationgallery.com/exhibitions/the-freedom-...

Here's how I did it.
It's probably pretty obvious, but it might be useful.

I was using the Content Template module, so I didn't have to put the code to display the main first image in the template file. The content template I'd set up did it anyway.

I put the code to display the gallery in the right place in the template file, and it worked. Hooray!
However, as there was no way to distinguish between a teaser and the full node, the gallery appeared on the teasers as well. Do not want.

So, after a bit more reading up on node.tpl, I discovered that you could put in a IF ELSE statement to do this.
After putting it in, it all seems to work perfectly. Result.

Here's the node-exhibition.tpl code:

<?php if ($teaser): ?>
    <h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>

<div class="content">
    <?php print $content ?>
</div>
   
<?php else: ?>

...node bits...

<div class="content">
    <?php print $content ?>
</div>

<div class="imagefield_gallery">  
    <?php print theme('imagefield_gallery_lightbox2', array_slice($node->field_image_1, 1), $node); ?>
</div> 

...more node bits...

<?php endif; ?>
EclipseGc’s picture

Happy to see it worked out for you. :-)

Eclipse

avolve’s picture

i am looking to do exactly the same thing on a site—search has produced exactly what i was hoping to find!

Thanks Eclipse and & Rick. I will get to coding this soon and report back with my results.

avolve’s picture

I have had a little time to fiddle with this code and have achieved some very good results!

My code is only slightly different. For my main image, i have (above $content):

  <?php if ($node->field_main) : ?> <!-- display CCK field 'main photograph' -->
    <div class="main_photograph">
      <?php print theme('imagecache', 'main_preview', $node->field_main[0]['filepath']); ?> 
    </div>
  <?php endif; ?> 

and below the node body (before $links):

  <?php if ($node->field_secondary) : ?>  <!-- display CCK field 'node thumbs' -->
    <div class="gallery_photographs">
      <?php print theme('imagefield_gallery_lightbox2', $node->field_secondary, $node); ?>
    </div>
  <?php endif; ?> 

This works very well, though i am having trouble trying to achieve something different and was hoping Rick, eclipse, or someone else might be able to comment/offer a solution. If i replace the code for the main image with

  <?php if ($node->field_main) : ?> <!-- display CCK field 'main photograph' -->
    <div class="main_photograph">
      <?php print theme('imagefield_gallery_lightbox2', $node->field_main, $node); ?>
    </div>
  <?php endif; ?> 

The main image included in the lightbox gallery with all the secondary images (which i want). However, the size of the main image is reduced to the same as that of the secondary images (i.e. lightbox thumbnail).

@Rick, you have the main image on your sample page with it's own imagefield gallery instance. How did you achieve this? (this may help me understand what i need to do)

@eclipse, do you have a workaround to have different thumbnail sizes based on different imagefields?

Anyone else have a tip?

Another issue (unrelated?) is that the 'Imagefield Gallery Administration Page' has two instances of the 'Lightbox2 weblog Attributes' fieldgroup and it also lists two instances of messages (i.e. 'Installation of the colorpicker module will make your overal experience much more pleasent.' x2) and when i save configuration, this changed to x4 ???

EclipseGc’s picture

avolve:

Sounds like you have multiple imagefields on a single content type. This is still a technical limitation of imagefield_gallery and I've not overcome it yet.

With that in mind... you should be able to pass the secondary images manually (which you appear to have already learned), however that gallery is setup for a particular imagecache setting already for both thumbnail and preview. There's really not a way around that today, so if you want your image to be included with the rest, you'll have to manually build up a lightbox2 type around it... something like this:


<a href="/files/path/to/image.jpg" rel="lightbox1" title="title">
<img src="/files/path/to/big/image.jpg" />
</a>

Where it says "lightbox1" assumes where's on node1. You'd have to change that based on the node you're on. That's a dirty dirty hack, and I haven't tested it, so I expect there will be some bugs. Sorry. :-(

Eclipse

avolve’s picture

Thank you for the reply Eclipse—much appreciated!

After sleeping on it, I have come up with a solution that works for what i was trying to achieve (with one issue i will come back to).

I modified the CCK content type to have only one imagefield, and subsequently cut down on the code i posted above. I have changed the CCK 'display field' settings for the imagefield to visible. This allows imagefield gallery to handle the display of the images without extra code in the node-type.tpl.php.

In the node-type.tpl.php, i have put in a php call for the first image (field_image[0]) in the imagefield above the node body, accessing an imagecache preset.

The issue i have noted however, is that when i edited my test node and deleted some of the images, the [0] array becomes empty (alongside those for other deleted images). The implications of this are that the call retrieves an incomplete img address (link to the directory only as no file exists) and (in some browsers) a broken image link icon. Note ideal for a live site.

This requires that an empty array is bypassed, which would require(?)

if (!empty($array['filename'])

I have tried to implement this in a number of ways, though am a little over my head (getting the php correct and trying to comprehend/avoiding recessiveness in how to move from array[x] to array [x=1] if the array is empty.

As it stands, i am doing something wrong. This IF statement produces nothing if the field is not empty (counter to my logic), and onlty gives a result is set as (empty()). I could be doing something completely wrong. This was my starting point:

  <?php if ($node->field_photographs) : ?> <!-- display CCK field 'main photograph' -->
    <div class="main_photograph">
      <?php if (!empty($array['view'])) : ?>
        <?php print theme('imagecache', 'node_preview', $node->field_photographs[0]['filepath']); ?> 
      <?php endif; ?>
    </div>
  <?php endif; ?>

Anyone note my error, have suggestions?

SocialNicheGuru’s picture

subscribing

Chris

avolve’s picture

i have implemented this on one site so far. and will most likely implement it on another i am working on right now.

You can see it in action at http://bike.veganarky.net/rides/2007/10/21/bike-shipping-a-review-cello-... (and several other nodes).

The only change i may make to the 'main photograph'code is to display a random image, not only the first one in the teaser.

saron’s picture

Hi!

I created a new template for a content type and I can't get to the module imagefield gallery works, I use the code mentioned in this post but only get to display the image in thumbnail form, when I want to see them in a bigger size the lightbox apperars uploading but nothing appear.

I was using the version imagefield_gallery 5.x.1.4, then I change to the alpha1 version but now I only get to show the name of the picture, I dont Know what happens,

For print the image with the lightbox gallery I used this:

print theme('imagefield_gallery_lightbox2', $node->field_foto_1, $node);

Another question is if I need to install lightbox2 module and imageapi for get this works.

Thanks

avolve’s picture

i would recommend you re-check the code you added to your template.php file. Check to make sure the names of the imagecache presets are correct. If this seems correct, check to ensure that imagecache has generated the respective images.

An easy way to check this is to view the source and/or look in the files/imagecachepresetname folder for the respective image files.

EclipseGc’s picture

Saron,

This is (as I said on the OTHER issue you filed) an imagecache issue, and has nothing to do with imagefield_gallery.

Avolve,

I'm working very hard on imagefield_gallery 2.x and it should be out soon. It will work against multiple imagefields on a single node (that code's not released yet) so these issues should largely go away.

Eclipse

avolve’s picture

thanks Eclipse—i look forward to testing it when done.

digitalfreak’s picture

this module works great for ppl who do not care having mulitple imagefields within a node. Yet, for having a flexible gallery, i guess using CCK + Views together with imagecache and imagefield is better, as you have an image per node, one can configure a gallery base on taxonomy and thus can reuse the image. Moreover, with imagefield gallery, one have to upload the image one by one, whereas the other approach can take advantages of the "imagefield import" modules.
All in all, imagefield gallery is good for those who don't mind uploads image one by one, and it really can reduce time and knowledge in making views.

pribeh’s picture

When I use the following

<?php
print theme('imagefield_gallery_lightbox2', array_slice($node->field_images, 1), $node);
?>

in my node-blog.tpl.php it always produces

warning: array_slice() [function.array-slice]: The first argument should be an array in /Users/thomascermak/Sites/coop/sites/all/themes/figureandground/node-blog.tpl.php on line 49.

with no gallery of course. What's this array_slice issue?

espenmoe’s picture

Version: 5.x-1.3 » 5.x-2.0-alpha4

I opened a new support request:
http://drupal.org/node/437688

madamski’s picture

How do I "make a new content type called gallery WITH CCK?" I know how to make a new content type, but how do I add this CCK?

I have all of the modules installed that I need and I'm trying to implement Fancy Slide. FS had me upload the modules for CCK, Filefield, and imagefield.

Please advise! I know I'm close, I just don't know where to navigate to make this happen!

madamski’s picture

Eclipse,

When trying these couple of steps, I cannot find the location you are referring to:

"Next you visit the imagefield_gallery content types admin which can be found at "admin/settings/imagefield_gallery_types"
Select the content type you wish to use (the admin only displays content types with imagefields) and set up the imagecache presets you want to use for thumbnails and previews. It's important to have your imagecache presets ready to go.

Next visit the imagefield_gallery css admin which can be found at "admin/settings/imagefield_gallery"
At the very least just submit this page (creates defaults). It's best if you actually work through this page and play with the settings some to get some css spacing, sizing etc you like. I tried to make as much of this dynamic as possible, so that you aren't just stuck with what I liked. For best experience I'd install the colorpicker module. Makes picking border colors much nicer."

I cannot find this location via navigation or through hidden link (copy and paste).

If my site is "www.website.com/website" I'd just go to:
www.website.com/website/admin/settings/imagefield_gallery_types

Right?