Here is an Ubercart/Imagecache preset scaled to 150x150 optimized skin based on IE7
| Project: | Views carousel |
| Version: | 6.x-2.x-dev |
| Component: | Code |
| Category: | task |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
I appreciate this module, it does exactly what I've been looking for over the past few days for an Ubercart site that I'm doing.
This is really going to help me complete my project.
One thing I would like to point out is that the included skins are a pain in the ass to get to a usable point where someone can just quickly create a view, using imagecache presets of a usable size and move on to the next step.
I've spent about 6 hours messing with the CSS to get this.
Here is what you get with this skin:
1) Optimized for an Ubercart installation where you want to show a views carousel view below the product block, to show other views based upon taxonomy term.
In case you are interested on how to embed a view below the product node:
Assumptions: your content type is called product, and your view is called product_node_category_view
duplicate node.tpl.php and call the new one node-product.tpl.php
Add the following code to the bottom of node-product.tpl.php
<?php
$wanted_vocab = 1; // Change to the vocabulary id of the one you are using
foreach ( (array)$node->taxonomy as $term ) {
if ( $term->vid == $wanted_vocab ) {
//load the view by name
$view = views_get_view('product_node_category_view');
//output the view
print $view->execute_display('default', array($term->name));
}
}
?>1a) By optimized I mean that the .jcarousel items are 150px wide, by 239px tall. Enough for a 150px X 150px image, and the product title, price, and add to cart button below the image.
2) Optimized for showing 3 images at a time.
3) Optimized for using an imagecache preset of 150px X 150px.
Please see the attached screenshot. It's not perfect because I'm still using the garland theme, not the final theme for my site, so there are some minor things, such as the location of the "add to cart" button is too low, but that's due to defaults in garland, nothing to do with viewscarousel or this skin.
I've packaged these files up in a skins folder called ie7deux since I basically used the IE7 skin and just changed the CSS.
I hope this saves somebody the 6 to 8 hours of work that I had to go through to get something usable.
To use this, you'll need to either place this in your template directory, and choose custom skin and point to the location where you stored the files, or you'll need to edit viewscarousel_style_plugin.inc and add it to the list of available skins. If you edit your viewscarousel_style_plugin.inc, you'll need to place this in the /sites/all/modules/jcarousel/jcarousel/skins/ directory.
Though, I'm guessing that placing it in your template directory would be a best practice, since the 2nd option would be modifying another module.
| Attachment | Size |
|---|---|
| views_carousel_ie7deux.png | 159.62 KB |
| ie7deux.zip | 23.47 KB |
#1
One other thing I forgot to mention is that the CSS file is commented so you know where to make changes in case you want to use something other than 150px X 150px or change the height of the items, or have a wider container.