Paid affiliate advertisement
$50 USD - Customize output of Multiple images in the imagefield of a view
Main modules involved: CCK, Views, imagefield
Here's an issue I created that explains what I want:
http://drupal.org/node/599926
For someone familiar with Drupal and the above modules, this should be a snap I'm sure.
In essence, I have a view that outputs one of my custom content types (a "Project" page for an architecture firm). Each project page has some basic text fields...and most importantly, several images that have been uploaded to them via the imagefield cck type.
I can get the view to display all the images and fields...but I want the images (or image paths rather) to be outputed in a particular way so that I can utilize a javascript that's been provided to me by the client's designer. I want all of this so I can achieve the gallery with thumbnail functionality as seen here: http://bit.ly/15yqI5
To get this working, I have to have the images that are associated with each project render like this:
<div class="img-holder">
<span class="illustration" style="z-index: 2;"> <img alt="image" src="images/img16.jpg"/> </span>
<span class="illustration"> <img alt="image" src="images/img16-2.jpg"/> </span>
<span class="illustration"> <img alt="image" src="images/img16-3.jpg"/> </span>
<span class="illustration"> <img alt="image" src="images/img16-4.jpg"/> </span>
<span class="illustration"> <img alt="image" src="images/img16-5.jpg"/> </span>
</div>
Instead, views is outputting them like this:
<div class="views-field-field-images-fid">
<div class="field-content">
<div class="field-item"> <img class="imagecache imagecache-project_image imagecache-default imagecache-project_image_default" width="580" height="508" title="" alt="" src="XXX/files/imagecache/project_image/img16_1.jpg"/> </div>
<div class="field-item"> <img class="imagecache imagecache-project_image imagecache-default imagecache-project_image_default" width="580" height="508" title="" alt="" src="XXX/files/imagecache/project_image/img16-2.jpg"/> </div>
<div class="field-item"> <img class="imagecache imagecache-project_image imagecache-default imagecache-project_image_default" width="580" height="508" title="" alt="" src="XXX/files/imagecache/project_image/img16-3.jpg"/> </div>
<div class="field-item"> <img class="imagecache imagecache-project_image imagecache-default imagecache-project_image_default" width="580" height="508" title="" alt="" src="XXX/files/imagecache/project_image/img16-4.jpg"/> </div>
<div class="field-item"> <img class="imagecache imagecache-project_image imagecache-default imagecache-project_image_default" width="580" height="508" title="" alt="" src="XXX/files/imagecache/project_image/img16-5.jpg"/> </div>
</div>
</div>
I'm just not experienced enough with views to know how to rewrite the output for this field (or fieldS because I need multiple image paths outputted, not just one).
Anyways, if someone can provide me with a quick and easy solution, I can paypal you $50 USD immediately.
Cheers.
PS, here's a gallery of some screenshots that will show you some additional settings that might help:
http://bit.ly/784EL
I will write you how to do
I will write you how to do it, but I don't have paypal, even if i have it I couldn't get the payment because I'm from Bosnia.
First you need to configure view like this:
1. field that gives you image path, like this : 1st step - http://pokit.etf.ba/upload/?pokitc64107e33aa9fee83d57501f9a672344.png , 2nd step - http://pokit.etf.ba/upload/?pokit3883cd645fd2fd862058839841a60f97.png
2. than, you make the global field like this : 1st step - http://pokit.etf.ba/upload/?pokitfe5e902f7f31e84ff8ad88c13b653f2a.png , 2nd step - http://pokit.etf.ba/upload/?pokit0f178c4bac39101d7d38a61e4c420b26.png place the token inside the field, (you will need TOKEN module for this)
3. select the style to unformatted : http://pokit.etf.ba/upload/?pokit78106a0fa774284d86ec3585a5112ca5.png
4. than go to theme settings and do this: 1st step - choose the display output and see the info it should look like this:
<?php
// $Id: views-view.tpl.php,v 1.13 2009/06/02 19:30:44 merlinofchaos Exp $
/**
* @file views-view.tpl.php
* Main view template
*
* Variables available:
* - $css_name: A css-safe version of the view name.
* - $header: The view header
* - $footer: The view footer
* - $rows: The results of the view query, if any
* - $empty: The empty text to display if the view is empty
* - $pager: The pager next/prev links to display, if any
* - $exposed: Exposed widget form/info to display
* - $feed_icon: Feed icon to display, if any
* - $more: A link to view more, if any
* - $admin_links: A rendered list of administrative links
* - $admin_links_raw: A list of administrative links suitable for theme('links')
*
* @ingroup views_templates
*/
?>
<div class="view view-<?php print $css_name; ?> view-id-<?php print $name; ?> view-display-id-<?php print $display_id; ?> view-dom-id-<?php print $dom_id; ?>">
<?php if ($admin_links): ?>
<div class="views-admin-links views-hide">
<?php print $admin_links; ?>
</div>
<?php endif; ?>
<?php if ($header): ?>
<div class="view-header">
<?php print $header; ?>
</div>
<?php endif; ?>
<?php if ($exposed): ?>
<div class="view-filters">
<?php print $exposed; ?>
</div>
<?php endif; ?>
<?php if ($attachment_before): ?>
<div class="attachment attachment-before">
<?php print $attachment_before; ?>
</div>
<?php endif; ?>
<?php if ($rows): ?>
<div class="img-holder">
<?php print $rows; ?>
</div>
<?php elseif ($empty): ?>
<div class="view-empty">
<?php print $empty; ?>
</div>
<?php endif; ?>
<?php if ($pager): ?>
<?php print $pager; ?>
<?php endif; ?>
<?php if ($attachment_after): ?>
<div class="attachment attachment-after">
<?php print $attachment_after; ?>
</div>
<?php endif; ?>
<?php if ($more): ?>
<?php print $more; ?>
<?php endif; ?>
<?php if ($footer): ?>
<div class="view-footer">
<?php print $footer; ?>
</div>
<?php endif; ?>
<?php if ($feed_icon): ?>
<div class="feed-icon">
<?php print $feed_icon; ?>
</div>
<?php endif; ?>
</div> <?php /* class view */ ?>
paste this code as the info that you've seen in theme information.tpl.php file and save it to your themes directory, to the theme you're currently have active.
also you'll need the unformatted tpl override like the above:
<?php// $Id: views-view-unformatted.tpl.php,v 1.6 2008/10/01 20:52:11 merlinofchaos Exp $
/**
* @file views-view-unformatted.tpl.php
* Default simple view template to display a list of rows.
*
* @ingroup views_templates
*/
?>
<?php if (!empty($title)): ?>
<h3><?php print $title; ?></h3>
<?php endif; ?>
<?php foreach ($rows as $id => $row): ?>
<?php print $row; ?>
<?php endforeach; ?>
paste this code as the info that you've seen in theme information.tpl.php file and save it to your themes directory, to the theme you're currently have active.
4. clear cache, and test it.
If this is the solution that you're looking for, you can reward me with something that you can buy for that 50 $, e.g. domain, hosting.. whatever, its your choice. cheers!
thank you...I'll try it now
Hey,
Thanks a million. I will try it right now and let you know how it goes in like 10 minutes. I'll be happy to buy you whatever you want if this baby works!
also forgot to add: you need
also forgot to add:
you need this settings for the field, because the path to file wont be fine :)
http://pokit.etf.ba/upload/?pokit29739453e451f4a6df866a1b87facf3f.png
you need also this theme override :
<?php
// $Id: views-view-fields.tpl.php,v 1.6 2008/09/24 22:48:21 merlinofchaos Exp $
/**
* @file views-view-fields.tpl.php
* Default simple view template to all the fields as a row.
*
* - $view: The view in use.
* - $fields: an array of $field objects. Each one contains:
* - $field->content: The output of the field.
* - $field->raw: The raw data for the field, if it exists. This is NOT output safe.
* - $field->class: The safe class id to use.
* - $field->handler: The Views field handler object controlling this field. Do not use
* var_export to dump this object, as it can't handle the recursion.
* - $field->inline: Whether or not the field should be inline.
* - $field->inline_html: either div or span based on the above flag.
* - $field->separator: an optional separator that may appear before a field.
* - $row: The raw result object from the query, with all data it fetched.
*
* @ingroup views_templates
*/
?>
<?php foreach ($fields as $id => $field): ?>
<?php if (!empty($field->separator)): ?>
<?php print $field->separator; ?>
<?php endif; ?>
<?php if ($field->label): ?>
<?php print $field->label; ?>:
<?php endif; ?>
<?php
// $field->element_type is either SPAN or DIV depending upon whether or not
// the field is a 'block' element type or 'inline' element type.
?>
<?php print $field->content; ?>
<?php endforeach; ?>
so look for views-view-fields.tpl.php info also you might want to add other settings to view if you want, like filter to only to display published nodes, or specific node type
also i tested the view it looks like this :
http://pokit.etf.ba/upload/?pokit6c2394673840081070b5b466f1c19da9.png
unclear
Ok, I got through steps 1-3 without any trouble. I'm a little unclear about the template steps.
I have my own theme here: /themes/zen/wmp
Now what files do I need to put there? And what code should I have in those files?
Thanks
go for the
go for the http://pokit.etf.ba/upload/?pokit3b66c4570863b65a0f844ce9825968f9.png at views settings
there you will see this :
http://pokit.etf.ba/upload/?pokit26fdf7a66ca64f8a53765bf80d84a4ed.png
the red paint shows the tpl files that you need to make.. the bolded ones are that I made for my view, so basicly you will get the names for yours
e.g.
# Display output: views-view.tpl.php, views-view--name-of-your-view.tpl.php, views-view--.tpl.php, views-view--default.tpl.php, views-view--test-images--default.tpl.php
# Style output: views-view-unformatted.tpl.php, views-view-unformatted--views-view--name-of-your-view.tpl.php, views-view-unformatted--.tpl.php, views-view-unformatted--default.tpl.php, views-view-unformatted--test-images--default.tpl.php
# Row style output: views-view-fields.tpl.php, views-view-fields--views-view--name-of-your-view.tpl.php, views-view-fields--.tpl.php, views-view-fields--default.tpl.php, views-view-fields--test-images--default.tpl.php
so first file the views-view--name-of-your-view.tpl.php
<?php
// $Id: views-view.tpl.php,v 1.13 2009/06/02 19:30:44 merlinofchaos Exp $
/**
* @file views-view.tpl.php
* Main view template
*
* Variables available:
* - $css_name: A css-safe version of the view name.
* - $header: The view header
* - $footer: The view footer
* - $rows: The results of the view query, if any
* - $empty: The empty text to display if the view is empty
* - $pager: The pager next/prev links to display, if any
* - $exposed: Exposed widget form/info to display
* - $feed_icon: Feed icon to display, if any
* - $more: A link to view more, if any
* - $admin_links: A rendered list of administrative links
* - $admin_links_raw: A list of administrative links suitable for theme('links')
*
* @ingroup views_templates
*/
?>
<div class="view view-<?php print $css_name; ?> view-id-<?php print $name; ?> view-display-id-<?php print $display_id; ?> view-dom-id-<?php print $dom_id; ?>">
<?php if ($admin_links): ?>
<div class="views-admin-links views-hide">
<?php print $admin_links; ?>
</div>
<?php endif; ?>
<?php if ($header): ?>
<div class="view-header">
<?php print $header; ?>
</div>
<?php endif; ?>
<?php if ($exposed): ?>
<div class="view-filters">
<?php print $exposed; ?>
</div>
<?php endif; ?>
<?php if ($attachment_before): ?>
<div class="attachment attachment-before">
<?php print $attachment_before; ?>
</div>
<?php endif; ?>
<?php if ($rows): ?>
<div class="img-holder">
<?php print $rows; ?>
</div>
<?php elseif ($empty): ?>
<div class="view-empty">
<?php print $empty; ?>
</div>
<?php endif; ?>
<?php if ($pager): ?>
<?php print $pager; ?>
<?php endif; ?>
<?php if ($attachment_after): ?>
<div class="attachment attachment-after">
<?php print $attachment_after; ?>
</div>
<?php endif; ?>
<?php if ($more): ?>
<?php print $more; ?>
<?php endif; ?>
<?php if ($footer): ?>
<div class="view-footer">
<?php print $footer; ?>
</div>
<?php endif; ?>
<?php if ($feed_icon): ?>
<div class="feed-icon">
<?php print $feed_icon; ?>
</div>
<?php endif; ?>
</div> <?php /* class view */ ?>
the second file the views-view-unformatted--views-view--name-of-your-view.tpl.php
<?php// $Id: views-view-unformatted.tpl.php,v 1.6 2008/10/01 20:52:11 merlinofchaos Exp $
/**
* @file views-view-unformatted.tpl.php
* Default simple view template to display a list of rows.
*
* @ingroup views_templates
*/
?>
<?php if (!empty($title)): ?>
<h3><?php print $title; ?></h3>
<?php endif; ?>
<?php foreach ($rows as $id => $row): ?>
<?php print $row; ?>
<?php endforeach; ?>
the third file the views-view-fields--views-view--name-of-your-view.tpl.php
<?php
// $Id: views-view-fields.tpl.php,v 1.6 2008/09/24 22:48:21 merlinofchaos Exp $
/**
* @file views-view-fields.tpl.php
* Default simple view template to all the fields as a row.
*
* - $view: The view in use.
* - $fields: an array of $field objects. Each one contains:
* - $field->content: The output of the field.
* - $field->raw: The raw data for the field, if it exists. This is NOT output safe.
* - $field->class: The safe class id to use.
* - $field->handler: The Views field handler object controlling this field. Do not use
* var_export to dump this object, as it can't handle the recursion.
* - $field->inline: Whether or not the field should be inline.
* - $field->inline_html: either div or span based on the above flag.
* - $field->separator: an optional separator that may appear before a field.
* - $row: The raw result object from the query, with all data it fetched.
*
* @ingroup views_templates
*/
?>
<?php foreach ($fields as $id => $field): ?>
<?php if (!empty($field->separator)): ?>
<?php print $field->separator; ?>
<?php endif; ?>
<?php if ($field->label): ?>
<?php print $field->label; ?>:
<?php endif; ?>
<?php
// $field->element_type is either SPAN or DIV depending upon whether or not
// the field is a 'block' element type or 'inline' element type.
?>
<?php print $field->content; ?>
<?php endforeach; ?>
so, those files you need to save as tpl.php and place them inside
sites\all\themes\yourtheme folder, and clear cache so system can detect them. and thats all.
Very clear, but still no dice
That was very clear...I followed all your steps, but this is still the output:
<span class="illustration"><img field-item="" src="<div class="/>
http://costeloe.com/mcdonoughpartners/sites/costeloe.com.mcdonoughpartners/files/img16_1.jpg
</span>
</div>
<div class="field-item">http://costeloe.com/mcdonoughpartners/sites/costeloe.com.mcdonoughpartners/files/img16-2.jpg</div>
<div class="field-item">http://costeloe.com/mcdonoughpartners/sites/costeloe.com.mcdonoughpartners/files/img16-3.jpg</div>
<div class="field-item">http://costeloe.com/mcdonoughpartners/sites/costeloe.com.mcdonoughpartners/files/img16-4.jpg</div>
<div class="field-item">http://costeloe.com/mcdonoughpartners/sites/costeloe.com.mcdonoughpartners/files/img16-5.jpg</div>
" alt="image" />
Can you tell what I'm doing wrong?
did you set the option for
did you set the option for field as in screenshot above ?
http://pokit.etf.ba/upload/?pokit29739453e451f4a6df866a1b87facf3f.png
and did you configured the global field as on screenshot ?
and did you cleard cache so the template system can detect?
yes
Yes I did. I think the main problem is that the span tag is only being generated once (for the first image).
I want it to generate it for all the attached images (in this case 5). You seem to have it working on yours: http://pokit.etf.ba/upload/?pokit6c2394673840081070b5b466f1c19da9.png
$view = new view;$view->name
$view = new view;$view->name = 'test_images';
$view->description = '';
$view->tag = '';
$view->view_php = '';
$view->base_table = 'node';
$view->is_cacheable = FALSE;
$view->api_version = 2;
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */
$handler = $view->new_display('default', 'Defaults', 'default');
$handler->override_option('fields', array(
'field_slikadana_fid' => array(
'label' => '',
'alter' => array(
'alter_text' => 0,
'text' => '',
'make_link' => 0,
'path' => '',
'link_class' => '',
'alt' => '',
'prefix' => '',
'suffix' => '',
'help' => '',
'trim' => 0,
'max_length' => '',
'word_boundary' => 1,
'ellipsis' => 1,
'strip_tags' => 0,
'html' => 0,
),
'link_to_node' => 0,
'label_type' => 'none',
'format' => 'url_plain',
'multiple' => array(
'group' => TRUE,
'multiple_number' => '',
'multiple_from' => '',
'multiple_reversed' => FALSE,
),
'exclude' => 1,
'id' => 'field_slikadana_fid',
'table' => 'node_data_field_slikadana',
'field' => 'field_slikadana_fid',
'override' => array(
'button' => 'Override',
),
'relationship' => 'none',
),
'nothing' => array(
'label' => '',
'alter' => array(
'text' => '<span class="illustration"><img src="[field_slikadana_fid]" alt="image" /> </span>',
'make_link' => 0,
'path' => '',
'link_class' => '',
'alt' => '',
'prefix' => '',
'suffix' => '',
'help' => '',
'trim' => 0,
'max_length' => '',
'word_boundary' => 1,
'ellipsis' => 1,
'strip_tags' => 0,
'html' => 0,
),
'exclude' => 0,
'id' => 'nothing',
'table' => 'views',
'field' => 'nothing',
'override' => array(
'button' => 'Override',
),
'relationship' => 'none',
),
));
$handler->override_option('filters', array(
'type' => array(
'operator' => 'in',
'value' => array(
'slikadana' => 'slikadana',
),
'group' => '0',
'exposed' => FALSE,
'expose' => array(
'operator' => FALSE,
'label' => '',
),
'id' => 'type',
'table' => 'node',
'field' => 'type',
'override' => array(
'button' => 'Override',
),
'relationship' => 'none',
),
));
$handler->override_option('access', array(
'type' => 'none',
));
$handler->override_option('cache', array(
'type' => 'none',
));
$handler->override_option('items_per_page', 20);
$handler->override_option('style_options', array(
'grouping' => '',
));
$handler = $view->new_display('block', 'Block', 'block_1');
$handler->override_option('block_description', '');
$handler->override_option('block_caching', -1);
$handler = $view->new_display('block', 'Block', 'block_4');
$handler->override_option('block_description', '');
$handler->override_option('block_caching', -1);
this is my exported view...
try import it and look at the settings
edit
edit
There, I finished the things
There, I finished the things you needed to work, as I mentioned in e-mail, you can now modify those two views, and the content template (if you wish to add / remove fields from project content type )
Views also return only images that are uploaded on that node, using the NODE ID argument, so it works smoothly. Thumbs and main images are render correctly, and javascript just works amazing.
Cheers!
THANK YOU!
You are awesome!
Anyone out there that needs some help, I can vouch for vertazzar big time. I gave him admin access to my site and he just did everything for me...including editing the styles so everything looked pretty too!