Search i-r-paulus

Close Panel

    Archived tutorialsDon't forget - these are archived tutorials - the instructions below will relate to Joomla! 1.5 and/or Joomla! 1.6.

    Updated versions will eventually be available in the 'Tutorials' section.

    Sep 22 2010

    Installing & Using My Virtuemart Manufacturers Logos Module

    This module was written some time ago now, and will only work with Joomla 1.5 and associated versions of Virtuemart ... I will upgrade this to work with the newer versions as soon as I have time (as of June 2012, I have only just installed versions of Virtuemart on test servers)

    Greetings :)

    A long time ago I wrote a module to display the logo's for the manufacturers on the webshop I built and maintain in my real world job - it was a hacked together thing and it was for Joomla 1.0 ... now I've got around to making it work in 1.5 (which means 1.6 will no doubt be finished pretty soon).

    First off - there are a few other modules around that do a similar thing, but I think I've spent some time making this as easy for non techies as possible, and it does exactly what I wanted, so hopefully it will help a few of you out.

    I've realised after putting a few of these modules together that I really ought to ask people to let me know if they use any of my modules, just so I can link to their sites ... so if you use it, let me know ... I don't like having to register before you can download, so I want to avoid that if I can, but I would like to showcase where my modules are being used:)

    First off - this module is for Joomla and Virtuemart (if you don't know what Virtuemart is you don't have it - so stop reading now!).

    Next, before you can use the module, you have to do a little work :(

    Don't worry, it's not too difficult ...

    Before Installing the Module

    1) Open up Virtuemart from your website administration area.

    Open Virtuemart

    2) Navigate to the Manufacturer tab

    Click on Manufacturer Tab

    3) Now click on List Manufacturers

    List Those manufacturers :)

    4) This is where we get the information we need to build our logo's (you can get this from your database if you prefer - use phpmyadmin if its installed and export the information).

    You need to make a list of the id number of your manufacturer or the name of the manufacturer.

    Make a note of the ID or the NAME

    In your database these are manufacturer_id and mf_name - this is where you have to decide which naming convention to follow.

    Either name your logo image files after the id of your manufacturer or the name of the manufacturer - now my logo's are named after the id, so I have a group of images which are named 1.jpg, 2.jpg,3.jpg etc etc.

    If you decide to go for the other option (which I have allowed for in the module) remember that your manufacturers names will have CAPITALS    lowercase                                      and spaces !

    So if your manufacturer is called The Really Quite Good Banana Painting Company, my module will be expecting to find the image The Really Quite Good Banana Painting Company.jpg (nothing else - I'm pretty sure most systems allow for spaces in image names these days, but I'm not 100% sure) - In essence, unless you really have to, use the ID !

    Create your logo's

    5) With the information you need either jotted down or in some form of spreadsheet if you have lots of manufacturers ,open up your favourite graphics package and create yourself some logo's for the manufacturers that you supply goods for from your online shop.

    Save all these images in a folder of their own.

    It's not really for me to say, but I suggest you pick a size and make all your logo's fit into that size - all my logo's are 150 pixels wide by 45 pixels high, this ultimately means some of them are a little difficult to read, but if you decide to make them all different sizes, it does look pretty ugly when they are all listed ... anyway I digress ...

     6) Now you need to set up a new image folder in Joomla to hold your logo's.

    In your Admin area go to Site then Media Manager

    Open Media Manager

    7) Now create a new folder for your manufacturers images - I've called mine manufacturers (because I like simple things)

    Create a new folder

    8) Of course you can do this by using your favourite ftp program if you wish :)

    If you use ftp navigate to  /public_html/images/ and create a new folder here.

    You also might want to upload using ftp if you have lots of logos (like I do) - otherwise you can use Media Manager.

    9) Once you have all your logo's uploaded, you should have the following in Media Manager

    Yeah They Are There

    If you haven't named your folder manufacturers, don't worry, you can still reference it using the module, just as long as you have your logo's with either the manufacturer id or name, we're cooking on gas!

    DON'T FORGET TO CREATE A NEW LOGO IMAGE AND UPLOAD IT FOR EACH NEW MANUFACTURER YOU ADD AFTER YOU UPLOAD THE MODULE :) ... I mention this, because I always forget :(

    Installing & Setting Up My Virtuemart Manufacturers Logo's Module

    1) Nice simple one to start - download the module zip and save it somewhere safe.

    Download mod_vm_manufacturers_logos

    2) In the Admin page of your site go to Extensions then Install/Uninstall

    Install the module

     3) Search for the mod_vm_manufacturers_logos.zip that you saved earlier and upload it :)

    Upload the zip file

    4) If you end up looking at something similar to this ...

     Yeah It Worked :)

    Then the module has loaded properly!

    5) Now edit the module to work the way you want it to ...

    navigate to Extensions then Modules and look for mod_vm_manufacturers_logos on the dropdown ...

    mod_vm_manufacturers_logos

    .. and click on it!

    6) To edit the module - click on the title Virtuemart Manufacturers Logos

    Edit the module

     7) Change the Title and choose which pages and position that you want the module to appear on, as you would with any other Joomla module ...

    Set The title and positions

    8) Now the juicy bits ... setting the parameters :)

    i) Choose Layout Style

    Choose Layout

    You can choose to have the text surrounding your logos either centred, to the left, or to the right.

    This works well if you use a fairly thin right hand column to display your logo's, having the text right justified, looks much better. Remember that if you use my module to display the list or dropdown versions of the manufacturers search, these will also be justified based on this choice :)

    ii) Text Before Your Logos or List

    Text b4 the module

    Just an area where you can put some extra information if you wish - I find with a lot of modules this is something I could do with, so I try to put it in :) You can use HTML if you like - or leave it blank!

    iii) Choose Format

    Choose Format

    This gives you the choice of which way to display your manufacturers - Default is the logo images, but you can also choose List or Dropdown (as per the original manufacturers search module).

    If you don't use Logos, then obviously the next 3 parameters are ignored :)

    Also - worth mentioning that I have fiddled around with the original code, so the way the list and dropdown versions render is not exactly the same as the originals - more on this later :)

    iv) Choose the method of id for the logo

    Blimey, I could have made that less wordy :) - this is where you select eiher Manufacturer Id (that is your image logo's are named 1.jpg, 2.jpg etc) or Manufacturer Name (they are named Manufacturer A.jpg, Manufacturer B.jpg etc)

    Select by ID

    v) Choose Image Format

    Are your images jpg, png or gif ? select the extension here :) Default is jpg, because my images are jpg!

    Choose image format

    vi) Your Image Folder

    This refers to the folder where your logo's are stored (we set this up at the beginning, remember?) - the default is images/manufacturers/ if you are using the standard media manager your folder will also reside in images/ .... remember to put the trailing / in or it won't work (I should really add a error trap for this ... oh well, next version).

    The folder your images are in

     vii) Text After Your Logos or List

    Another of those sort of self explanatory ones really - you can leave this blank, or add text here (including HTML).

    Add your closing text here

     If your are using the module for logo's the parameters should look something like this ...

    Parameters all filled in :)

    9) Now Save your changes and check to see if it works - if it didn't, whoops :)

    Extra Information - For those that like to Fiddle :)

    I've done a few checks to see how it looks in different browsers ... I couldn't check all browser and os combinations, but it seems to work pretty well :)

    I've also done a tad of styling to make my logo images use the opacity tag, so the logos are 40% opaque when you rollover - this seems to work in IE8, Firefox, Chrome, Opera and Safari, well at least it does for my template, obviously there might be some conflicts dependant on the css you already have setup.

    My CSS

     If you have trouble with the styling, you will find the css file at /modules/mod_vm_manufacturers_logos/css/vm_manufacturers_logos.css - edit away :)

    As you can see from the css file, the images are floated, so they fill the space as best they can dependant upon their width and the width of the area the module is published in and I've allocated enough margins for my needs, playing around with the css will alter these :)

     Here are the IE8 Experiments

    1) Thin Module Position

    IE Thin

    2) Wider Module Position

    IE8 Wide

    The gap on the right is a little bigger than the left, but I'm well versed enough in CSS to realise there's only heartache in trying to resolve this sort of problem :)

    Here are the Firefox Experiments

    1) Thin Module Position

    Firefox Thin

    2) Wider Position :)

    Wider Firefox position

     Here are the Chrome Experiments

    1) Thin Position ....

    Thin Chrome Layout

    2) Wide Module Position ...

    Chrome with a wide module position

    That right hand gap is even bigger here :( I'm open to suggestions from any CSS guru's :) - But to be honest, it's a pretty good attempt!

     Opera Test

    1) Thin Module Position

     Opera Test 1

    2) Opera Test 2 - The wider module :)

    Opera Test 2

    Again with the gap on the right ... starting to annoy me now ... no, not enough to do anything about it however :)

    Finally ...

    Safari Tests (obviously on Windoze rather than Mac OS)

    1) Thin Layout

    Safari Test 1

    2) Wider Position

    Safari 2

     If you intend to use my module to show the List of Manufacturers or Dropdown then be aware that it has been coded a little differently than the original, and therefore it renders differently :)

    In particular, I couldn't get the dropdown to take its labels from the Virtuemart Language files, so I had to set up a language file of my own for this ... edit the file en-GB.mod_vm_manufacturers_logos.ini that you find in the languages folder of your website (not the one in the modules folder) if you want your labels to be different - feel free to ciontact me if you need any help :)

    If you find my module useful, please let me know!

    Paul

    Published in Joomla!
    Written by  i-r-paulus
    Rate this item
    (1 Vote)
    Read 5784 times Last modified on Sunday, 03 June 2012 13:09

    Social Network