Adding image corners with the Drupal Module Photoframe

Adding image corners with the Drupal Module Photoframe

Below is a question submitted to our contact form about where to put the styles added with the Drupal module we put together called Photoframe:

Hello, I have just installed the Photoframe module on my Drupal site. I have completed the installation successfully and everything seems to be working. My question is about the adding the Class to content. How do I do this? There are no drop down boxes to select the class when I am creating new content and don't see any other spot to do it. I am kinda new to this but understand the basics to administrating a drupal site (installing modules, creating content, just the basics). Please help me figure out how to do this as I think your module will be a great one once I get it working.

If you happen to be in Firefox, you can look at the HTML for the above quote and see the following:

<div class="photoframe-quote quote-quote">
Hello, I have just installed the Photoframe module on my Drupal site...
</div>

And that's it, really. Just add the class to an element, in this case a div, and Photoframe will wrap the frame around the content once the page is loaded.

Discussion on this post:

Ok, I think I understand

Ok, I think I understand that part. First off can I do this using IE7? Secondly, how would I do this for menu boxes or content that does not allow HTML code in it?

The browser you use

The browser you use shouldn't matter. Photoframe uses jQuery to do it's post-loading wrapping, so javascript needs to be enabled and the browser needs to support jQuery, but that should be it.

To wrap a Photoframe around other elements in Drupal besides content, you will need to learn how to edit theme files and / or functions. You can download a sample chapter from the Pro Drupal Development book that covers how the theme system operates. You can also checkout the Theme Developer's Guide at Drupal.org.

Most modules use theming functions to create the HTML for their output, and these functions can be overridden by either files following a specific naming convention, or by theme function calls in a custom module or your template.php file (found in your theme directory). You're kind of going down a rabbit hole when you get into theming, but once you come out the other side, you're able to leverage a lot of the customization functionality that's built into Drupal.

There are actually a few

There are actually a few different rounded corners modules available for Drupal. They all provide some nice functionality, but with one exception they round corners using CSS exclusively, which is limited. Photoframes uses image borders, which allows you to use very customized frames to content.

I have thought that it would be nice to possibly join the different framing modules into a suite so that users would have many different options for content out of the box. Plus, that would allow frame designers / developers to consolidate our work where they overlap. But, the free time I have is limited so this might be a long-term project.

squished blocks...

I am really happy with the photoframe module - think it's the most user friendly of the rounded corners modules out there. My problem is that I am having problems inserting a spacer into blocks so that all the blocks are uniform width, instead of being limited to the length of the longest word in the block. Not sure if I'm explaining myself correctly, but if anyone has figured this out they probably know what I'm talking about. Any advice on where to insert the spacer would be appreciated.

Thanks.

Hi Ian,

Hi Ian,

The latest Photoframe Readme.txt should cover this, here's a quote:

My content is squished, what do I do?!
-------------------------
Be default, Photoframe assumes that you want to wrap around
fixed-width content. This means that it will wrap nicely around an
image, but will squish your text into an ugly one-word-per-line column.
You can fix this one of two ways:

1) Add something of a fixed width to the content. This can be a
with a fixed width, or a spacer image.
2) Add one of the following styles to the styles.css file in your
template directory:

.photoframe-table { width:100%; }

This will cause all frames to be wide and expanding.

.photoframe-quote-table { width:100%}

Replace the 'photoframe-quote' with the style you want to cause to expand.
This will limit just that style to expand, while the others are fixed.

If you need to make one of a certain style wide, and another of the same
style fixed, then you need to do something like:

<div class="surrounding-div"><div class="photoframe-quote">Content</div></div>

And then add the following in your style.css file:

.surrounding-div .photoframe-quote-table { width:100%; }


Implied By Design Logo