How to make Attachments Open in a New Window

vrijvlinder

put this code in the< div id="Foot" > section of your theme's default.master.php , if you use tpl (smarty), add { literal } script{ /literal } . You can use this for any links you want to open in a new window. just add them. Remove the spaces I added between < > so it would show here but you remove the spaces or it won't work..

< script type="text/javascript" > $(document).ready(function() {
   $(".Attachment a").attr("target", '_blank');
});
< /script >

kirkpa31

I've searched for a solution and tried code after code trying to get embedded images to open in a new window when you click on them. Now I'm referring to images embedded within the body, not attachments via FileUpload. Attached is a link to a vanillaforums.com discussion about this topic with a post by Mark O'Sullivan about half way down with an embedded image that opens in a new window when clicked, not opening in the current window and blocking the whole screen.

How did he do this?:

http://vanillaforums.com/discussion/78/image-resize

kirkpa31

I believe that this is the .js file that needs to be edited, only I don't know how to make the image open in a new window when clicked rather than just open in the current window providing an awkward full size image.

// Shrink large images to fit into message space, and pop into new window when clicked.
// This needs to happen in onload because otherwise the image sizes are not yet known.
jQuery(window).load(function() { var toggler = function(t_img, t_width) { if (t_img.css('width') == 'auto') t_img.css('width',t_width); else t_img.css('width','auto'); return false; } jQuery('div.Message img').each(function(i,img) { var img = jQuery(img); var container = img.parent(); if (img.width() > container.width()) { var smwidth = container.width(); img.css('width', smwidth).css('cursor', 'pointer'); img.after('<div class="ImageResized">' + gdn.definition('ImageResized', 'This image has been resized to fit in the page. Click to enlarge.') + '</div>'); img.next().click(function() { return toggler(img, smwidth); }); img.click(function() { return toggler(img, smwidth); }) } }); });

kirkpa31

When I change it to this code, clicking the embedded images opens the enlarged image, albeit not in a new window but that is fine with me, however, the images are not shrunk to fit the window within the post. Anybody know how to fix that?

jQuery(window).load(function() { var props = ['Width', 'Height'], prop; while (prop = props.pop()) { (function (natural, prop) { jQuery.fn[natural] = (natural in new Image()) ? function () { return this[0][natural]; } : function () { var node = this[0], img, value; if (node.tagName.toLowerCase() === 'img') { img = new Image(); img.src = node.src, value = img[prop]; } return value; }; }('natural' + prop, prop.toLowerCase())); } jQuery('div.Message img').each(function(i,img) { var img = jQuery(img); var container = img.closest('div.Message'); if (img.naturalWidth() > container.width() && container.width() > 0) { img.after('<div class="ImageResized">' + gdn.definition('ImageResized', 'This image has been resized to fit in the page. Click to enlarge.') + '</div>'); img.wrap('<a href="'+$(img).attr('src')+'"></a>'); } }); // Let the world know we're done here jQuery(window).trigger('ImagesResized'); });

vrijvlinder

So what exactly is that you want, to open in a new window or to resize ?

To resize all images posted you can do it with css

.Preview .Message, .MessageList .Message img {
width: 300px!important;
height: auto;
}

you can also use % as width.

How did he do this?:

Possibly script like the one I posted above?

$(document).ready(function() {
   $(".Attachment a").attr("target", '_blank');
});
$(".Message a img").attr("target", '_blank');
});
$(".Message a").attr("target", '_blank');
});

kirkpa31

Sorry for the massive amount of posts, this is apparently my version of thinking out loud. I've solved the issues posted above, only can't get the image to fit within the frame of the discussion table. Attached is my Vanilla forum with the images overlapping.

http://www.idenitties.com/

vrijvlinder

Use the css code I posted above to make all the images be the same size. Paste it in the custom css of the theme.

put in 680px as the width so it is the width of the content box

kirkpa31

You are truly an amazing human being @vrijvlinder. Thank you much!

businessdad

@kirkpa31 said:
Sorry for the massive amount of posts, this is apparently my version of thinking out loud. I've solved the issues posted above

Could you please post the solutions you have adopted to solve them? I'm sure they can be useful to other people.

kirkpa31

@businessdad said:

Could you please post the solutions you have adopted to solve them? I'm sure they can be useful to other people.

Certainly, to fix the issue of large embedded images opening in the current frame and blocking everything out, I simply looked at the source code to the post mentioned above and pulled out a bit of javascript.

I replaced the very last section of code in the global.js file that I referenced in my second comment above (starting with that jQuery(window) heading) with the code I found in the source code that I referenced in my third comment above (also starting with that jQuery(window) heading but is a little bit longer). This solved my problem of images not opening in a new window.

To fix the framing issue, I used @vrijvlinder 's advice and added this to my theme's custom.css:

.Preview .Message { width: 330px!important; height: auto; } .MessageList .Message img { width: 330px!important; height: auto; }

The 330px because I wanted them to appear side-by-side in the 680px available body space.