Bad links in image galleries (title and alt contain img tag)
salvis - September 29, 2009 - 14:57
| Project: | Image |
| Version: | 6.x-1.0-beta3 |
| Component: | image_gallery |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | duplicate |
Description
We found that Thickbox displays the img tag rather than the image title, see #588050: Caption is showing HTML img tag.
It turns out that image_gallery emits the following HTML (this is NOT munged by d.o, only line-wrapped by me):
<a
href="http://example.com/node/1981"
title="&lt;img
src=&quot;http://example.com/system/files/images/filename.thumbnail.jpg&quot;
alt=&quot;Image Title&quot;
title=&quot;Image Title&quot;
class=&quot;image image-thumbnail &quot;
width=&quot;130&quot;
height=&quot;88&quot;
/&gt;"
alt="&lt;img
src=&quot;http://example.com/system/files/images/filename.thumbnail.jpg&quot;
alt=&quot;Image Title&quot;
title=&quot;Image Title&quot;
class=&quot;image image-thumbnail &quot;
width=&quot;130&quot;
height=&quot;88&quot;
/&gt;"
>
<img
src="http://example.com/system/files/images/filename.thumbnail.jpg"
alt="Image Title"
title="Image Title"
class="image image-thumbnail "
width="130"
height="88"
/>
</a>The title and alt attributes of the <a> tag contain the entire <img> tag instead of just the Image Title.
@joachim: Seems like you sneaked in your unloved image_gallery-using-views rewrite, and it breaks things. I don't understand how you managed to pull this off: the original image_gallery.module is still there, but apparently it's not used anymore?
The images (and varying-length titles) are now bottom-aligned, i.e. each image in each row is on a different height — it looks awful...
#1
> Seems like you sneaked in your unloved image_gallery-using-views rewrite, and it breaks things
Not sure what you mean.
Yes, I got views support into image galleries. There was a patch for testing hanging around for months. The general opinion is that using views is a big improvement.
You can still get the hardcoded galleries if you disable the relevant view. This is explained in the UI and in the docs, IIRC.
> The images (and varying-length titles) are now bottom-aligned, i.e. each image in each row is on a different height — it looks awful...
I switched to a fluid grid method which I believe is better. You can file an issue for improvements, but the best bet is to customize your CSS to the grid dimensions you want.
As for thickbox and the alt tag, is this line of the release notes relevant?
- The alt text in the Views image field when formatted as a link contains bad HTML. This is fixed in the latest Views dev: see http://drupal.org/node/489888.
#2
Well, there's a bit of contradiction between There was a patch for testing hanging around for months. (= no one wanted to look at or install this) and The general opinion is that using views is a big improvement. We talked at length about the relative merits of the hard-coded image_gallery.module and image_galleries-as-views in #357488: Front image must respect the sort order, and I tried to explain that the former has some advantages, too.
I was and still am unable to find this piece of information, even now that you told me it should exist. Apparently, it's well-hidden. But it does solve all my problems, thank you!
This is not a question of size but of vertical alignment. Please see the attached screenshot. IMHO, the tops of the images should align, rather than the bottoms of the captions.
No, not quite, but it's close: I don't think #489888: alt attribute set for node fields rendered as link produces not compliant HTML is what we're seeing here, but rather #496010: A wrong "alt" and "title" attributes in "a" tag for imagecache images, which merlinofchaos closed as a supposed duplicate. title is just as broken as alt, and they are compliant, but they're junk.
#3
I don't really see the point of going over this again, but since you do: #357488: Front image must respect the sort order exemplifies exactly why views is needed. Everyone wants a different sort order; and each piece of sort order code we add to the module increases complexity, means more to maintain, more to upgrade for future versions, and so on. By using views, we plug in to a larger module with a much larger body of users and testers. It's re-use, and that's good Drupal practice.
For that matter, I added quite a few options for the cover image sort order, of considerable complexity, precisely with that cover sort order issue in mind.
> I was and still am unable to find this piece of information, even now that you told me it should exist. Apparently, it's well-hidden.
Go to the image gallery settings. I covered several cases there; if it's not clear enough or I missed anything, please file an issue.
Also, the documentation on this site is freely editable; if there's anything I've missed there you can add it; or again, file an issue.
Alt / title -- if you think merlinofchaos was wrong to mark that one as a duplicate, then reopen it and explain clearly why. Is #489888: alt attribute set for node fields rendered as link produces not compliant HTML about the ALT attribute just shouldn't be there, vs #496010: A wrong "alt" and "title" attributes in "a" tag for imagecache images which is about crummy content in the TITLE? Reopen, retitle, make it clear how it is different -- because right now I can see why merlin would have thought that: their titles seem too similar to me as they are.
I think there have been a couple of issues filed about this in the image queue of late -- so I'm going to mark this one as a duplicate, and I would appreciate any help you can give with triage on this, as I'm not exactly sure what the problem is and at the moment I haven't time to investigate properly.
Layout -- the old system was floated blocks; the new is inline blocks. Plenty of info about both techniques on the web.
But ultimately, both are just a UL of DIVs. You can completely override the stylesheet and impose your own layout, or tweak it.
#4
I'm sorry, your reply went out of sight because you marked the issue as duplicate.
Unfortunately, I'm not enough into Views that I'd be able to help with debugging this (if it really is a Views issue). Just look at the emitted HTML code for whether the issue is fixed or not. I can't lay it out any more clearly than I have. This goes for the other items, too.
#5
I too have this problem... 'TB_caption' displays the entire < img > tag. Only when I disable the node view "image_gallery" in Views the title of the image appears. But I can't use that because my page layout gets scrambled when disabled.
Unfortunately my knowledge does not reach far enough to solve this problem. I can only hope someone will find a solution soon. Thanks in advance anyway.
#6
Until this is fixed, you can create a temporary solution in your theme.
In template.php, create a preprocess function for the 'fields' of the image gallery. In that preprocess and within the $vars array, reassign the 'content' value in the 'image_image' object to the 'original_value' in the 'view' array. Create your tpl (which can be directly copied from the Views UI), and voila!
Here is my example code:
Goes in template.php
function phptemplate_preprocess_views_view_fields__image_gallery(&$vars) {$vars['fields']['image_image']->content = '<a href="node/' . $vars['row']->nid .'">' . $vars['view']->field['image_image']->original_value . '</a>';
}
Goes in views-view-fields--image-gallery.tpl.php in your theme folder (copied directly from the theme generator in views:
<?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 print $field->inline_html;?> class="views-field-<?php print $field->class; ?>">
<?php if ($field->label): ?>
<label class="views-label-<?php print $field->class; ?>">
<?php print $field->label; ?>:
</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->element_type; ?> class="field-content"><?php print $field->content; ?></<?php print $field->element_type; ?>>
</<?php print $field->inline_html;?>>
<?php endforeach; ?>
Side note: I tried using l(), but it escapes the brackets appended to the img tag.
An example for reference: http://wingsforkids.org/experience/photos
#7
Thanks for posting a fix :)
I can't remember for sure, but does Views let you supply a template for a specific field? That would be even simpler, and involve just a tipplefip and no preprocessor.
It looks like the relevant bugs in Views have been fixed, though, so what would be really handy would be if someone who has this problem tried the latest Views 2 dev release and reported back :)
#8
That worked perfectly! Many thanks!!
BTW, seeing that you're so skilled, do you happen to know how to solve the horrible gallery layout in Camino? See attached. I'm pretty good with CSS but somehow I can't seem to let Camino list the pictures side by side. The ul / li properties are somehow fixed?
Thanks again! Koen
#9
@thealchemist: There is an issue open for improving the CSS for the gallery. I kicked it off with some links I found -- perhaps those might help?
Could someone try Views dev to see if that fixes it?
#10
Hi Joachim,
Thanks for the reply. I've read your post dating April 7, 2007 - 07:48 and noticed that the 'list-style' and 'background' rules are already in the image_gallery.css file. Or is there a more recent post with a solution I missed?
#11
*everything* has changed since 2007!
#575790: cross-browser support for gallery style.
And please please please:
> Could someone try Views dev to see if that fixes it?