Interactivetools.com Forum: Products: Article Manager 2: Linking to image in content

Home: Products: Article Manager 2:
Linking to image in content

marys
User

Jun 24, 2008, 8:37 AM

Post #1 of 8 (2205 views)
Shortcut

Linking to image in content	Can't Post

If I want an image to appear when a visitor clicks on some text in the content, do I need to manually FTP the image?

Example: View a cutaway of the motorcycle.

The phrase, "cutaway of the motorcycle," would be linked to that graphic using html.

I don't necessarily want the image to appear in the gallery, but I think it must have to in order to link to it in the content.

Thanks for your help.

Donna
Staff / Moderator

Jun 24, 2008, 10:46 AM

Post #2 of 8 (2196 views)
Shortcut

Re: [marys] Linking to image in content [In reply to]	Can't Post

Hi Marys,

How do you want that image to appear? Would it just be a link to the image? If so, you could create a new upload field for "in-line images". You'd then have to add in the HTML directly (you could do something like this:

<a href="***image1:url***">cutaway of the motorcycle</a>.

Take note of the ":url" addition in the image placeholder -- this will output the URL to where it's located, instead of the full <img> tag.

Give that a try and let me know if it works for you. :)

Donna

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.

marys
User

Jul 5, 2008, 12:48 PM

Post #3 of 8 (2083 views)
Shortcut

Re: [Donna] Linking to image in content [In reply to]	Can't Post

Hi, Donna,

I want to link to the image.

I created a new upload field for in-line images, but if I selected the upload type as "List of Embedded Media..." instead of "List of Attached Files," the html I added in the WYSIWYG area showed up when I published the page.

What I ended up doing was using the link tool in the WYSIWYG, selecting the text I wanted to link the image to and adding:

***inline_image1:url***

in the Source field for the WYSIWYG link tool.

I'm not sure if I didn't follow your instructions, but I couldn't get adding the HTML directly to work.

Thanks for your help.

marys
User

Jul 5, 2008, 6:35 PM

Post #4 of 8 (2060 views)
Shortcut

Re: [marys] Linking to image in content [In reply to]	Can't Post

I'm not sure what happened, but "List of Embedded Media..." now works for the inline_image in the Database Editor.

If I have coded my article template to support popup windows and I want inline images to appear in popup windows, how and where do you recommend I add JavaScript link?

I'm guessing the code would look something like this, but I don't know where to insert it:

<a onclick="JavaScript: newWindow = openWin( 'inline_image', 'POPUP', 'width=700,height=900,toolbar=0,location=0,directories=0,status=1,menuBar=0,scrollBars=1,resizable=1,screenX=0,left=0,screenY=0,top=0' );newWindow.focus()" href="javascript:void()">

Jake
Staff / Moderator

Jul 6, 2008, 1:39 PM

Post #5 of 8 (1828 views)
Shortcut

Re: [marys] Linking to image in content [In reply to]	Can't Post

Hi marys,

The best way to do this would be to set up a new template cell on your template to control how the images for the inline_image field are displayed specifically. You can do this by adding this code to your articlePage.html template:

Code

<!-- templateCell : article.inline_image.embeddedMedia --> 
***link code for your images here*** 
<!-- /templateCell : article.inline_image.embeddedMedia  -->

You can find out more specifics on using custom code for your embedded media links if you click the "File and Image Uploads" link in the documentation here:

http://www.interactivetools.com/docs/articlemanager2/templates/index.html

The information you'll be wanting to check out is the last item on that page.

If you have any more questions about this, let us know!
-----------------------------------------------------------
Cheers,
Jake Swanson - Product Specialist
support@interactivetools.com

marys
User

Jul 10, 2008, 12:11 PM

Post #6 of 8 (1736 views)
Shortcut

Re: [Jake] Linking to image in content [In reply to]	Can't Post

Thanks, Jake.

I scrapped the Javascript idea for inline images and setup Lightbox http://www.huddletogether.com/projects/lightbox2/ .

It works perfectly for default embedded media, but I can't figure out how to code the inline image.

I added the following to my article template:


<img src="$file.WebUrl$" rel="lightbox" alt="$file.title$">


It didn't work. I also tried:



<img src="$file.WebUrl$" rel="lightbox" alt="$file.title$">



I thought I might need a templateIf because not all of the article pages will have inline images, but that didn't work, either.

Thanks in advance for any help.

Jake
Staff / Moderator

Jul 10, 2008, 6:51 PM

Post #7 of 8 (1726 views)
Shortcut

Re: [marys] Linking to image in content [In reply to]	Can't Post

Hi marys,

Is there a web page that you could direct me to that has this set up on it right now? If you'd rather not post that in the forum feel free to private message me a link. In the meantime, you might want to make sure that the path to the lightbox script is set correctly in the <script> tag for lightbox between the <head> and </head> tags on your template. You'll want to make sure that the path is using an absolute URL and not a relative one. Smile

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

thatscountry
User

Aug 6, 2008, 10:30 AM

Post #8 of 8 (1154 views)
Shortcut

Re: [Jake] Linking to image in content [In reply to]	Can't Post

Here is how I coded the embedded Media page to use Lightbox. It works great on all the photos I add to my articles with just remembering to check: 1. thumbnail and 2. link to fullsize image.

Quote

<script type="text/javascript" src="/am2/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="/am2/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/am2/lightbox/js/lightbox.js"></script> <head>
<link rel="stylesheet" href="/am2/lightbox/css/lightbox.css" type="text/css" media="screen" />




</head>
<table border="0" cellspacing="0" cellpadding=3 align="$file.align$" width="$file.thumbnailWidth$">
<tr><td>

<a href="$file.linkUrl$" rel="lightbox[album]" title="$file.caption$" [templateIf : $file.openLinkInNewWindow$ == "1" ]target="_blank" rel="lightbox[album]" title="$file.caption$" [/templateIf]>


<a href="$file.webUrl$" rel="lightbox[album]" title="$file.caption$" [templateIf : $file.openLinkInNewWindow$ == "1" ] target="_blank" rel="lightbox[album]" title="$file.caption$" [/templateIf]>
 <img src="$file.thumbnailWebUrl$" border="1" alt="$file.title:htmlEncoded$" width="$file.thumbnailWidth$" height="$file.thumbnailHeight$"></a><br clear="all">
<span class="image_caption">$file.caption$</span> </td></tr>
</table> <br clear="all">
  <table border="0" cellspacing=0 cellpadding="3" align="$file.align$" width="100">
<tr><td> 
<a href="$file.linkUrl$" [templateIf : $file.openLinkInNewWindow$ == "1" ]target="_blank"[/templateIf]>


<a href="$file.webUrl$" [templateIf : $file.openLinkInNewWindow$ == "1" ] target="_blank"[/templateIf]>
 <img src="$file.webUrl$" border="1" alt="$file.title:htmlEncoded$" width="$file.width$" height="$file.height$"></a><br clear="all">
<span class="image_caption">$file.caption$</span> </td></tr>
</table> <br clear="all">
  
<p>[ <a href="$file.webUrl$">Download/View $file.title$</a> ]</p>

***************

Marti Clayton
That's Country

Search for (options)