Matthieu | Blog

This enables dynamic resizing of the photo displayed, and enables the pseudo-lightbox popup to view the “full” resized image for users that can’t view the true full image.

< ?php defined("SYSPATH") or die("No direct script access.") ?>
 
<!-- Use javascript to show the full size as an overlay on the current page -->
<script type="text/javascript">
  $(document).ready(function() {
    full_dims = [< ?= $theme->item()->width ?>, < ?= $theme->item()->height ?>];
    $(".g-fullsize-link").click(function() {
      $.gallery_show_full_size(< ?= html::js_string($theme->item()->file_url()) ?>, full_dims[0], full_dims[1]);
      return false;
    });
    resize_dims = [< ?= $theme->item()->resize_width ?>, < ?= $theme->item()->resize_height ?>];
    $(".g-resized-link").click(function() {
      $.gallery_show_full_size(< ?= html::js_string($theme->item()->resize_url()) ?>, resize_dims[0], resize_dims[1]);
      return false;
    });
    // After the image is rotated or replaced we have to reload the image dimensions
    // so that the full size view isn't distorted.
    $("#g-photo").bind("gallery.change", function() {
      $.ajax({
        url: "< ?= url::site("items/dimensions/" . $theme->item()->id) ?>",
        dataType: "json",
        success: function(data, textStatus) {
          full_dims = data.full;
        }
      });
    });
  });
</script>
<style>
img.g-resize {
        width: 100%;
        height: auto;
}
</style>
<div id="g-item">
  < ?= $theme->photo_top() ?>
 
  < ?= $theme->paginator() ?>
 
  <div id="g-photo">
    < ?= $theme->resize_top($item) ?>
    < ? if (access::can("view_full", $item)): ?>
    <a href="<?= $item->file_url() ?>" title="< ?= t("View full size")->for_html_attr() ?>">
    < ? else: ?>
        </a><a href="<?= $item->resize_url() ?>" title="< ?= t("View full size")->for_html_attr() ?>">
    < ? endif; ?>
    < ?= $item->resize_img(array("id" => "g-item-id-{$item->id}", "class" => "g-resize")) ?>
        </a>
    < ?= $theme->resize_bottom($item) ?>
  </div>
 
  <div id="g-info">
    <h1>< ?= html::purify($item->title) ?></h1>
    <div>< ?= nl2br(html::purify($item->description)) ?></div>
  </div>
 
  < ?= $theme->photo_bottom() ?>
</div>

Web

How to dynamically resize an image using CSS

Comments (0)

By Matthieu, September 20, 2011 11:03 pm

 <style>
img.g-resize {
        width: 100%;
        height: auto;
}
</style>

Where g-resize is the class assigned to the img you want to have dynamically resized.

Thanks to http://michelf.com/weblog/2005/liquid-image/

Web

The kindergarten browser wars

Comments (0)

By Matthieu, June 25, 2011 11:15 pm

A friend posted this on Facebook today:

Quite an accurate depiction.

Image credit: The Shoze Blog

Software, Web

Web browser market share: Modern browser edition

Comments (0)

By Matthieu, April 9, 2011 3:23 pm

Microsoft was quick to boast of Internet Explorer 9′s 2.5 million downloads in its first 24 hours—a number quickly eclipsed by Firefox 4, which garnered 7.1 million in its first day.

via Web browser market share: Modern browser edition.

Oh, Microsoft, just give up on IE already. Focus on Windows, Office and Sharepoint instead.

Web

Restore one-click message selection in Gmail

Comments (0)

By Matthieu, March 29, 2011 9:37 pm

If you’re like me, you REALLY miss the ability to select all your unread (or read) conversations with one click. With the new Gmail interface, you have to first click the drop-down menu, the click the desired selection option. That’s one click too many IMO, and extra mouse mileage that’s wearing down the poor little thing.

But naturally, when the Internet has a problem, the Internet also has a solution.

Using some CSS, and the Stylish extension for Firefox, it’s possible to get the old links back, and they actually look even better than before.

