Interactivetools.com Forum: Products: Article Manager 2: Adding a Gallery to an article page

Home: Products: Article Manager 2:
Adding a Gallery to an article page

Damon
Staff / Moderator

Nov 4, 2006, 1:02 PM

Post #1 of 24 (5118 views)
Shortcut

Adding a Gallery to an article page	Can't Post

Here are the steps to add a gallery to any article page. The gallery will be created by using the upload option "List of Attached Files" and customizing the way the list of files is output on the published pages.

Example of a published gallery:

1. Add a new article field
Admin > Database Editor - edit table & fields for Articles - then click Add Fields
Field Label: Gallery
Field Name: gallery
Field Type: upload

Database Options: Stored as: memo
Field Options: Upload type: List of Attached Files

Max Uploads: (set this to the maximum number of images you want to have displayed in the gallery)

Override Upload Restrictions:
You can specifically set options for the gallery here or leave blank and the default upload settings will apply.

SAVE.

2. Set the order that the gallery upload appears on the create/edit article page
Change the number beside gallery to re-order it and click Update Field Order Go button.

3. Add the gallery into the article page template
Open the articlePage.html template
/templates/articlePages/articlePage.html

Before the article copyright, add this example code:

Code

     <!-- templateIf : $article.gallery$ ne "" -->     
 <br clear="all">     
 <div style="width:500px;">     
 <strong>Gallery images:</strong><br>     
 $article.gallery$     
 </div>     
<!-- /templateIf -->     
<!-- templatecell : article.gallery.row -->     
    <div style="float:left">       
    <a href="$file.webUrl$">    
    <img src="$file.thumbnailWebUrl$" border="1" alt="$file.title:htmlEncoded$"     
 width="$file.thumbnailWidth$"  height="$file.thumbnailHeight$" style="margin-right: 5px;"></a>     
    <br>    
    <span style="font-size: 8pt; font-family: Arial; width:$file.thumbnailWidth$px;     
    line-height: 95%;">$file.caption$</span><br><br clear="all">     
    </div>     
<!-- /templatecell : article.gallery.row -->

4. Add Gallery images to an article

Upload images in the Gallery section on the create/edit article page. After you have upload some images you can use the UP and DN (down) links on the right to rearrange the order that the images will appear in the gallery.

Save you article and your done.

That's it. Let me know if you have any questions. :)

Cheers
Damon Edis
interactivetools.com

(This post was edited by Damon on Nov 4, 2006, 4:15 PM)

Attachments:

admin_gallery_example.jpg (48.7 KB)

published_gallery_example.jpg (66.4 KB)

limbo
User

Dec 1, 2006, 12:45 PM

Post #2 of 24 (4831 views)
Shortcut

Re: [Damon] Adding a Gallery to an article page [In reply to]	Can't Post

Can u create a small javascrfipt to allow us to post a gallery of thumbnalis and when the user clicks on any one of the thumbnails a popup window appears with the larger image of the thumbnail?

ross
Staff / Moderator

Dec 3, 2006, 11:29 AM

Post #3 of 24 (4812 views)
Shortcut

Re: [limbo] Adding a Gallery to an article page [In reply to]	Can't Post

Hi limbo.

Thanks for posting and welcome to the board!

When you are uploading images to your article, you'll actually get the option to set a link for each image and one of the options is to link to a full size copy. All you need to do is click on one of the modify buttons you see in the screenshots Damon posted and there will be a drop down in there that lets you select this for each image.

Could you have a look and let me know if that gets you going? Keep me up to date with how you are making out Smile

.
-----------------------------------------------------------
Cheers,
Ross Fairbairn - Product Specialist
support@interactivetools.com

Hire me!
Save time by getting our experts to help with your project. Template changes, advanced features, full integration, whatever you need. Whether you need one hour or fifty, get it done fast with Priority Consulting.

russbo
New User

Dec 3, 2006, 1:15 PM

Post #4 of 24 (4806 views)
Shortcut

Re: [ross] Adding a Gallery to an article page [In reply to]	Can't Post

I've successfully added this gallery and the video embedding thing to my article, global index and category pages, but for some reason that I can't figure out, the articlesummary resides to the right of the gallery. (It drops below the video embedding part). I'm not sure what to do with my html code. Any suggestions?

Quote

<div style="width:500px;">
Gallery images: 
$article.gallery$
</div>  


<div style="float:left">
<a href="$file.webUrl$">
<img src="$file.thumbnailWebUrl$" border="1" alt="$file.title:htmlEncoded$"
width="$file.thumbnailWidth$" height="$file.thumbnailHeight$" style="margin-right: 5px;"></a>
 
$file.caption$ 
</div>



<center>$article.embeddedVideo$</center>



 
$article.content$

I know I'm missing something simple here... Thanks!

limbo
User

