Fog Creek Software
Discussion Board




Knowledge Base
Documentation
Terry's Tips
Darren's Tips

Insert Multiple Pictures Simultaneously

How do you insert multiple pictures simultaneously?

If CD cannot do it, this is a PERFECT candidate for a feature improvement.

Gilles
Wednesday, July 03, 2002

CD doesn't do it and folks have requested it.  You can drag boatloads of pictures from Win Explorer into CD at once but I think to have to insert them into a page one at a time.

tk
Wednesday, July 03, 2002

tk, thanks for the info.

I've got another question to which you may know the answer.  I'm creating a pictorial site to share pictures with friends/family ( http://pws.prserv.net/laugh/ ).

Click on an "article" link from the home page and you go to a page with thumbnails of the pics.  Click on a thumbnail and you get the full-size version.

My problem is this.  I'd like the full-size image to appear within a frame (essentially a colored border) without having to actually create a frame around each and every image.  Under the current design each thumbnail simply points to the full-size jpg, so when you click on the thumbnail the browser displays the "raw" (i.e. unformatted) full-size image.

Thanks for any help!

Gilles
Wednesday, July 03, 2002

This is Deb's real estate site, she did a great job and uncovered some CityDesk ideas:
http://www.lakemonticelloproperties.com/

Here is more about it:
http://discuss.fogcreek.com/CityDesk/default.asp?cmd=show&ixPost=1040&ixReplies=1

http://discuss.fogcreek.com/CityDesk/default.asp?cmd=show&ixPost=1481&ixReplies=8

And here is a download that Micheal P. did to kick it off:
http://tk-jk.net/city/RealEstate.cty

tk
Wednesday, July 03, 2002

Hmmm.  Thanks for the tips, though I'm not sure if that's what I need.  I'd like the home page to have a chronological series of "article" links ("July 4 BBQ", "Eva's Third Birthday", "Visit to Grandma and Grandpa", etc.) that take you to a page of thumbnails of that particular event.  Then, when you click on a thumbnail you get the full-size image in a frame, with a caption beneath and, at the foot of the page in smaller font, a copyright notice.

Gilles
Wednesday, July 03, 2002

Well, I think it gets a little complicated but if you can get it going, you might get in a groove:

One article per picture - Picture and caption (the caption could be the headline), thumbnail in an extra field.  Copyright and whatever in a template.

-A batch of event picture articles in the appropriate folder, "EvasThirdBirthday," Grandpa," whatever.

-An "index" article in each folder that incluides a script to generate your thumnail page with links to the articles with the big pictures.  Put a keyword "index" or something in each index article.  The Headline in the index article might be "Eva's third birthday."  The script has something like:

{$foreach x in (and (folder "EvasThirdBirthday") (not(keyword_contains "(Index)")))$}

-A home page that has something like:
keyword_contains "(Index)"
in the script that will generate links to your thumbnail
pages.

Presuming you get this all going and get a bunch of new pictures for Grandma's birthday:
1. Make a new folder, "Grandma"
2. Add an index file to the new folder.
3. Copy the script from another folder's index article into your new index artcle and change the folder name in the script to "Grandma."
4. Create new articles and put your pictures in them.
5. Publish.
6. CityDesk will list the new event on you home page, and generate a new page of thumbnails for "Grandma."

Forum friends, correct me where I'm wrong.  There may be a better way.

tk
Wednesday, July 03, 2002

I use TK's method above to maintain this page:
http://www.pool-room.com/Personal/Photography/PhotoCompetitions.html

Be warned, though, it's a pain in the butt to add lots of photos at once. I'd really like to be able to point CityDesk at a directory of articles and have it import them, do the thumbnailing, etc.

I'm sure that when we get JavaScript-able CityDesk (2.0?), this sort of stuff will become a lot easier.

Darren Collins
Wednesday, July 03, 2002

I wonder if any product approaches what we're trying to do.  I know Photoshop Elements will generate a "web gallery" although I've never done it.  To me the pain of it all is enhancing the photos and generating thumbnails.

If I could get that part done in some automated fashion, moving them into CityDesk and managing them there wouldn't be too bad.

FrontPage 4 will generate the thumbs but not in batches.  You still would have to do everything else yourself.

tk
Thursday, July 04, 2002

Try Easy Thumbnails - http://www.fookes.com/ezthumbs/index.html?1.6

Michael Martel
Thursday, July 04, 2002

Darren, Michael

Thanks for the tips.  I haven't had a chance to implement tk's suggestion, but will give it a whirl this weekend.  And it looks like Easy Thumbnails is just what the doctor ordered!

Gilles
Friday, July 05, 2002

Yes Michael, Easy Thumbnails is nice.  Thanks.

tk
Friday, July 05, 2002

tk, your method works like a charm, with only one kink left to work out.  The thumbs are displayed in a single column down the page, I suppose due to the following:

{$foreach x in (and (folder "evasbday") (not (keyword_contains "(Index)")))$}

{$x.extra1$}

{$next$}

Is there a way to get the thumbs to be displayed in multiple rows, such that they wrap back at the end of each row?  Like this:

________    ________    ________
|              |    |              |    |              |
| Thumb  |    | Thumb  |    |  Etc.    |
|              |    |              |    |              |
|_______|    |_______|    |_______|

________    ________    ________
|              |    |              |    |              |
| Thumb  |    | Thumb  |    |  Etc.    |
|              |    |              |    |              |
|_______|    |_______|    |_______|

Thanks for any tips!

Gilles
Saturday, July 06, 2002

My feeble attempt to produce mock thumbs looks like hell, but you get the idea.

Gilles
Saturday, July 06, 2002

This is over my head now.  I don't know how to make reliable row's of thumbnails.  Even Deb's site has to do something different for Netscape.  Somebody out there may know a trick.

Presuming CityScript will become more capable in the future, once you get your pictures in there, a few script changes may allow you to display your thumbnails any way you please.

tk
Saturday, July 06, 2002

tk, thanks all the same.  You've been a great help!  As you say, perhaps other CD Forum Folk have some tips.

Gilles
Saturday, July 06, 2002

Darren and other CD regulars,

Any ideas on how to achieve multiple rows of thumbnails?

Thanks in advance!

Gilles
Saturday, July 06, 2002

I think I may have figured out a work-around.

A cursory test shows that putting ALL the thumbs in the extra1 field displays them in rows and columns, with each thumb linked to its article, the body of which is the full size image.

I wonder what the fall-out of this method will be, if any?  Hope this strategy doesn't paint me into a corner.  Wish me luck...

Gilles
Saturday, July 06, 2002

Well I got the images to display across the screen.  Check it out:  http://pws.prserv.net/laugh/ 

Gilles
Monday, July 08, 2002

Tell us how Gilles.

tk
Monday, July 08, 2002

I haven't checked out the link, but you can make it using <DIV> with styles. I think the magic keyword  is position:floating.

Please let me know if you need help.

Adriaan van den Brand
Tuesday, July 09, 2002

Adriaan...

Thanks for the offer!  Basic HTML was new to me until recently, so "using <DIV> with styles" is beyond my grasp at this point.  Nonetheless, I've read many of your posts, and clearly you have a firm understanding of things HTML, etc, so I certainly would be interested in learning more from you.  Perhaps a short "how-to" on position:floating would help me (and others) out a great deal.  Thanks!


tk...

Excuse the delay in answering your request.  This is how I did it (made possible by your suggestions!):

Site index.html has:

{$foreach x in (keyword_contains "(Index)")$}

{$x.headline$}

{$next$}

Each folder (e.g. "First Set O Pics") has one file with the same name (e.g. "First Set O Pics"), one file named "Pics", and one file per image with only the image in the body.

The file named "First Set O Pics" has the keyword "(Index)" and in the body has:

{$foreach x in (folder "firstsetopics")$}

{$x.extra2$}

{$x.extra1$}

{$next$}

The only file in each folder with nonblanks in the extra2 and extra1 fields is the "Pics" file.  The extra2 field is a breadcrumb, and is Home --> First Set O Pics, with "Home" linked to index.html.  The extra1 field has thumbnails of each image, each of which link to its respective file.  Putting the thumbs in the extra1 field like this and then calling them as shown above is how I got the thumbs to display in rows/columns.

The "First Set O Pics" file uses a template called "Thumbs" that only has {$ .body $} in the normal view.

The "Pics" file and each image file use the "Simple" template, which has a breadcrumb like this:  Home --> {$.teaser$}.  "Home" links to index.html, and {$.teaser$} is populated by the teaser field in each image file, each of which is "First Set O Pics" linked to the "First Set O Pics" file.  Beneath the breadcrumb is a two-row table with {$ .headline $} centered in the top row and {$ .body $} centered in the bottom row.

Each image file has the full-size image in the body.  The "Pics" file has nothing in the body.

Thoroughly confused yet?  That makes two of us.  Let me know what you think, and clue me on some of the 1001 ways I can improve this!

Cheers.

Gilles
Friday, July 12, 2002

Check this link out:

http://www.alistapart.com/stories/practicalcss/

So for Citydesk, you could have something like

(in the html head section or in a external css stylesheet)
<style>
div.float {
  float: left;
  }
 
div.float p {
  text-align: center;
  }
<style>

(and in the body)

{$foreach x in (folder "firstsetopics")$}

<a href={$x.link$}>
  <div class="float">
    <img src="{$x.extra1}" width="100" height="100"
      alt="{$x.headline$}" /><br />
      <p>{$x.headline$}/p>
  </div>
</a>

{$next$}

This gives you an opportunity to :
- specify exact width/height of the boxes
- wrap
- add margins to the thumbs
- add captions (here set to headline)
- add alt text

Can be improved even further.
You need to specify the thumb href (or magic name) in extra1 and you can insert the full size image in the body with additional text.

an attractive alternative would be to use some naming convention. E.g.
- image_name.html = full size
- image_name.jpg  = image
- th_image_name.jpg=thumb

If all are stored in one subdirectory, then you can use
Then you can use
- {$x.filename$}.html as link (in the <a href>)
- optionally {$x.filename$}.jpg as image source (in html view) of the main article
- th_{$x.filename$}.jpg as the image source for the thumb
Although this would save you some labour (copy magic name), it also gives you additional responsibility since Citydesk can no longer check links and it will fail if names don't match.


For navigation home->first set of pics things:
please check out my javascript navigation at Terry's... it's easy to set up and MUCH easier to maintain!

Adriaan van den Brand
Friday, July 12, 2002

Adriaan, thanks much for your help!

Gilles
Friday, July 12, 2002

*  Recent Topics

*  Fog Creek Home