1

I have a view with td grid style and two fields: views-field-field-foo-image and views-field-field-foo-title.

The image is linked with colorbox load and the structure of the HTML is like this:

<div class="views-field views-field-field-foo-image">
  <div class="field-content">
    <a class="colorbox views-ajax-processed-processed"....           
       <img width="230" height="150" title="" alt="" src="...>
    </a>
  </div>
</div>

<div class="views-field views-field-field-foo-title">
</div>

How can I put the foo-title into the foo-image field, so the structure to become like this?

<div class="views-field views-field-field-foo-image">
      <div class="field-content">
        <a class="colorbox views-ajax-processed-processed"....           
           <img width="230" height="150" title="" alt="" src="...>
            <div class="views-field views-field-field-foo-title">
            </div>
        </a>
      </div>
</div>

With views module by changing the order of fields, so the title become on top and with Rewrite results/Rewrite the output on the image field will be possible to change the structure, but I cannot understand the building process with tokens.

EDIT: Unfortunately the answers didn't helped me.

Here's an example http://www.mtv.co.uk/the-valleys when you hover on any latest video, you'll see the title. This is their structure:

<a href="/the-valleys/videos/the-valleys-season-3-angle-grinding-0">
<div class="carousel-item-image">
<h2>
<span class="videos-list-tag">Exclusive</span>
</h2>
</a>

I want to add that <h2> inside the link, or in my case the title field. That's what I want to achieve.

I can see they don't use views. If someone knows how to create that even without Views module, please let me know.

1

One possibility is to use the Views Field View module:

This module allows you to embed a view as a field in a view. A new field handler is made available, so this can also be used in area (header/footer/empty) handlers as well as rows.

Also, there is the 'Rewrite results' options in Views definition.

Alternatively by code, you can use use a field--[type|name[--content-type]|content-type].tpl.php file to override the rendering of the field. You would then have to access the $element['#object'] to get access to the other field that you would need to render manually. Reference: https://api.drupal.org/api/drupal/modules%21field%21theme%21field.tpl.php/7

  • I've checked that module. It cannot create field that will be inserted between the elements. This is what I want to achieve:<a href=...><img>The image file</img><div class="views-field views-field-field-foo-title"></div></a> So far with adding field its available only outside the <a> tag. – user22957 Feb 28 '14 at 14:11
  • @user22957 I updated the answer. You can fine-tune everything by using code. – Wtower Feb 28 '14 at 14:38
0

Easier way is applying separate anchor tags to both fields and manage the style setting through CSS.

  • The reason I want to change into that structure is because later I will hide the title field and display it with jQuery hover and animation effects. Applying separate anchor tags wont help. – user22957 Feb 27 '14 at 15:08
  • Then you can totally deal with it using JQuery and focus on providing a non-JS safe version from within Drupal. – Wtower Feb 27 '14 at 15:21
  • You can still exclude title from display and hover it on image. I have achieved it with "Beauty Tips" module and "Views". I am not sure if it will have an issue with "colorbox". – bPadaria Feb 27 '14 at 15:51
0

To have fine control over the html of a view field, we're going to use the field rewrite functionality built into the fields interface. This tool allows us to hide the default field mark up and produce modified mark up using tokens to place our field data without html. To completely replace field mark up you can also use a global custom text field.

To modify the image field mark up to contain the title:

  • Click the title field and check "Exclude from display".
  • Click Apply.
  • Click the image field and open "Rewrite Results" for the image field.
  • Check "Rewrite the output of this field".

Now enter:

<div class="views-field views-field-field-foo-image">
  <div class="field-content">
   <a class="colorbox views-ajax-processed-processed" href="#">         
       [image]
       [title]
    </a>
  </div>
</div>
  • Click Apply.
  • Click "Save" in the top right.
  • I've tried that, but it didnt worked. The point is to add the title into the link, not after the link. So the structute to become <a href=...><img>The image file</img><div class="views-field views-field-field-foo-title"></div></a>. I hope you understand. – user22957 Feb 28 '14 at 14:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.