[RC] Posted Image Resizer v1.10

A place for MOD Authors to post and receive feedback on MODs still in development. No MODs within this forum should be used within a live environment!
Anti-Spam Guide
Read My Message
Registered User
Posts: 22
Joined: Mon Oct 06, 2008 1:48 pm

[RC] Posted Image Resizer v1.10

Post by Read My Message »

Modification Name: Posted Image Resizer v1.10 - also known as PIR (pronounced peer)
Author: Ashley Taylor - [email protected]

Modification Description:: Very small MOD that will fix the known issue of images over flowing outside of the forum. Very handy MOD for gaming and computer related websites with alot of screenshots etc.
Modification Version:: Version 1.10 - released

Requirements: This mod is compatible with a fresh install.

Features: Simple JavaScript that automatically resizes the images in posts and signatures (any image that is rendered by the BBCode [IMG] tag).

Screenshots:
This is the image I posted:
http://www.planet-mu.com/image/discogra ... stance.jpg
This is a screenshot of it working:
http://img.getdarker.com/uploads/2008/1 ... -image.jpg

Demo URL: http://getdarker.com/forums/viewtopic.p ... =633#p1461

Modification Download: Download soon to come. Please follow the instructions below meanwhile.

------------------------------------------

I give you..the greatest image resizer of all time!!

DEMO: http://getdarker.com/forums/viewtopic.p ... =633#p1461

Update: Fixed the JS. If you found it was opening other images then please re download and overwrite the old one.

Problem/Scenario:
You have your fixed width forum, and someone decides to post an image that is 6 and a half billion pixels wide - and what happens? You can't see it. The forum doesn't stretch and most importantly the image is still half hidden. So what do you do? You install PIR! Posted Image Resizer. This also works for signatures too!

Solution:
PIR uses JavaScript to iterate through every image and checks if it's width is greater than a specified value. If it is, then boy oh boy do we have a suprise! PIR will resize the image and make it clickable. PIR will also display a neat bar down the side that has the text, "Click to enlarge". PIR also display's the pointer cursor icon so it looks like a normal link.

WTF HOW DO I USE IT?
Simple! Follow the easy steps below to install PIR.

-------------

Step 1, includes/bbcode.php
Open includes/bbcode.php

FIND

Code: Select all

<img src="$1" alt="' . $user->lang['IMAGE']
(Line 410 hopefully)

REPLACE THE WHOLE LINE WITH:

Code: Select all

				'img'		=> '<img src="$1" alt="' . $user->lang['IMAGE'] . '" class="posted_image" />',
(basically just adding the class here, this is the most vital piece!)

SAVE FILE AND UPLOAD

-------

Step 2, the side-bar.jpg and pir.js!
side-bar.jpg - Right click the link below and save target as and save it to your machine,
http://getdarker.com/forums/images/pir/side-bar.jpg

pir.js - Right click the link below and save target as and save it to your machine,
http://getdarker.com/forums/images/pir/pir.js

Note: You might want to edit the pir.js file if you want to increase your maximum width past 600 pixels.

-------

Step 3, the upload!
Upload these files to

Code: Select all

images/pir/
This is relative to your forum path, so if your forum is at http://mysite.com/forums/ then it would be http://mysite.com/forums/images/pir/ - comprende?

-------

Step 4, editing the templates!
Log into your admin control panel, click the styles tab at the top, click templates under style components. Edit your current theme.

Select overall_header.html from the drop down list.

Now copy this:

Code: Select all

<style type="text/css">
.posted_image_resized { background-image:url(/forums/images/pir/side-bar.jpg);background-repeat:no-repeat;background-position:left center;background-align:middle;padding-left:22px;cursor:pointer;border:0px;margin:2px;background-color:transparent; }
.posted_image_resized_hover { background-image:url(/forums/images/pir/side-bar.jpg);background-repeat:no-repeat;background-position:left center;background-align:middle;padding-left:22px;cursor:pointer;border:2px solid #cccccc;margin:0px;background-color:#cccccc; }
</style>
<script src="/forums/images/pir/pir.js" type="text/javascript"></script>
Note: You might need to change the paths to the image and the javascript depending on your set up.

Paste this above the </head> tag.

Then on the body tag, add this:

Code: Select all

onload="updatePostedImages();"
So your body tag should look like this:

Code: Select all

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}" onload="updatePostedImages();">
Click submit

--------

Step 5, PURGEEEEEE!

In the admin control panel click the general tab, and then find the button "Purge the cache" and click the Run Now button, then click yes.

Sorted.

Installed.

Go find a huge ass image and post it on your forum to see what happens!
Last edited by Read My Message on Wed Oct 08, 2008 11:52 am, edited 6 times in total.
Read My Message
Registered User
Posts: 22
Joined: Mon Oct 06, 2008 1:48 pm

Re: (PIR v1.00) BEHOLD! The Greatest Image Resizer of All time!

Post by Read My Message »

woops! Not sure if this was the right area. Could a MOD please move? Thanks.
SquaredArches
Registered User
Posts: 87
Joined: Tue Nov 14, 2006 8:38 am

Re: (PIR v1.10) BEHOLD! The Greatest Image Resizer of All time!

Post by SquaredArches »

Has anyone installed this and got it working?

I'm after something along these lines and this one sounds like it could be a winner if it works ;)
Peter77sx
Registered User
Posts: 3260
Joined: Wed Nov 09, 2005 2:51 pm

