Jump to:
| Project: | jQuery Eye Candy |
| Version: | 6.x-1.x-dev |
| Component: | jQuery plugin |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Issue Summary
Hi Joann, thanks so much for jQuery Eye Candy, it's a great module that is working well for me. I am utilizing the CurvyCorners plugin and very pleased with the results.
I have designated the class "curvy" in admin/settings/jq_eyecandy which allows me to knock the corners off DIVs and background images by simply assigning the class in the page.tpl.php template.
My problem is "foreground" images. I have a view ("header_image") outputting a series of images I would like to apply curvy corners to. I know the solution is as simple as assigning the class in the proper custom template; but for the life of me I can't hit on the right combo.
It seemed as if creating views-view-field--header-image.tpl.php and wrapping
<?php
print $output;
?>Any input greatly appreciated. Thanks!
-NP
Comments
#1
Just checking in to see if anyone else has found a solution to this. Thanks! -NP
#2
I'm sorry I don't have a solution for you, but could you by chance let me know how you applied the curvy class in page.tpl.php?
#3
Hello Vcize,
a) I installed and enabled JQuery EyeCandy and the CurvyCorners Plugin per the README instructions.
b) In admin/settings/jq_eyecandy under the CurvyCorners Plugin section, I checked "Enable the jQuery Corners Plugin" and added:
$(document).ready(function(){
$('.curvy').corner({
autoPad: true,
})
})
'.curvy' is the class name I assigned; you can modify this to whatever suits your fancy, including targeting IDs (change '.' to '#'.)
c) In my page templates (any of the .tpl.php's) I add the class curvy to the element I want to apply the script to.
<div id="navbar" class="curvy">More info is available at http://blue-anvil.com/archives/anti-aliased-rounded-corners-with-jquery.
Hope this helps.
Blessings!
-NP
#4
Chalk me up as another interested in having Curvy support img tags, or hopefully any arbitrary element by class or id
#5
Hey, I'm just checking in one last time to see if anyone can help me out. I know full well this is an elemental issue of assigning the class in the right template, but I can't seem to make it work. If anyone is able to point me in the right direction, I'd be quite grateful. Thanks! -NP
#6
Have you tried using a div with your image as a background-image? That should work.
#7
Yes, using a background image on a div works and has worked. However, marking a div, declaring a class="rounded" style="background:url(http://www.drupalhost.com/mysite/sites/default/files/file%20I%20just%20u...);" isn't going to fly with content editors. Most of them don't even know how to read HTML source. Just keeping track of paths, file types, and URL character conversions (like spaces to %20), for files they just uploaded is tricky enough. Being able to simply declare that all
tags on a div are rounded would certainly help a lot. I would only use the jQuery rounding effects for constantly updated content, making this automatic handling all the more important. Static elements, like rounded div corners, are so simple to theme with CSS there's simply no reason to use jQuery to do it, other than maybe a quick mock up for a demo. The more things you dynamically round, the slower the site runs, and in the end, netbooks aren't going to play well with lots of jQuery going on.
#8
I think it really depends on your application. If you want curvy images without having content editors to know html, you could use jquery to replace img tags with div background-image tags.
But in the case of netbooks and cellphones, I would think it would be better to use jquery to round corners instead of having them load a ton of css images. If you're only rounding a few things, then sure, css might be the way to go. Until CSS3 gets adopted by everybody, it's really up to you how you want to do round corners.
#9
I agree rounding corners with images is not the way to go, but http://drupal.org/project/imagecache_actions may be.