Dec 3, 2006, 3:08 PM

Post #5 of 24 (4803 views)
Shortcut

Re: [ross] Adding a Gallery to an article page [In reply to]	Can't Post

Thanks for the reply. When I have the script installed and a gallery going I will come back here for some feedback.

gleaman
User

Dec 29, 2006, 2:43 AM

Post #6 of 24 (4654 views)
Shortcut

Re: [Damon] Adding a Gallery to an article page [In reply to]	Can't Post

I have added a gallery following your instructions. I have 4 questions:

1--What controls the position of the gallery on the page?
My gallery appears at the bottom of the page with a large gap between my article text. I need the gallery to be at the top of my page and no gap between the article text and gallery.

2--What controls the gap under the photos and size of the thumbnail image? I do not need space for a caption below the thumbnail images.

3--When you click the thumbnail and a new window opens with the large image, is it possible to change the new image window background to black?

4--What controls the gallery layout? Can it be changed to 3x3 images?

Here is my article page:
http://www.ltfd.org/artman/publish/Recent_Incidents_2/Hit_and_Run_Accident.shtml

(This post was edited by gleaman on Dec 29, 2006, 4:19 AM)

ChetW
Staff

Dec 30, 2006, 12:19 PM

Post #7 of 24 (4624 views)
Shortcut

Re: [gleaman] Adding a Gallery to an article page [In reply to]	Can't Post

Hi,

1--What controls the position of the gallery on the page?
You can control where the gallery appears on your article page by where you place the gallery code on the articlePage.html template.

2--What controls the gap under the photos and size of the thumbnail image? I do not need space for a caption below the thumbnail images.
If you don't need image captions, try removing this section of code:
 
$file.caption$
 

3--When you click the thumbnail and a new window opens with the large image, is it possible to change the new image window background to black?
You could try adding a seperate script to handle the full size images:
http://www.huddletogether.com/projects/lightbox/

4--What controls the gallery layout? Can it be changed to 3x3 images?
In the gallery code, their is a div width that controls the total width of the gallery:
<div style="width:500px;">
You can have 3 images across by either adjusting the above div to allow for the width of the 3 images or adjust your image thumbnail sizes to fit.

Does this answer your questions gleaman? If you have any further questions please feel free to ask. :)
Cheers,
Chet Woodside - Product Specialist
support@interactivetools.com

gleaman
User

Jan 1, 2007, 7:34 PM

Post #8 of 24 (4607 views)
Shortcut

Re: [ChetW] Adding a Gallery to an article page [In reply to]	Can't Post

I now have 3 images across and the gallery starts at the top of the page and does not have captions.......perfect

2 problems:

ALL of my articles, new and old, now have the words GALLERY IMAGES at the top of my articles, eventhough I have no gallery images in the article.

My gallery images do not have any placeholder options when I click the commands modify link on each image.

The text of my article becomes flush right. I need to center my image to reflow the text below the gallery.

Here is where I am at:

http://www.ltfd.org/artman/publish/Recent_Incidents_2/Hit_and_Run_Accident.shtml

(This post was edited by gleaman on Jan 2, 2007, 8:24 AM)

ross
Staff / Moderator

Jan 4, 2007, 10:14 AM

Post #9 of 24 (4568 views)
Shortcut

Re: [gleaman] Adding a Gallery to an article page [In reply to]	Can't Post

Hi there.

Thanks for the update!

Glad to hear you are getting closer on this one Smile

. I was wondering though, if you could send me a support request for the latest two things you ran into?

https://www.interactivetools.com/support/email_support.cgi

If I can get right in there and take a closer look at your setup, I should be able to get it all sorted out.

How does that sound? I look forward to hearing from you Smile

.
-----------------------------------------------------------
Cheers,
Ross Fairbairn - Product Specialist
support@interactivetools.com

Divya
User

Jan 5, 2007, 12:02 AM

Post #10 of 24 (4557 views)
Shortcut

Re: [gleaman] Adding a Gallery to an article page [In reply to]	Can't Post

Hi gleaman

Thanks for the post Smile

,

Let me allow to contribute some of my suggestions regarding your post.
I guess the reason for getting the display of the message 'GALLERY IMAGES' at the top of the top of every articles you create(although you have no gallery images in that article) may be you have forgotten to include a check condition as

Just try to edit the articlePage.html page present in the articlePage/ directory
and include the following code above the
 section

Code

   
          <!-- templateIf : $article.gallery$ ne "" -->      
          <br clear="all">      
          <div style="width:500px;">      
          <strong>Gallery images:</strong><br>      
          $article.gallery$      
          </div>      
          <!-- /templateIf -->

Secondly for aligning the image to the middle to reflow the text below the gallery,what i think suitable should be try to include the image gallery section of code in to a table row or column as you needed.

