Plugin : Image Resize

[pimpmaster]

I allow my linkowners to upload five pictures with their link. I´m using the following code on detail_link.html to show thumbnails:

 <a href="<%$pic1%>" rel="lightbox"><img src="thumb.php?src=<%$pic1%>&x=160&y=160&f=0" border="0"></a> 
  

In theory it works fine, but it also means that the PHP-script is called every time the page is loaded. And since there are five pictures the same script is called five times.

I would be able to do something like this:

 <if path-to-thumb/thumb_pic is empty>
  <%php%> include("thumb.php?src=<%$pic1%>&dest=<%$pic1%>&x=160&y=160&f=1"); <%/php%>
// Creates a thumbnail if one doesn´t exist for the picture
<else>
  <a href="<%$bild1%>" rel="lightbox"><img src="path-to-thumb/<%$pic1%>" border="0"></a>
// Shows the thumbnail linked to the actual picture
<end if> 
  

The first problem is that I can´t get the PHP-include to work. Doesn´t it work to pass variables?
Or do I have to write a separate PHP-script triggered with a cron-job to create the thumbnails. That would mean I´d have to run the cron-job all the time.

How do you solve it? Please, need help, because I don´t want to slow down the servers with unecessary calls.

[echo@]

I just wanted to say thankyou to inspireme for finding this, its a must have and its smart to use a smarty function lib (plugin) than other solutions.
You might aswell use the right tools that came with indexu.

Also would like to thank antony for solving the problem for the "no images" fix for Deluxe versions of indexu.

<%if $pictures|file_exists%>
<%thumb file="$pictures" width="150" height="100" window="true" sharpen="true" link="true" hint="true" html='border="0"'%> <%/if%>

Works like a charm.

There are a couple of things I found that was a problem and would like to document to make it easier for others.

• When using this plugin with mod rewrite you must ensure you put a base href at the top of either your header or the file your using this on eg:

  <base href="http://www.your-web-site.co.uk">

  as this plugin generates hardcoded relative paths like so

  images/cache/984922d153149524c50a388fd65feb9a.jpg

• The url location for the file no-longer exists it seems the developer "Christoph Erdmann" is not arround for support, so I have attached the "smarty plugin" for download. The plugin has been renamed to a .txt file so rename to a .php file when you have downloaded

• You must make sure you put this plugin in your "lib/smarty/plugins" directory, or else it wont work. From reading this thread several users didnt do this and wondered why it didnt work

• You will have to create a directory in your indexu root called "images" then create a sub-directory called "cache". Make "cache"'s permissions writable chmod to 777.

How to use this with lytebox?

Download lytebox here

<%if $image1|file_exists%>
<h1>My Images</h1>
<a href="http://www.your-web-site.co.uk/<%$image1%>" rel="lytebox[details]" title="<%$title%>">
<%thumb file="$image1" width="150" window="true" sharpen="true" link="false" hint="true" html='border="0"'%>
</a>

<%/if%>

Hope this helps make life easier for someone

[netclick]

Can anyone else recommend a good image enlarge script? The URL has been removed from original post...

cheers

[FSGDAG]

I assume you mean that when a user clicks on the image, it opens in a new window and enlarges.... lytebox is probably the best and most widely used.

You can find it here

[netclick]

Thanks for that! I am checking it out now

[netclick]

Wow, this is an awesome script, thanks for the heads-up FSGDAG!
i will let you know how I go!

[weswa]

probably a stupid question, but where do I put the /lytebox_v3.22 folder?

in the root?

[FSGDAG]

You can create a folder with any name and put it in the root. When you call the javascript in the header, just use the relative path

[weswa]

Hi FSGDAG,

Thank you for helping. I added the code to detail_link.html as follows, but the lytebox does not show up if you click the image on Senwa - Senwa

The code to detail_link.html is now:

<base href="http://www.inschoonhoven.nl">
<%$hook_html_link_detail_begin%>

<%* - Begin javascript area---- *%>
<link type="text/css" rel="stylesheet" href="<%$tpl_base%>/star_rating.css"/>
<script language="javascript" type="text/javascript" src="<%$tpl_base%>/jquery.js"></script>
<script language="javascript" type="text/javascript" src="<%$tpl_base%>/star_rating.js"></script>
<div style="display:none" id="themesUrl"><%$tpl_base%></div>
<div style="display:none" id="site_url"><%$site_url%></div>
<script type="text/javascript" language="javascript" src="<%$site_url%>/lytebox_v3.22/lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
<%* - end javascript area------ *%>
...
..
<td>Afbeeldingen</td>
<td><%if $afbeelding|file_exists%>
<a href="http://www.inschoonhoven.nl/<%$afbeelding%>" rel="lytebox[details]" title="<%$title%>">
<%thumb file="$afbeelding" width="300" window="true" sharpen="true" link="false" hint="true" html='border="0"'%>
</a><%/if%>
</td>

also I added function.thumb.php to lib/smarty/plugins/

Would you know what I have done wrong?

Thanks,
Wessel

[FSGDAG]

