Link from thumbnail

I can currently get fckeditor to actually put in the img src equal to a .thumb_filename.jpg. So a thumbnail will show instead of the full image in the editor. However, I can not figure out how to automatically create an <a href> tag around that img tag to link back to the full image. Which file do i need to modify to change the default <img src=> generation?

Sat, 12/03/2005 - 00:58

alfonsoml

Joined: 31/12/2006

Posts: 3735

RE: Link from thumbnail

In the same fck_image.js where the image gets inserted you can find in the Ok function the code to insert a link around it:

var sLnkUrl = GetE('txtLnkUrl').value.trim() ;

if ( sLnkUrl.length == 0 )
{
if ( oLink )
FCK.ExecuteNamedCommand( 'Unlink' ) ;
}
else
{
if ( oLink ) // Modifying an existent link.
oLink.href = sLnkUrl ;
else // Creating a new link.
{
if ( !bHasImage )
oEditor.FCKSelection.SelectNode( oImage ) ;

oLink = oEditor.FCK.CreateLink( sLnkUrl ) ;

if ( !bHasImage )
{
oEditor.FCKSelection.SelectNode( oLink ) ;
oEditor.FCKSelection.Collapse( false ) ;
}
}

SetAttribute( oLink, 'target', GetE('cmbLnkTarget').value ) ;
}

Sat, 12/03/2005 - 09:05

holycow90

Joined: 03/12/2005

Posts: 12

RE: Link from thumbnail

Im in my fck_image.js, but the code that you speak of is not in there - I pasted it at the end before the return and all i get are javascript errors... Here is my OK function. Thanks for helping btw.

function Ok()
{
if ( GetE('txtUrl').value.length == 0 )
{
window.parent.SetSelectedTab( 'Info' ) ;
GetE('txtUrl').focus() ;

alert( oEditor.FCKLang.DlgImgAlertUrl ) ;

return false ;
}

if ( oImage && bImageButton && oImage.tagName == 'IMG' )
{
if ( confirm( 'Do you want to transform the selected image on a image button?' ) )
oImage = null ;
}
else if ( oImage && !bImageButton && oImage.tagName == 'INPUT' )
{
if ( confirm( 'Do you want to transform the selected image button on a simple image?' ) )
oImage = null ;
}

if ( !oImage )
{
if ( bImageButton )
{
oImage = FCK.EditorDocument.createElement( 'INPUT' ) ;
oImage.type = 'image' ;
oImage = FCK.InsertElementAndGetIt( oImage ) ;
}
else
oImage = FCK.CreateElement( 'IMG' ) ;
}

return true ;
}

Sat, 12/03/2005 - 11:55

alfonsoml

Joined: 31/12/2006

Posts: 3735

RE: Link from thumbnail

http://cvs.sourceforge.net/viewcvs.py/f ... &view=auto

Sat, 12/03/2005 - 12:08

holycow90

Joined: 03/12/2005

Posts: 12

RE: Link from thumbnail

Ah - I was using another version - some file extension project version. However, I finally got the actual fckeditor.net version working, now I need to figure out how to do what I would like it to do.

I can upload images fine - I am trying to have it automatically link when a .thumb_image is selected. When I click on browse server to insert an image, and I choose a .thumb_filename.jpg to have it automatically link to filename.jpg.

Sat, 12/03/2005 - 20:03

holycow90

Joined: 03/12/2005

Posts: 12

RE: Link from thumbnail

I got it worked out (for the most part) here is my code for anyone else interested. You need the default fckeditor installed...

Basically it gets the image link, strips out the filename, appends the .thumb_ to it and resizes as oppose to keeping the original dimensions.

Inside fck_image.html I added a checkbox for the behavior - incase you dont want to always use the thumbnail.
<input name="chkThumb" type="checkbox" id="chkThumb" value="checkbox" checked>

function UpdateImage( e, skipId )
{
e.src = GetE('txtUrl').value;
asdf = e.src.split("/");
filename = e.src.split("/")[e.src.split("/").length - 1];
asdf.pop();
if (chkThumb.checked) {
thumbname = (asdf.join("/") + '/.thumb_' + filename);
e.src = thumbname;
SetAttribute( e, "width" , '150' ) ;
SetAttribute( e, "height", '150' ) ;
} else {
SetAttribute( e, "width" , GetE('txtWidth').value ) ;
SetAttribute( e, "height", GetE('txtHeight').value ) ;
}

SetAttribute( e, "alt" , GetE('txtAlt').value ) ;
SetAttribute( e, "vspace", GetE('txtVSpace').value ) ;
SetAttribute( e, "hspace", GetE('txtHSpace').value ) ;
SetAttribute( e, "border", GetE('txtBorder').value ) ;
SetAttribute( e, "align" , GetE('cmbAlign').value ) ;