@namespace url(<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>);
/*
 Gmail: Select "links" restored
*/
@-moz-document domain("mail.google.com") {
 
/* move search results text down below Select links */
.VP5otc-pzeoBf.D.E .yS { padding-top: 25px !important; }
 
/* same height as before (more or less) */
.VP5otc-pzeoBf.D.E .nH { height: 22px !important; }
 
.VP5otc-pzeoBf.D.E &gt; .nH &gt; .nH.Cq &gt; div &gt; div &gt; .J-M.AW:nth-child(7) {
 position: relative !important;
 top: -4px !important;
 left: 15px !important; /* line up with 'Search ...' */
 display: inline !important;
 height: 16px !important;
}
.VP5otc-pzeoBf.D.E &gt; .nH &gt; .nH.Cq &gt; div &gt; div &gt; .J-M.AW:nth-child(7) &gt; .SK:before {
 content: "Select: " ; font-family: Arial ; color: black ;
}
.VP5otc-pzeoBf.D.E &gt; .nH &gt; .nH.Cq &gt; div &gt; div &gt; .J-M.AW:nth-child(7) &gt; .SK {
 -moz-box-shadow: none !important;
 -webkit-box-shadow: none !important;
 padding-top: 4px !important;
 padding-bottom: 2px !important;
 background-color: transparent !important;
 font-family: Verdana !important;
}
.VP5otc-pzeoBf.D.E &gt; .nH &gt; .nH.Cq &gt; div &gt; div &gt; .J-M.AW:nth-child(7) &gt; .SK.AX &gt; .J-N {
 display: inline-block !important;
 padding-left: 8px !important;
 padding-right: 8px !important;
 -moz-border-radius: 3px !important;
 -webkit-border-radius: 3px !important; /* WebKit */
 cursor: pointer !important;
}
.VP5otc-pzeoBf.D.E &gt; .nH &gt; .nH.Cq &gt; div &gt; div &gt; .J-M.AW:nth-child(7) &gt; .SK.AX &gt; .J-N:hover {
 background-color:#406480 !important;
 color:white !important;
}
/* optional bg: sort of a button look (dark/light bg with light/dark text) * /
.A1.D.E &gt; .nH &gt; .nH.Cq &gt; div &gt; div &gt; .J-M.AW:nth-child(7) &gt; .SK.AX &gt; .J-N:not(:hover) {
 background-color: #406480 !important;
} /* dark blue [Planets bg] */
 
}

Thanks to Matt Kruse. Original script source: http://userscripts.org/topics/67827

Web

Virtual LAN with NAT/PAT for OpenVZ containers

Comments (0)

By Matthieu, October 13, 2009 9:07 pm

This blog is running from an OpenVZ container on a server with a single public IP. There is no separate router; the eth0 interfaces is connected directly to the Internet. Therefore, I had to create a vlan with private IPs for my containers which would share the one public IP. Here’s how I did it.

/etc/network/interfaces

auto eth0
iface eth0 inet static
address x.x.x.x
netmask 255.255.255.254
gateway x.x.x.x
 
auto venet0:0
iface venet0:0 inet static
address 172.29.247.100
netmask 255.255.255.0

Note that the venet0 interface is created when installing OpenVZ. By default it has no IP. I assigned a static IP of 172.29.247.100 and netmask of 255.255.255.0 to allow space for a whole lot of containers. Now for the fun part, messing with iptables.

# NAT VM subnet (247) to external ip
/sbin/iptables -t nat -A POSTROUTING -s 172.29.247.0/24 -o eth0 -j SNAT --to x.x.x.x
 
# Allow all traffic for venet0 interface
/sbin/iptables -A INPUT -i venet0 -j ACCEPT
 
# ssh to containers
/sbin/iptables -t nat -I PREROUTING -p tcp -d x.x.x.x --dport 2222 -j DNAT --to 172.29.247.103:22
/sbin/iptables -I FORWARD -p tcp -d 172.29.247.103 --dport 2222
/sbin/iptables -t nat -I PREROUTING -p tcp -d x.x.x.x --dport 2223 -j DNAT --to 172.29.247.102:22
/sbin/iptables -I FORWARD -p tcp -d 172.29.247.102 --dport 2223

It may not be the optimal solution, but it works, it’s stable, and I’m quite proud of myself.

Web

Spam. Now in french, with pictures!

Comments (0)

By Matthieu, October 13, 2009 12:44 pm

Someone at the school board received this spam message today. I must say this variation is better than the usual junk about viagra and rolexes . But seriously, what are they expecting to get out of this?

bonjour!!! ca va??? je m’appelle Svetlana. j’ai 29 ans.
j’ai deja eu une mauvaise experience de parler avec les hommes dans l’internet.
nous avons eu une correspondance exceptionnelle tres longtemps et je l’ai cru.
j’ai l’habitude de croire les hommes mais cet homme a casse mon coeur.
j’etais choquee et je ne savais pas ce que je devais faire. j’ai cesse a croire les hommes.
j’ai commence a travailler ferme pour oublier tout.
j’ai reussi a faire la cariere mais j’ai compris que la vie ce n’est pas le travail.
je veux etre aimee et je veux offrir l’amour.
je ne sais pas pourquoi je te dis ca j’ai regarde ton prifil et j’ai decide de t’ecrire.
je deteste le mensonge et les jeux avec les gens.

si tes intentions sont serieuses ecris mon email: [email protected]