I haven't done a lytebox install in a while, but here are my suggestions:

First :

<script type="text/javascript" language="javascript" src="<%$site_url%>/lytebox_v3.22/lytebox.js"></script>

Make it a little easier on yourself. First, hardcode the address instead of using <%$site_url%>. Second, change the folder name from 'lytebox_v3.22' to just 'lytebox'.

Second:

<a href="http://www.inschoonhoven.nl/<%$afbeelding%>" rel="lytebox[details]" title="<%$title%>">

I'm not sure about the rel="lytebox[details]". Unless they have change something in a newer release, my code always just used rel="lytebox"

Lastly:

<%thumb file="$afbeelding" width="300" window="true" sharpen="true" link="false" hint="true" html='border="0"'%>

I'm also not sure about this. I would think that instead of the thumb file statement you would want to use a img src statement. I would also think you would need to use <%$afbeelding%>

So to bring it all together I probably would try something like this:

<td><%if $afbeelding|file_exists%>
<a href="http://www.inschoonhoven.nl/<%$afbeelding%>" rel="lytebox" title="<%$title%>">
<img src="<%$afbeelding%>" width="300" window="true" sharpen="true" link="false" hint="true" html='border="0"'%>

Please understand, I'm NOT a programmer, nor am I an expert in this. I've just been hacking around with IndexU Deluxe for the last couple of years now and have been learning from other members ( in the past ) like Inspireme, echo@, Bruceper, etc. Try what I've suggested, if it doesn't work then post back and we can continue trying different things. Otherwise, maybe one of the programmers can chime in and let us know if we are on track or not

[echo@]

Weswa

I think this is where you are going wrong in red.


<script type="text/javascript" language="javascript" src="<%$site_url%>/lytebox_v3.22/lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

I might be wrong (im a little rusty at the mo), so if you can for instance render the page and look at this section of code and tell me it if looks like

 <script type="text/javascript" language="javascript" src="<http://www.inschoonhoven.nl/http://www.inschoonhoven.nl//lytebox_v3.22/lytebox.js"></script> 
 

The <base href="http://www.inschoonhoven.nl"> is more than likely adding an extra site url to the path.

I would of done this but i can't find any sample detail_links.html on your site.

Let me know

[weswa]

Hi FSGDAG and @echo,

Thank you for helping. I changed the code like you adviced, but in IE the image does not show, and in FF the image is visible and if you click on it , it enlarges in a standard way (not with lytebox it seems). The code I have in detail_link.html is now:

<base href="http://www.inschoonhoven.nl">
<%$hook_html_link_detail_begin%>

<%* - Begin javascript area---- *%>
<link type="text/css" rel="stylesheet" href="<%$tpl_base%>/star_rating.css"/>
<script language="javascript" type="text/javascript" src="<%$tpl_base%>/jquery.js"></script>
<script language="javascript" type="text/javascript" src="<%$tpl_base%>/star_rating.js"></script>
<div style="display:none" id="themesUrl"><%$tpl_base%></div>
<div style="display:none" id="site_url"><%$site_url%></div>
<script type="text/javascript" language="javascript" src="http:///www.schoonhoven.nl/lytebox/lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
<%* - end javascript area------ *%>

...
..

<td>Afbeeldingen</td>
<td><%if $afbeelding|file_exists%>
<a href="http://www.inschoonhoven.nl/<%$afbeelding%>" rel="lytebox" title="<%$title%>">
<img src="<%$afbeelding%>" width="530" window="true" sharpen="true" link="false" hint="true" html='border="0"'%>
</a><%/if%>
</td>


an example of a test-link with image is here: Senwa - Senwa

The source code shown in the browser for this page is:

<td>Afbeeldingen</td>
<td> <a href="http://www.inschoonhoven.nl/upload_files/afbeelding_1.jpg" rel="lytebox" title="Senwa - Senwa">
<img src="upload_files/afbeelding_1.jpg" width="530" window="true" sharpen="true" link="false" hint="true" html='border="0"'%>
</a> </td>
<td>

Would you have any clue what I am still doing wrong here?

Thanks and regards,
Wessel

[echo@]

Lets fix the first problem,

The reason your image is not displaying in IE is because IE 7 and above is more CSS compliant, IE ignores the base href in the body of the page (unlike firefox) therefore you should put the base href in your detail_link.html <HEAD> section.

This should fix this problem

Check out IEBlog : All your <base> are belong to us

as with lytebox not loading im still thinking about it ...

[weswa]

Hi echo@,

In detail_link.html is no head section. I tried 2 ways, both did not work;
I added this at the top of the file:
<head>
<base href="http://www.inschoonhoven.nl">
</head>

and as there is a <thead> section, I tried adding:
<base href="http://www.inschoonhoven.nl">
there, but still no luck.

Maybe <base href="http://www.inschoonhoven.nl"> needs to go into the <head> section of header.html?

thanks and regards,
wessel

[weswa]

fixed -> i added <base href="http://www.inschoonhoven.nl"> to header.html and now it works.

Thank you for advicing.