David Johnson was wondering how we're handling images without getting sucked into the morass of img_assist and the various rich text editors. Our approach, which has some strengths (simple and idiot-proof) and some weaknesses (these images are not nodes), is as follows:
Both news stories and blogs are CCK content types. The key element is Emfield, more formaly known as the Embedded Media Field module. We use it with its close relatives Embedded Media Import, Embedded Media Thumbnail, Embedded Image Field and Embedded Video Field.
Media attributes are uploaded as elements of the node, like a file attachment. We've configured it so you can upload as many images as you want. When you upload an image, a thumbnail is automatically generated and embedded in the node edit form. In the D6 version, you can drag/drop to sort the images.
Note that we are repurposing the standard alt and title fields for caption and credits, renaming them with hook_form_alter.
The next step requires some coding. The node template is highly customized, and explicitly manipulates each element for display. Using jquery, the images are displayed in an embedded slide show with next/previous arrows above the image.
Lightbox2 provides a popup that lets users look at a large-format version.
In all cases, the displayed images actually are dynamically generated by the Imagecache module.
The biggest "win" here is that it's idiotproof. Nobody has to crop or resize anything. Nobody can break the page by uploading an image that's too big. The images are always displayed in the same location, right above the in-story ad position. Multiple images are easily handled. If there's video, it's displayed as a tab added to the image display position.
We used this method for editorial content on both CJOnline and Jacksonville.com, and it's part of our new Drupal 6-based standard site configuration that we're field-testing at one of our smaller papers right now. We're extending it to blogs as well. There we actually use a complete rewrite of the blogging system to support many-to-many relationships between users and blogs (multiple blogs per user, multiple users per blog), but that's a topic for a different post.
Comments
thanks steve!
i'm gonna take it for a spin on my sandbox.
on a multisite setup, i had tinymce, img_assist and wysiwyg all working nicely together, but img_assist went kablooey with the necessary upgrade to wysisyg api when my production version got revoked. no matter how many times i've built that devilish trinity, it has always been a painful, lengthy and tricky process. and this recent iteration is completely frustrating.
i've had better luck with switching gears to IMCE, but i do have to keep img_assist running since there's a ton of inline tags in the nodes.
it has always kind of mystified me that this type of functionality with images and story layout are not core functions of drupal. afterall, the web is the graphical internet and the point of content management systems is to facilitate the turnkey production of content as well as keep it organized. out of the box, drupal's core should have a default or one-click-to-fire-up profile for content production at least at the level of wordpress for the sake of user experience.
-daj
if everyone is thinking alike, chances are no one is thinking.
www.davidandrewjohnson.com
if everyone is thinking alike, chances are no one is thinking.
www.davidandrewjohnson.com
*_*
WYSIWYG has always been a problem when ever try to work in tandem. Also some of the WYSIWYGs can not handle some of the UTF-8 characters.
:)
Beautifulmind
BeautifulMind
could you explain more
Hi,
Could you point me in the right direction or explain a bit more about how to have multiple images in the same page location (with the arrows for navigation as you have above) using imagecache + image cck?
Thanks,
Kosta
Yeah ...
Yeah, a little bit. I didn't write the code, but there's quite a bit of it. It's all moved into a module (to keep the templates as clean as they can be), and it's currently around 14K of code, including some fancy stuff to reformat the CCK video field to fit, use Jquery to tabify the photos and video, etc. The result is offered up as a block, which the node-editorial.tpl.php can invoke. I don't know that it would make sense to post on d.o as a generally available module, as it expects a specific set of CCK fields, but perhaps we can post it as an example.
That would be great
Salutations:
Please excuse me for butting in, but if you are willing to share source example on that it would be greatly helpful.
Am embarking on quite an adventure over the next month and a half and was just starting to work up some notes on how to deal with this problem.
Cheers and best wishes.
J Dexter.
25 years no more than 20 feet from a wall jack ...
I'll see...
I'll see if I can get Geoff to chime in on what he did, and maybe post some code. All the grunty work is in a module; all the node-TYPE.tpl.php file has to do is invoke
<?phpif ($output = theme_media_block($node)) {print $output;}
?>
This is a one-off because we were aiming for a very specific design target, but you should take a look in the contrib module collection at some of the slideshow modules, such as http://drupal.org/project/slideshow, which I think works with imagefields.
Basic idea behind the media block...
The basic idea behind the media block module was to create a system that would let us process and prepare multimedia elements outside of the template and not need to either create a new CCK widget or build a node-access module. Using this concept, there was also the added benefit of being able to add some features and options to our media block that we wouldn't have been to take advantage of had we left this code in the template. These features include allowing admins to give the photo/video custom labels as well as be able to control the position of photo and video control buttons as well.
So, as a small example, codewise, of what we're doing let's start by looking at the code that Steve posted above. That is our function call where we are able to pass the node object to the module for processing. You could also change the parameters that you pass to be more specific to certain CCK fields within your node. For example
<?php
//example possible function declaration
//receive the photo and video fields from a node
function theme_media_block($photos, $video) {}
//example of a possible function call from the template
if ($output = theme_media_block($node->field_photos, $node->field_video)) {print $output;}
?>
The basic idea of what you need to do within the main processing function itself is take the values from the CCK fields and wrap them in HTML elements and also apply any JS necessary for tabbing, slideshows, etc.
Here is an example of possible usage within the main function:
<?phpfunction theme_media_block($node) {
$output = '';
$video_count=count($node->field_video);
$photo_count=count($node->field_photos);
if ($video_count == 1 && $node->field_video[0]['value'] == null)
$video_count=0;
if ($photo_count == 1 && $node->field_photos[0]['filename'] == null)
$photo_count=0;
if ($video_count > 0 || $photo_count > 0){
drupal_add_js(drupal_get_path('module', 'media_block') . '/js/jtabber.js', 'module', 'header');
drupal_add_js(drupal_get_path('module', 'media_block') . '/js/editorial_photo_tabber.js', 'module', 'header');
$js = "<script type=\"text/javascript\">
$(document).ready(function(){
photovideo_load();
photovideo_toggle();
$.jtabber({
mainLinkTag: \".photo-buttons a\",
activeLinkClass: \"selected\",
hiddenContentClass: \"photo-box\",
showDefaultTab: 1,
showErrors: false,
effect: 'fade',
effectSpeed: 'medium'
});
});
</script>
";
$output .= $js;
if ($video_count > 0){
$video = media_block_process_video($node->field_video); //contruct the video container and resize the object to make sure it fits
}
if ($photo_count > 0 && $node->field_photos[0]['filename']){
$photos = media_block_process_photos($node->field_photos); //contruct the photo slideshow and container
}
$output .= media_block_build_content($photos, $video); //construct the rest of the raw html elements to complete the block
}
return $output;
}
?>
so, pretty much that's the concept in a nutshell.
Which module is called?
Hello guys, I know I'm kinda johnny-come-lately here but this seems to be exactly what I am looking for. Which module are you talking about calling? the LightBox2 module?
Then, do you call that module with your custom code from node-TYPE.tpl.php?
Thanks,
Jacob
Absorbing - thx
Salutations:
Nothing beats a source to help with an adventure.
Thank you very much - hoping I can kick back some notes/dox on our adventure when we're done. Currently in theme hell (IE6-8 required) on an unmolested 6.x install.
Working on a CCK/CCI slave build. Exceedingly clever drupal vet is helping here as he can and we have the classifieds online. Starting to work on directories, community and the actually daily content itself now and hoping to really improve the photo/slideshow opportunities this round.
Cheers and best wishes.
Jon
25 years no more than 20 feet from a wall jack ...
Thanks for the responses!
Thanks for the responses!
I would be
..very happy to have a template for articles like yelvington showed.
I already tried many images modules and the closesed one was image assist, which does somethings like taxonomy for image, makes nodes an allows for reuse... So quite nice but I had some problems.
I'm not a coder so I try to bypass coding just using combination of modules.... I thought there should be something easy to make nice article with media like images as images on internet websites is a standard...
Obviously I try not to use TinyMCE to make template idiot(/mistake)proof. Sa that it should always look standard way, stable...
Tutorial for this?
Hello, does anyone know if there is a tutorial out there explaining how to do this? The result looks great but I haven't figured out how to do it yet!
Thank you,
Jacob
it's also possible to rename alt and title labels on the theme
Using theme_filefield_widget_item as pointed out here you can also rename imagefield form labels, do you mind sharing with us what hook form alter you used? Thanks!
--
Nicolas