Give this a try and let me know whether it helped

Cheers
Divya

(This post was edited by Divya on Jan 5, 2007, 12:03 AM)

gleaman
User

Jan 5, 2007, 2:23 AM

Post #11 of 24 (4550 views)
Shortcut

Re: [Divya] Adding a Gallery to an article page [In reply to]	Can't Post

My page is fixed, here is what Donna Brown came up with to fix the last 2 problems;

First, I added a "templateIf" statement so that if no gallery images
have been uploaded, nothing is displayed. This gets rid of the "Gallery
Images" text, as well as the extra HTML that wasn't doing anything
useful.

Second, I added a after the gallery so that it forces
your text down to the next clear line -- it was trying to wrap around
your images before.

As for your other questions: Because these images are attachments, not
embedded media, they do not have ***imageX*** placeholders. To give an
image a placeholder, you would need to upload it as an embedded image in
the "Upload Images" section.

(This post was edited by Damon on Oct 12, 2007, 11:31 AM)

dbramley
User

Jan 5, 2007, 3:00 AM

Post #12 of 24 (4547 views)
Shortcut

Re: [gleaman] Adding a Gallery to an article page [In reply to]	Can't Post

If you want to customise the page the image opens onto I have a useful (asp) script for you to use:

Create a new file called showimage.asp

Insert the following script:

<%

'Declare Vars
Dim sIMGPath, sTemplateTop, sTemplateBottom

sIMGPath = Request.Querystring("img")

%>


<img src="<%=sIMGPath%>" border="1" align="center">

Save it & Upload it to your website in the root folder.

Now open your article page up in an editor, browse to the following line:

<a href="$file.webUrl$"> and change it to <a href="/showimage.asp?img=$file.webUrl$">

This will then open your images up in a page rather than a window, this gives you the option of fully customising the showimage.asp file to include your headers, background, adsense etc.

Stockton on Tees | Hartlepool | Middlesbrough | Sunderland

johnlynch
User

Nov 12, 2007, 7:31 AM

Post #13 of 24 (3145 views)
Shortcut

Re: [dbramley] Adding a Gallery to an article page [In reply to]	Can't Post

Hi Guys

This is a very handy tutorial.

I was hoping I could get some help with this. I have made a Gallery like the one above. Does article manager have capability to make rollovers on the images in the gallery, that would for example give the user some info on the picture. something thats a bit more comprehensive than alt tags.
much like the rollovers on the links in this page,
http://www.bosrup.com/web/overlib/

only with the rollovers on images instead of text???

many thanks
O

Jake
Staff / Moderator

Nov 13, 2007, 9:36 AM

Post #14 of 24 (3125 views)
Shortcut

Re: [johnlynch] Adding a Gallery to an article page [In reply to]	Can't Post

Hi johnlynch,

Thanks for your post!

While Article Manager itself doesn't have this capability, you could certainly set it up by using the script that you provided a link to. I don't know the exact ins and outs of that script, but I don't see any reason why you wouldn't be able to set it up with Article Manager.

Let us know if you have any other questions. Smile

-----------------------------------------------------------
Cheers,
Jake Swanson - Product Specialist
support@interactivetools.com

gleaman
User

Apr 2, 2008, 6:56 PM

Post #15 of 24 (2193 views)
Shortcut

Re: [ChetW] Adding a Gallery to an article page [In reply to]	Can't Post

I removed this code to remove the caption under the gallery.
 
$file.caption$
 

I now want to put it back. Can you explain where I would put back into the ARTICLEPAGE.HTML

gleaman
User

Apr 2, 2008, 7:15 PM

Post #16 of 24 (2192 views)
Shortcut

Re: [dbramley] Adding a Gallery to an article page [In reply to]	Can't Post

I am not quite sure where to paste the code, I created a asp page in dreamweaver, is this correct? I put it at the bottom? I am not familiar with this.

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

<%

'Declare Vars
Dim sIMGPath, sTemplateTop, sTemplateBottom

sIMGPath = Request.Querystring("img")

%>


<img src="<%=sIMGPath%>" border="1" align="center">

Jake
Staff / Moderator

Apr 4, 2008, 9:50 AM

Post #17 of 24 (2141 views)
Shortcut

Re: [gleaman] Adding a Gallery to an article page [In reply to]	Can't Post

Hi gleaman,

I don't have any experience with setting up ASP scripts myself, but you might want to make sure that your server supports ASP, otherwise that code won't be able to run - usually you can find this information on your's hosts web site. Smile

-----------------------------------------------------------
Cheers,
Jake Swanson - Product Specialist
support@interactivetools.com

gleaman
User

Apr 7, 2008, 4:49 AM

Post #18 of 24 (2106 views)
Shortcut

Re:Adding a Gallery to an article page [In reply to]	Can't Post