Re: (PIR v1.10) BEHOLD! The Greatest Image Resizer of All time!

Post by Peter77sx »

Once it's packaged up neatly, I may give it a shot. :)
Read My Message
Registered User
Posts: 22
Joined: Mon Oct 06, 2008 1:48 pm

Re: (PIR v1.10) BEHOLD! The Greatest Image Resizer of All time!

Post by Read My Message »

SquaredArches wrote:Has anyone installed this and got it working?

I'm after something along these lines and this one sounds like it could be a winner if it works ;)
I wrote the guide as I installed it onto my own forum.

Want a screenshot of it working?

This is the image I posted:
http://www.planet-mu.com/image/discogra ... stance.jpg

This is a screenshot of it working (and the whole problem too on phpbb.com):
http://img.getdarker.com/uploads/2008/1 ... -image.jpg
Image
User avatar
A_Jelly_Doughnut
Former Team Member
Posts: 34459
Joined: Sat Jan 18, 2003 1:26 am
Location: Where the Rivers Run
Contact:

Re: (PIR v1.10) BEHOLD! The Greatest Image Resizer of All time!

Post by A_Jelly_Doughnut »

Hi,

Can I point you to the MODs In Development forum guidelines, particularly 3a regarding topic prefixes and 5b regarding posting the changes directly in the topic (you should have a download instead).

Thanks,
The MOD Team
A Donut's Blog
"Bach's Prelude (Cello Suite No. 1) is driving Indiana country roads in Autumn" - Ann Kish
Read My Message
Registered User
Posts: 22
Joined: Mon Oct 06, 2008 1:48 pm

Re: (PIR v1.10) BEHOLD! The Greatest Image Resizer of All time!

Post by Read My Message »

Ok I will upload it as a zip file later.

At work at the moment 8-)
User avatar
Highway of Life
Former Team Member
Posts: 6048
Joined: Wed Feb 02, 2005 5:41 pm
Location: Bend, OR
Name: David Lewis
Contact:

Re: (PIR v1.10) BEHOLD! The Greatest Image Resizer of All time!

Post by Highway of Life »

Read My Message wrote:Ok I will upload it as a zip file later.

At work at the moment 8-)
Also please be sure to use a proper topic prefix, start post format as well as a proper topic title.

Thanks. :)
Read My Message
Registered User
Posts: 22
Joined: Mon Oct 06, 2008 1:48 pm

Re: [RC] Posted Image Resizer v1.10

Post by Read My Message »

Updated the first topic. Will make it downloadable later today.
User avatar
RockstEdy
Registered User
Posts: 13
Joined: Thu Oct 02, 2008 1:36 am
Contact:

Re: [RC] Posted Image Resizer v1.10

Post by RockstEdy »

How does this mod handle images with links?

Code: Select all

[url=http://www.google.com/][img]http://www.google.com/intl/en_ALL/images/logo.gif[/img][/url]
Read My Message
Registered User
Posts: 22
Joined: Mon Oct 06, 2008 1:48 pm

Re: [RC] Posted Image Resizer v1.10

Post by Read My Message »

RockstEdy wrote:How does this mod handle images with links?

Code: Select all

[url=http://www.google.com/][img]http://www.google.com/intl/en_ALL/images/logo.gif[/img][/url]
The image itself is clickable - but will open the image at a larger size. I am working on a solution that will resize the image, and add a link to view it enlarged but still retains the link defined at first.

Well done for noticing though!
wils0n
Registered User
Posts: 3
Joined: Thu Oct 09, 2008 7:38 am

Re: [RC] Posted Image Resizer v1.10

Post by wils0n »

hmmm... I wanted to test it, but in my forum it doesn't work.. :|

--> http://www.hardware-supportforum.de

i changed the path into the path where the 2 uploaded files are.
But if i post an image, nothing happens, just the normal big image appears..

Can you think of, what is my fault? :S

sorry for my english.

edit: My Mistake! Works very well! Thanx a lot!
Read My Message
Registered User
Posts: 22
Joined: Mon Oct 06, 2008 1:48 pm

Re: [RC] Posted Image Resizer v1.10

Post by Read My Message »

wils0n wrote:hmmm... I wanted to test it, but in my forum it doesn't work.. :|

--> http://www.hardware-supportforum.de

i changed the path into the path where the 2 uploaded files are.
But if i post an image, nothing happens, just the normal big image appears..

Can you think of, what is my fault? :S

sorry for my english.

edit: My Mistake! Works very well! Thanx a lot!
You're welcome!
dakpluto
Registered User
Posts: 32
Joined: Thu Dec 20, 2007 6:00 pm

Re: [RC] Posted Image Resizer v1.10

Post by dakpluto »

Isn't working with subsilver based themes...It just breaks the size of the forum. Fix?
User avatar
Notorious Pyromaniac
Registered User
Posts: 7
Joined: Tue Oct 14, 2008 12:31 am
Location: Liverpool, UK
Contact:

Re: [RC] Posted Image Resizer v1.10

Post by Notorious Pyromaniac »

Works perfectly! Thank you so much! :D

Edit: I've noticed that when you reply in a forum with the large image, that it isn't resized. The page to reply becomes very wide.

Is there any way to sort this?
Locked

Return to “[3.0.x] MODs in Development”