How to get image path in view? I have created a content type having two fields:


Title
Image (multiple image field)


Then I create a page view for the same. Added these two fields. Now I have to create an external theming in view so from view-Theme Information- Row Style output, I have created a view-tpl.php page in the templates folder.

I have given this design in this view:

&lt;style type="text/css"&gt;
    .imgStyle
    {
        width:100px;
        height:100px;
        border:3px solid grey;
    }
&lt;/style&gt;

&lt;img id="mainImage"" 
     src="images/collection-img/nandikesvara-front-3000-06.png" height="500px" width="540x"/&gt;
&lt;br /&gt;
&lt;div id="divId" onclick="changeImageOnClick(event)"&gt;
    &lt;img class="imgStyle" src="images/collection-img/nandikesvara-front-3000-06.png" /&gt;
    &lt;img class="imgStyle" src="images/collection-img/nandikesvara-back-3000-06.png" /&gt;
    &lt;img class="imgStyle" src="images/collection-img/nandikesvara-front-3000-06.png" /&gt;
    &lt;img class="imgStyle" src="images/collection-img/nandikesvara-back-3000-06.png" /&gt;
    &lt;img class="imgStyle" src="images/collection-img/nandikesvara-front-3000-06.png" /&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;

    var images = document.getElementById("divId")
                         .getElementsByTagName("img");

    for (var i = 0; i &lt; images.length; i++)
    {
        images[i].onmouseover = function ()
        {
            this.style.cursor = 'hand';
            this.style.borderColor = 'red';
        }
        images[i].onmouseout = function ()
        {
            this.style.cursor = 'pointer';
            this.style.borderColor = 'grey';
        }
    }
    function changeImageOnClick(event)
    {
        event = event || window.event;
        var targetElement = event.target || event.srcElement;

        if (targetElement.tagName == "IMG")
        {
            mainImage.src = targetElement.getAttribute("src");
        }
    }
&lt;/script&gt;


So I want to fetch one by one image path to pass in src of images. I have tried this $fields['image']-&gt;content but it print images as an object. How can I get the paths of images to pass in src tag.
Here's a Drupal 7 example showing how to use:

field_get_items() to select the field from the node,

file_load() to load the image file,

image_load() to get the URI from the image file

image_style_url() to format the image differently for different
   contexts

... and as a bonus, check for good data and substitute a default image if the field image is no good.

// If there is a field image.
if (!empty($node-&gt;field_image)) {
  $field = field_get_items('node', $node, 'field_image');
  if (!empty($field[0]['fid'])) {
    $image_file = file_load($field[0]['fid']);
    $image      = image_load($image_file-&gt;uri);
  }
}
// If image, then scale it. If not use the default image.
if (!empty($image)) {
  if (is_string($image)) {
    $image_source = $image;
  }
  else {
    $image_source = $image-&gt;source;
  }
  $url        = image_style_url('image_style', $image_source);
  $url_mobile = image_style_url('image_style_mobile', $image_source);
}
else {
  $url        = 'https://example.com/sites/default/files/default_image.png';
  $url_mobile = 'https://example.com/sites/default/files/default_image_mobile.png';
}


Hope this helps. Good luck!

EDIT: @Kevin makes a very good point in the comments above:


  All of this complexity can be avoided by using entity view modes and not doing field based views.


Basically, Drupal gives you the ability to set up view modes in the "Manage Display" tab for each content type. There, you can decide which fields will be shown or hidden in each view mode, and how they should be formatted for display. If you use this feature, you shouldn't need to deal with it in PHP template files.