Add field into other field with Views

Question

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.

Answer 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

Answer 2

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

Answer 3

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.