Image field as title [#2405115]

I have a project were I want to use an image field as a tab in views.

I'm able to choose the image field as title. But it is rendered as following;

<img src="http://www.dizipin.com/v2/sites/default/files/styles/afi_liste_6li/public/248742-7.jpg?itok=clgzxgWl" width="152" height="223" alt="Person of Interest" />

it shows in browsers like this (in console);

"<img src="http://www.dizipin.com/v2/sites/default/files/styles/afi_liste_6li/public/248742-7.jpg?itok=clgzxgWl" width="152" height="223" alt="Person of Interest" />"

Because of the "" the image tag is in, the image does not show up. Only the string is printed as text. Everything is working but no image.

When I edit the string and remove the "" the image is showing up in my DOM.

Any solution for this ?

Comment	File	Size	Author
#3	Untitled-1.jpg	1.02 MB	RgnYLDZ

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

RgnYLDZ CreditAttribution: RgnYLDZ commented 10 January 2015 at 14:03

Issue summary:

View changes

Comment #2

netw3rker CreditAttribution: netw3rker commented 11 January 2015 at 20:07

Version:	7.x-3.6	» 7.x-3.x-dev
Component:	Tab styles	» Code
Priority:	Major	» Normal
Status:	Active	» Postponed (maintainer needs more info)

Can you provide a complete set of steps to reproduce this? I'm guessing that this is a problem with views token replacements in title fields, but if it is a quicktabs problem, we can give it a shot by fixing a couple of different issues at the same time :)

Comment #3

RgnYLDZ CreditAttribution: RgnYLDZ commented 14 January 2015 at 20:46

File	Size
Untitled-1.jpg	1.02 MB

Ok, I have a attached a screenshot of my views and its outcome.

I have a TV show content type and a episodes content type. episodes can be flagged via flags. I'm listing the episodes by the tv shows. Afis is the poster field of the TVshow.

The issue can be produced simply by set a image field as quicktabs title I think.

Comment #4

RgnYLDZ CreditAttribution: RgnYLDZ commented 15 January 2015 at 22:12

Because of my short time I had to make a workaround. I used this small jQuery to replace < with < and > with > in dom. This works nice for now. Till this issue is solved people can use this hack for their projects.

$('.quicktabs-tabs li a').each(function(){
    var $this = $(this);
    var t = $this.text();
    $this.html(t.replace('&lt;','<').replace('&gt;', '>'));
});

.quicktabs-tabs li a is the anchor with image item used as tab.