Wednesday, April 24, 2013

How to link image to pdf file in Drupal 7 using fields and views

I recently had a request from a client regarding the display, structure and behaviour of their webpage. Euro Issa is a company in Bucharest that supplies steel drill bits, metal cutter tips, tools and equipment for metal fabrication. They want to have a page with an overview of product categories, displayed in a grid with three columns, where each category has title and thumbnail image with rounded colored borders linked to a pdf file.

To do this, I set up a content type like "Category Datasheet" with the fields: title, image field, file field and term reference as category field. I also created a new taxonomy vocabulary for the node type so that i could filter them later in views.

At this point I also started to wonder how I would later link the image with the pdf file attached to a node of type category datasheet. In Structure / Views I created a view and followed the drupal 'wizard' steps deciding what type of nodes to show and in which structure and style to display them.

After some research into how to link an image to an attached file I installed a few pairs of modules which did not solve the linking of the fields image and file. Link formatter, PDF Preview etc.

The rewriting options of each field selected in the view, allow you to output the image as a link to the pdf file, using pattern replacements form other fields of the filtered node. You can then easily choose from each field settings in views, whether or not to display them. In my case I only left the title and the image with an added CSS class for borders visible, excluding from the display the pdf file field and term reference category field and just using their data/url to rewrite the output of the visible fields.

If this helps you, feel free to donate and help by visiting some of the businesses on the right. There are more details to getting this to work and settings to take into account but I hope I will find the time to update this post.

"Please stop hotlinking my easing script - Start using a real CDN" Warning

One of my clients has a website for his car coating business in Bucharest, running on WordPress with Clockstone theme installed. The theme is using the slider plugin  Accordion slider that in turn uses a javascript function for easing. The author of the script, as I found out on this zen cart forum thread, is getting a lot of traffic and complaints from his hosting service, and he decided to make a pop-up appear on any page using the script remotely, that looks like this:

Please stop hotlinking my easing script — use a real CDN instead. Many thanks
Please stop hotlinking my easing script — use a real CDN instead. Many thanks

To solve this issue, one has to first download the jquery easing script (choose same version as one used currently remote ) and place it in the js folder of the plugin, in this case:
wp-content/plugins/wp-accordion-slider/js/jquery.easing.1.3.js
Next, the reference for this script must be changed, so that it's no longer called in the header directly from:
http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js
instead you should have it load from your server:
<script type='text/javascript' src='http://www.yourserver.com/wp/wp-content/plugins/wp-accordion-slider//js/jquery.easing.1.3.js?ver=3.5.1'></script>
 To do this, first locate which file loads the remote script. In my case the call was being made from the file:
wp-content/plugins/wp-accordion-slider/includes/scripts.php
in the first lines, I changed:
wp_register_script( 'jquery_easing', 'http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js'); 
with
wp_register_script( 'jquery_easing', WP_ACCORDION_URL.'/js/jquery.easing.1.3.js'); 
 I noticed afterwards that the jquery.easing.1.3.js was already provided, although not in the minified version, but the reference was not updated. I presume this would have been the responsibility of the theme or plugin developers.

Feel free to donate by visiting our sponsors on the right ;) and I hope this helps you get rid of the warning "Please stop hotlinking my easing script - use a real CDN instead".