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.

No comments:

Post a Comment