I would like to add space below my gallery images. Currently my gallery images touch each other top and bottom.

Can someone explain where I would add the space on the articlepage.html? What line do I edit?

Here is my page with the gallery in question:
http://www.ltfd.org/artman/publish/Recent_Incidents_2/New_Honarary_Member.shtml

(This post was edited by gleaman on Apr 7, 2008, 4:50 AM)

Jake
Staff / Moderator

Apr 8, 2008, 9:35 AM

Post #19 of 24 (2078 views)
Shortcut

Re: [gleaman] Re:Adding a Gallery to an article page [In reply to]	Can't Post

Hi gleaman,

To control this spacing you'd want to use some stylesheet attributes to add a margin around the bottom part of the image. I noticed that you have this style attribute set on the image tags for the image gallery right now:

style="margin-right: 5px;"

Try changing that to this:

style="margin-right: 5px; margin-bottom: 5px;"

That should add some vertical distance between the images for you. Smile

-----------------------------------------------------------
Cheers,
Jake Swanson - Product Specialist
support@interactivetools.com

welshchris
User

Apr 22, 2008, 12:13 PM

Post #20 of 24 (1880 views)
Shortcut

Re: [ChetW] Adding a Gallery to an article page [In reply to]	Can't Post

In Reply To

2--What controls the gap under the photos and size of the thumbnail image? I do not need space for a caption below the thumbnail images.
If you don't need image captions, try removing this section of code:

$file.caption$

You didn't say how to specify thumbnail size - where does one modify the code called by $file.thumbnailWidth$px; ??

I don't want to have problems when uploading a mixture of portrait and landscape images - I'd rather have a default width and set the thumbnails to have varying height - How can I do this?

Having tried the script, it seems to give me landscape thumbnails of 133px wide by default, but there seems to be a maximum height hidden in there somewhere because uploading a portait image gives me a thumbnail of the same height as a landscape, which of course makes the picture tiny. Ideally I'd like fixed width and variable height.

Chris

(This post was edited by welshchris on Apr 22, 2008, 12:15 PM)

MikeB
Staff / Moderator

Apr 22, 2008, 2:53 PM

Post #21 of 24 (1873 views)
Shortcut

Re: [welshchris] Adding a Gallery to an article page [In reply to]	Can't Post

Hi Chris,

Thanks for posting! Smile

To change the default maximum width and height for images uploaded into Article Manager, you'll want to log into the program and click Admin->General Settings. From here you should find a heading about halfway down the page that says "Upload Settings". Here you can modify the maximum width and height for thumbnails that you're uploading from now on.

From there, you can modify the template to suit your needs to output the necessary width and height for these images.

I hope this helps Chris! Smile

Cheers,
Mike Briggs - Product Specialist
support@interactivetools.com

welshchris
User

Apr 22, 2008, 3:02 PM

Post #22 of 24 (1871 views)
Shortcut

Re: [MikeB] Adding a Gallery to an article page [In reply to]	Can't Post

Thanks Mike, but it must be a different setting somewhere. I have the following settings on my 'admin>general settings' page:

Maximum thumbnail dimensions: height = 300 pixels / width 300 pixels.

This gives me the actual image for the news page, for example here:

http://www.festrail2009.co.uk/content/publish/whrnews/April_Showers_special_offer.shtml

For some reason though, when uploading using the gallery add-on, the thumbnails are created at 133 pixels, for example here:

http://www.festrail2009.co.uk/content/publish/localnews/Community_Rail_Week.shtml

Any idea where to alter this?

(edited to say: It looks as though whatever I upload - portrait or landscape photo - it defaults to making the thumbnail 100 pixels high)

Chris

(This post was edited by welshchris on Apr 22, 2008, 3:09 PM)

MikeB
Staff / Moderator

Apr 22, 2008, 3:48 PM

Post #23 of 24 (1867 views)
Shortcut

Re: [welshchris] Adding a Gallery to an article page [In reply to]	Can't Post

Hi Chris,

Thanks for the update!

If this is the case, there is one other spot you'll want to look for this setting. In Article Manager, click Admin->Database Editor and then select "edit table & fields" for the Articles table. In the list of fields that comes up, you should see one called "Image Gallery" and you'll want to modify this field.

On this page you'll notice a section called "Input Validation" and you have the ability to override the admin settings and specify a maximum width and height value for just this field. You can either modify the width and height details that are here, or just unselect the checkboxes so the admin settings will be used for this field instead.

I hope this helps! Smile

Cheers,
Mike Briggs - Product Specialist
support@interactivetools.com

welshchris
User

Apr 22, 2008, 4:13 PM

Post #24 of 24 (1863 views)
Shortcut

Re: [MikeB] Adding a Gallery to an article page [In reply to]	Can't Post

That's fixed it Mike - thanks Smile

Chris

Search for (options)