Posted by timinpublicradio on December 23, 2009 at 4:14pm
Hello,
I’m new to Drupal and I am curious if anyone can explain the best way to create a custom template for an “article” node so that an image with caption floats to the top left of a text area.
My goal is to make this an intuitive process for users, and not require them to do any sort of HTML editing.
Thanks in a advance for any suggestions!
Comments
Several approaches
There are several approaches you can take. It depands on the level of control the developer wants.
Add a CCK image field to the "article" node type. In the "article" tpl.php file use a call to the image field to place the contents as you see fit. Some additional CSS in style.css will ensure the "float to the top left".
Add a WYSIWYG editor to the site. WIth in the editor add image insertion.
In both cases you'll need to do some configuration but the end result will be "intuitive for users".
Depending on your technical skill level these two additions can be considered simple to advanced. Bottom line, Drupal is a development platform - there's very little "out of the box" but the power to "to anything" keeps us coming back.
I have the same question
I have the same question as timinpublicradio. However, being new to drupal myself, i was wondering how to theme the title of the image when using imagefield so that it appears like a caption under the picture instead of appearing when you hover over the image. I am not comfortable with code, and I would prefer to do this with CSS or as little php as possible. Thanks, any help is appreciated.
Narsil351
CCK w/ Images
I personally feel that 1 is the best option. It takes some dev work to get it done, but it make a lot of sense to just have a user upload an image in a CCK (content construction kit) field without worrying about formatting. The theming logic can control the placement of the image, and it will ensure that images are consistently handled across the website.
Plus, plus!
timinpublicradio, if you go with option one I'd suggest taking a look at the Image Cache module as well. It will allow you to have control of the image size as well as a handful of other super cool image related formatting options.
Narsil351, sadly in Drupal Land the sooner you embrace code the happier and productive you'll be. Drupal is currently a "development platform" and thus requires coding to make most things work. The power of this system is unbeatable but if you're looking for out of the box solutions you might consider other CMS systems.
Mike Wacker, good points! There's also the added benefit of being able to re-format the node content for various presentation needs. A summary listing on the front page perhaps as a view. This can include a thumbnail version of the uploaded image while a full node presentation as a page can include a larger version of the image. The possibles are really only limited by your creativity and some basic coding skills :)
One possible solution
I've been working for the last month or so on building a test site ( http://test.polestarstudios.com/ ) in Drupal in an effort to convince the media syndicate that owns the newspaper I work for to consider switching to Drupal as a CMS.
I'm very much a Drupal novice -- my background is mostly in print design, though I have managed to become fluent in XHTML and CSS within the last few years. I finally bought books on PHP and JavaScript a few months ago, but I've barely had time to look at them.
So I've been focused mostly on what I can do in Drupal without having to tackle any coding (or as little coding as possible).
One of the problems I wrestled with on my test site was how to include a photo with a caption with the story. It took me about a week to figure it out ... and that was nearly a month ago, so I no longer remember the entire process!
But looking at the fields I set up for the "article" content type, I can see that I created a "group" titled "photo"; inside the group is an "image" field, which has a type of "file"; a "photo credit" field, which has a type of "node reference" (so it can link to a particular photographer's node); and a "caption" field, which has a type of "text."
I then set up the fields (in the "display fields" tab) so that in the teaser, a thumbnail of the image appears, but in the full article, the photo appears with the photo credit and caption.
I also used CSS to float the group at the top right of the article.
Hope this helps!
Katrina
Site builder, writer, trainer, graphic designer
more detail please
Katrina B,
Your site looks great and is exactly the same kind of thing I'm trying to do. I've tried following your steps, but I'm not having much luck - is there any way you can elaborate on the steps you took creating the photo group?
Like you, I'm comfortable with HTML, CSS and Javascript, but I'm a novice with PHP.
I've seen this issue come up over and over again and I really haven't been able to find a simple tutorial for beginners like myself.
lullabot (store.lullabot.com)
lullabot (store.lullabot.com) has some great courses on video that walk you through Drupal 6 themes very well. They aren't free though. ;-)
If I can remember what I did!
Let me if I can figure out what I did to create the article node.
First, I'm using ImageCache to handle images. I created four presets; all of them control width only, so height is adjusted accordingly to be proportional:
Thumbnail: Scale - width - 100
Small: Scale - width - 250
Medium: Scale - width - 400
Large: Scale - width - 700
Then I created an "article" content type. In "Manage fields", these are my fields (in order):
Title - mode module form
Subtitle - field_subtitle - text
Taxonomy - Taxonomy module form
by - field_byline - node reference (links to node for the particular writer)
Photo - group_photo - standard group
- Image - field_image - file
- Photo credit - field_photo_credit - node reference (links to node for photographer)
- Caption - field_caption - text
Body - Node module form
File attachments - Upload module form
Menu settings - Menu module form
Revision information - Node module form
Comment settings - Comment module form
Path settings - Path module form
Fields that have "field_" in the "Name" column were created with "new field" option at bottom of "Manage fields" page; the Photo group was created with the "New group" option just below the "New field" option (at the bottom of the page).
Before creating the "Image" field, I defined the "Photo credit" and "Caption" fields first.
Then I created the "Image" field: I went to "New field" and typed "Image" for the label and "image" next to the "field_" beginning for the field name. For the type of data, I chose "file"; then, from the form element dropdown, I chose "File upload".
Once I had the Image, Photo credit, and Caption fields defined, I then created the Photo group and dragged those three fields into the group. (Be sure to click on "Save" at the bottom of the "Manage fields" page before configuring a field, or you'll lose the order that you created by dragging fields into place.)
I then used CSS to style the ".group-photo" to float right, with appropriate margins and no border; I styled ".field-field-photo-credit" and ".field-field-caption" to a width of 250px (to match the width of the photo).
Then I went to the "Display fields" tab (in the content management page) and created these settings:
Photo - hidden - simple - field set
Image - hidden - thumbnail linked to node - small image linked to image
Photo credit - hidden - hidden - title (link)
Caption - hidden - hidden - default
Let me know if this helps any or if you run into any additional difficulties.
Sincerely,
Katrina
Katrina
Site builder, writer, trainer, graphic designer