content-type image in teaser
For each content-type I'd like to automatically display one 64x64 icon in the teaser of each node, floated or aligned to the right of the 'title', 'submitted by' and 'taxonomy-list' lines. Eg.
Title of the node i m a g e
Submitted by admin on 19/11/08 i m a g e
Tagged: interesting tags go here but not too many i m a g eThe reason I want to do this are two-fold:
1) There is no way I know of in drupal to stop users from putting large images in the first paragraph of nodes, which means the images appear in teasers. If they do this, at best the teaser-list looks non-uniform, at worst it just looks silly and ugly. So I've used a bit of script to stop images (and most other html) from being displayed in the teaser. However, without any graphics, the teaser-list looks a bit boring.
2) I want an indication of which 'section' a node has been posted into. My 'sections' will primarily be based on content-type. Eg. news, sport, office/administration, forum, blog, student contribution, review, etc.
Any ideas?
Thanks.
sure, this is easy and many are doing it already!!
okay, so based on the way things are moving in d6, many folks are in two camps: either image module or imagefields cck - i'm using imagefield and so am going to explain how i'm doing exactly this on my site
what my users see: a page for stories in category 'sports' that shows a first image for each story, title and a teaser with links to node..all images are same size, very simple approach using:
cck
imagefield
filefield (just enable for imagefield, don't worry about it right now)
imagecache (critical for what you're doing)
lightbox2 - for fanciness!
...and here's how to do it:
enable all of those modules
go to imagecache and create a preset for what you want to see when an image appears on a summary page (smaller, like 200x200 or whatever) and the size you want on the full story (maybe 400x400, whatever you like) - you'll give them names there like 'smaller' and 'fullstorypic' or whatever)
now, go to content type story and hit 'manage fields' and down below (all d6 instructions here), add a field and in dropdown select image as the type (it knows it's imagefield cck, no mystery there)
give it a fieldname like field_smallpic and fill out other minor details on next page (like instructions for users or whatever) - and set this imagefield to appear only ONCE (as opposed to unlimited or whatever)
now if you want users to add more pics to a story, add another imagefield if you'd like and this time call it field_otherpics and set to 'unlimited'
now go to 'display fields' and you'll see an option to set field_smallpic to appear in either teaser or full story or both, and for teaser you can set it to link to node if clicked (and to a cool lightbox in full story)
if you've allowed users to add more pics with that optional 'field_otherpics' then set that one to hidden for teaser and maybe lightbox for full story
now view the page for your stories and you should see just that first image in there for every story and it will the same size for every single story, creating a nice uniform link and presentation...you can then use css to float left, align or whatever you want to do...
what's nice about this is that if you have another content type called 'blog' or whatever, you can reuse these same fields in those content types repeating these same 'manage and display fields' options - they'll automagically use the imagecache presets that you've defined earlier...or you can create all sorts of imagecache presets for other content types...
does this help? i (and many others) find that image module is tedious because it only allows one image at a time - what i want my story writers to is easily create a node, focus on the writing and simply upload a 'main picture' and if there are other pictures, simply click 'add another' over and over until they're done - and have them all perfectly sized for display (and then use lightbox2 so readers can click a cool popup to view them all)
btw, if you want *strict* and easy control over what appears in teasers, then also look at content templates module - it will let you 'affect teaser output' by only putting in title, main picture, date, tags, etc...and you can style it within the template, instead of hacking up node.tpl files...
........................................................................
i love to waste time: http://twitter.com/passingnotes
Thanks for your detailed
Thanks for your detailed walk through.
Can I just clarify something before I try this -
From what you describe, am I correct in saying that the user uploads an image to the cck imagefield when creating the content? If so, that isn't exactly what I needed...
For each content-type, can I specify a default image to use, and hide the imagefield from the user?
For instance, when writing a 'news' content-type, the teaser should have a newspaper icon in it, and the user should have no control over this - they shouldn't even be aware of how it got there. It just appears automatically because of the content-type they chose.
Does that make sense?
Is it possible?
Taxonomy image
zilla's answer (above) is excellent for the general case, but it occurs that maybe what you're really trying to do is display a standard image that's associated with the section. If that's the case, then you should install http://drupal.org/project/taxonomy_image.
that is exactly what i was going to suggest
i'm using taxonomy image for this right now on a test site - people ask questions and can't really include images, instead there's a huge list of icons and in the list next to each qeustion is an icon for each question type (an image of whatever is for the subject, like a little television for gadgets, etc)
it works very well, and nancydru has done tons of work on it improving for d6...
........................................................................
i love to waste time: http://twitter.com/passingnotes
I tried taxonomy_image, and
I tried taxonomy_image, and it kind-of gets half-way there:
· if I give each vocab a parent term
· associate each parent with an image, but leave the child terms without an image.
· use the 'recursive tree' feature so that whatever the child, the parent image displays.
But the issues with this are:
· Some content-types have access to multiple, shared vocabularies, and the problem is I can't force just one image to appear if the node is tagged with two or more parent terms. This is why I wanted 'content-type' to denote the 'section', because nodes can only ever be of ONE content-type, whereas they can be in multiple vocabularies. It makes much more sense to use content-type for this purpose.
· Secondly, I need to 'fudge' my taxonomy. I want to have a vocab 'News Section' with the un-nested terms 'announcement', 'event', and 'administration' to choose from. But using taxonomy_image forces me to put a parent term 'News' in that vocab and make the other terms children. The problem there is that I don't want nodes tagged simply with 'News' because it's meaningless; I really need to have nodes only tagged with what TYPE of news it is.
I find it really weird that nodes can't be 'categorised' by content-type in this way. Isn't that a painfully obvious thing that web designers would want to do? (obviously not!) Well, I'm not going to fight it. I'll just try to change my plan and workaround it. Very disappointing though.
Thanks for your help!
EDIT: The http://drupal.org/project/headerimage module comes closest to what I wanted to do. You can specify an image for each 'node type' (content-type) with it. However, the problem with it is that it uses a block to place the image; as far as I know, I can't place a block in my teaser.
One way to do it is make
One way to do it is make separate node.tpl.php template files (i.e. node-sports.tpl.php, node-news.tpl.php, etc.) for each content type and theme it anyway you like. Another option is the http://drupal.org/project/contemplate module.
===
"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Lao Tzu
"God helps those who help themselves." - Ben Franklin
"Search is your best friend." - Worldfallz
I've tried Contemplate, but
I've tried Contemplate, but takes up too much memory (I have 32mb) or SQL resources, or something - I just got recursion errors all the time.
The other option sounds interesting. I will only have about six main content-types acting as 'sections', so having six separate templates is manageable. So with this method, I just 'hard-code' each image into the template? Yes, I can see how this is going to work... I think this is the way to go! I'll try this out today and post back if I get stuck.
Thanks for everyone's help.
EDIT:
Yep, this solution seems to work fine for my needs.
<? if($teaser){echo "<img class=[nodeType-image] src='/sites/all/themes/[themeName]/icons/[image].png' />";
} ?>
It's a pity that it's hard-coded into the theme, but it's elegant enough for me.
Whilst I'm at it, now I may as well theme the colours for each content-type a bit too!
Thanks.
Now that I think about it a
Now that I think about it a little more you don't have to hard code it in to that level-- you could add a single class ($node->type) to the list of classes in the one node.tpl.php file then use use CSS to set whatever images/properties you want.
Just for the record another option, though more involved, would be to use the node auto term (nat) module with taxonomy_image and views. I only mention it for completeness-- i would probably add the class and do it in css.
===
"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Lao Tzu
"God helps those who help themselves." - Ben Franklin
"Search is your best friend." - Worldfallz
> you could add a single
> you could add a single class ($node->type) to the list of classes in the
> one node.tpl.php file then use use CSS to set whatever images/properties you want.
Sorry, I don't know php. I don't understand what you mean there. Sounds interesting though.
But if I set the image in style.css, doesn't that mean it would have to be a background image rather than inline?
Don't worry if you don't have time to explain; having six node templates isn't going to kill me.
Cheers.
which theme are you using?
which theme are you using? Some actually already add this class. If not, post the node.tpl.php and template.php.
And yes, it would technically be a background image, but you should be able to get it to look the way you want regardless.
It's up to you though if you want to bother-- if you're ok with node.tpl.php files that's fine. Ultimately, it's whatever works!
===
"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Lao Tzu
"God helps those who help themselves." - Ben Franklin
"Search is your best friend." - Worldfallz
> It's up to you though if
> It's up to you though if you want to bother
I'm interested in anything that might be useful to me on future projects.
My theme started off as Barron and currently looks like this:
node.tpl.php:
<div id="node-<?php print $node->nid; ?>" class="node<?php if ($sticky) { print ' sticky'; } ?><?php if (!$status) { print ' node-unpublished'; } ?>">
<?php if ( $page == 0 || $picture || $submitted || $taxonomy ) : ?>
<div class="infoblock">
<?php print $picture ?>
<?php if ($page == 0) : ?>
<h2 class="node-title">
<a href="<?php print $node_url; ?>"><?php print $title; ?></a>
</h2>
<?php endif; ?>
<?php if ($submitted): ?>
<span class="submitted">
<?php print $submitted; ?>
</span>
<?php endif; ?>
<?php if ($taxonomy): ?>
<div class="taxonomy">
<?php print $terms; ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<?
if($teaser){ // Strip html from teaser lists see www.php.net/strip_tags
$content=strip_tags($content, '<p><h3><a>');
}
?>
<div class="content">
<?php print $content; ?>
</div>
<?php if ($links) : ?>
<div class="nodeLinks">
<?php print $links; ?>
</div>
<?php endif; ?>
</div>
template.php:
<?php
/**
* Return a themed breadcrumb trail.
*
* @param $breadcrumb
* An array containing the breadcrumb links.
* @return a string containing the breadcrumb output.
*/
function phptemplate_breadcrumb($breadcrumb) {
if (!empty($breadcrumb)) {
return '<div class="breadcrumb">'. implode(' > ', $breadcrumb) .'</div>';
}
}
/**
* Allow themable wrapping of all comments.
*/
function phptemplate_comment_wrapper($content, $type = null) {
static $node_type;
if (isset($type)) $node_type = $type;
if (!$content || $node_type == 'forum') {
return '<div id="comments">'. $content . '</div>';
}
else {
return '<div id="comments"><h2 class="comments">'. t('Comments') .'</h2>'. $content .'</div>';
}
}
/**
* Fix TinyMCE
* removes grey sidebars in text area
*/
function phptemplate_tinymce_theme($init, $textarea_name, $theme_name) {
if (isset($init)) {
switch ($theme_name) {
case 'advanced':
$init['width'] = '100%';
break;
}
}
return $init;
}
/******************** EDITS ***************************/
/**
* disable compose tips display - not required with wysiwyg editor
*/
function phptemplate_filter_tips($tips, $long = FALSE, $extra = '') {
return '';
}
function phptemplate_filter_tips_more_info () {
return '';
}
/**
* menutrials module
*/
function _phptemplate_variables($hook, $vars = array()) {
switch ($hook) { // what function is active?
case 'page': // page is where menu comes into play
// set the primary links
$vars['primary_links'] = menutrails_primary_links(1);
// you may want to also override secondary_links
$vars['secondary_links'] = menutrails_primary_links(2);
break;
}
}
Cheers.
ok, barron doesn't do
ok, barron doesn't do anything with content types. so you could change the first line of your node.tpl.php like this:
<div id="node-<?php print $node->nid; ?>" class="node<?php if ($sticky) { print ' sticky'; } ?><?php if (!$status) { print ' node-unpublished '; } ?><?php print $node->type ?>">That will add a class for the node type. Then you can add the image with:
div.{node-type} {background: url('/sites/default/files/image.png') no-repeat right;
}
As well as add any other css properties you like for that div.
===
"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Lao Tzu
"God helps those who help themselves." - Ben Franklin
"Search is your best friend." - Worldfallz
Thank you very much for
Thank you very much for that. I quite like this solution. Just one question...
If the content-type name had two words (eg. 'student contribution') would this still work?
The class would be 'student contribution' so the css would be: div.student contribution { }
Would that space matter?
Cheers.
it should be whatever is in
it should be whatever is in the 'type' column on the admin/content/types page-- i believe it uses '_' for spaces. And yes spaces matter-- afaik, all system names, function names, code, etc cannot have spaces.
===
"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Lao Tzu
"God helps those who help themselves." - Ben Franklin
"Search is your best friend." - Worldfallz
Ah, gotcha... it uses the
Ah, gotcha... it uses the 'machine name'.
Thanks for this solution; exactly what I needed without even installing a module
welcome ;-) === "Give a man
welcome ;-)
===
"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Lao Tzu
"God helps those who help themselves." - Ben Franklin
"Search is your best friend." - Worldfallz