shepline creative

Limiting file downloads to logged in users

Posted for my own reference, see here for instructions on how to limit the downloads of files to logged in users.

# These next two lines will already exist in your .htaccess file
RewriteEngine On
RewriteBase /
# Add these lines right after the preceding two
RewriteCond %{REQUEST_FILENAME} ^.*(gif|jpe?g|png|doc|docx|pdf|xls|xlsx|mp3|m4a)$
RewriteCond %{HTTP_COOKIE} !^.*wordpress_logged_in.*$ [NC]
RewriteRule . – [R=403,L]

I also use the Media File Manager plugin for separating my secure_files uploads into a separate folder.

Utilising the cycle.js code on a Responsive website

The solution that worked for me as found here: http://forum.jquery.com/topic/integrate-cycle-plugin-in-a-responsive-layout-using-media-queries

HTML code

<div>
<div>
<img src=”image1.jpg” alt=””  />
<img src=”image2.jpg” alt=””  />
<img src=”image3.jpg” alt=””  />
<img src=”image4.jpg” alt=””  />
</div>

<div>
<ul>
<li><a href=”image1.jpg”><img src=”image1-120×120.jpg” alt=”” /></a></li>
<li><a href=”image2.jpg”><img src=”image2-120×120.jpg” alt=”” /></a></li>
<li><a href=”image3.jpg”><img src=”image3-120×120.jpg” alt=”” /></a></li>
<li><a href=”image4.jpg”><img src=”image4-120×120.jpg” alt=”” /></a></li>
</ul>
</div>
</div><!– project –>

JavaScript Code

  1. $(document).ready(function() {
    $(‘.mainimg’).prepend(‘<img src=”images/loading.gif” >’);
    $(‘.mainimg’).cycle({
    slideExpr: ‘.slide’,
    fx: ‘fade’,
    slideResize: true,
    containerResize: false,
    pager: ‘.thumbs’,
    pagerAnchorBuilder: function(idx, slide) {
    // return selector string for existing anchor
    return ‘.thumbs li:eq(‘ + idx + ‘) a’;
    },
    pause: 1
    });
    });

CSS code

.mainimg img {
background: #EEEEEE;
padding: 2%;
width: 95% !important;
height: auto !important;
max-width: 95%;
height: auto;
}

img.loading {
width: 95% !important;
height: auto !important;
max-width: 95%;
height: auto;
border: none;
visibility: none;
}

Using WordPress lightbox gallery

Posted here for my own reference because the instructions for the WordPress Lightbox Gallery plugin are in Japanese:

How to use
How to use the Lightbox Gallery, WordPress 2.5 has essentially been built since the galleries are the same. Register for more photos, simply insert the tag below post. Photo captions, mouse over the image coming tooltip (tooltip) appears as a description of the photograph that appears when Lightbox is displayed.

Advanced Settings option is available to all short codes. For more options, WordPress 2.5 image using the list of new features galleries want to see. Here, in addition to the standard option, Lightbox Gallery added in explaining the options.

  • lightboxsize
    Lightbox lightboxsize specified by size is displayed. By default, the medium has become, full can also be specified.

    [Gallery lightboxsize = "full"]
  • meta
    meta specifies whether to display information about the accompanying photo. Has become false by default, does not appear. If you want to specify is true. Information accompanying the photos, the camera model, aperture, focal length, ISO, shutter speed, the time taken to display in Lightbox.

    [Gallery meta = "true"]
  • class
    To add an attribute class is the class gallery. Gallery1 is a default.

    [Gallery class = "gallery2"]
  • nofollow
    rel = “nofollow” to add. The default is a false.

    [Gallery nofollow = "true"]
  • from, num
    To view images from the position, num is the number of images to be displayed. The following example displays the images from the image’s third five.

    [Gallery from = "2" num = "5"]
  • pagenavi
    num navigation image is displayed depending upon the number of images used. pagenavi set to 0, and not showing navigation. For navigation, wp_link_pages same options are available.

    [Gallery num = "10" pagenavi = "0"]

Alternative to setting links to open in a new window

It’s neat because it works with my other jQuery applications, but this simple code opens up new links in a lightbox style window on top of your existing page. Standards compliant, or not…?

( GreyBox )

Removing the <li> display from the Site Admin/Register links

The problem with the default WordPress Site Admin/Register code:

<?php wp_register(); ?>

is that the resulting html displays these links as list items. To stop it from making these list items and just only display the link as regular text is actually frustratingly, annoyingly simple.

What you can do, is to call wp_register() with an argument like this:

<?php wp_register('',''); ?>

This will get rid of the li tags. However you can also surround the links with any tags/text of your liking:

<?php wp_register('<div>','</div>'); ?>

See the original answer here: http://wordpress.org/support/topic/removing-list-item-from-wp-loginout-and-wp-register

Aged Type Effect in Photoshop

A useful Photoshop technique for adding an aged effect onto type in Photoshop can be found here:

( aged type effect in photoshop )

  • Create your type as you normally would
  • Rasterize the type
  • Add noise, around 25%. Be sure the check the ‘Monochromatic’ checkbox.
  • Adjust the Input Levels, bring the black level up to about 70
  • Run a very slight Gaussian Blur on your type – like 1 or 2 px
  • Run Smart Sharpen to remove the blur but keep some of the organic distressing / softening that occurs. Like 200% for the amount and about 15 for the radius.
  • Adjust Levels again – bring black up to about 50 and white down to 69.

Or just download the Aged Text Effect Photoshop Action and never have to remember how to do it again.

In love with jQuery

In the last few months, the designers and developers at Shepline Creative have discovered, and fallen in love with, jQuery. With reasonably simple and straight-forward, lightweight code, there seems to be endless possibilities for exciting and vibrant designs.

Some of my favourite jQuery effects at the moment are:

  • CrossSlide – some common slide-show animations, traditionally only available via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself (that is, a lot!)
  • Catch My Flame: Infinite Caroursel – excellent slideshow/gallery software
  • jTabber – for tabbed pages
  • Accordian – nifty accordian/show-and-hide for cascading content

Gamages Accountancy Ltd launches new site and takes on Twitter

The Bicester-based Gamages Accountancy Ltd chose Shepline Creative to redesign and relaunch their website. The new site, soft-launched today gives a clearer, more user-friendly look. The new site also integrates a Twitter feed from the Practice Manager and further developments and enhancements are promised over the coming weeks.

Work on this site involved using existing, unfamiliar web hosting and all the necessary problem-solving that goes with that territory!

Greenwood Veterinary Clinic launches new website

The Buckinghamshire-based Greenwood Veterinary Clinic chose Shepline Creative to redesign and relaunch their website. The new site, launched earlier this month features about the team pages and online registration for new clients.

Work involved in the production of this site involved careful negotiation with the previous webhost to transfer the website, including email, to new servers, ensuring a smooth and continuous transition throughout.

New websites in development

The summer of 2010 is turning out to be a busy time of year for us, with several new websites currently in development for launch in the next few months. For an idea, think local small business; think complete redesign of an established site; think brand new, internationally focused, historically fascinating research project.

Watch this space for more!