Extracting URI value from Image in Views - Getting Index Error

Question

I am trying to create a custom slideshow using Views. Please not that I am not using the Views Slideshow Module

What I need to accomplish is to wrap the the relative URL for the images within a container. So, my field template should generate

/sites/default/files/background.jpg

The problem that I am having is gaining access to the URI so that I can write the raw value into some div tags. So, since that is the area that I am having difficulty with, I am focusing on only writing the URL not all the div containers; that will come later.

As for the image, I have a simple content type that has only two fields: title and the image itself. I have created the view that lists the images I am looking for. Now to customize the field template within the view. Here is my code:

<?php
    $node = node_load($row->nid);
    $field_name = "field_image";
    $delta = 0;

    $field = field_get_items('node', $node, $field_name);
    $output = field_view_value('node', $node, $field_name, $field[$delta]);

    print ($output['#item']['uri']);

/* Everything below is for Debugging Purposes */  
    print "<br><br>";
    print "Field:  ";
    print_r($field);                    
    print "<br><br>";
    print "Output:  ";
    print_r($output);
    print "<br><br>";
?>

If you look at the output below, I get a URI that says:

public://public://sandy_beach_banner.jpg

This is correct. I will be running it through file_create_Url() later as soon as I figure out how to make it a relative link and not absolute.

However, I get the error message:

Notice: Undefined index: #item in include() (line 11 of 
/var/www2/html/annex/sites/all/themes/mytheme/templates/views-
view-field--banner-slide-show--field-image.tpl.php)

Line 11 in my file references

print ($output['#item']['uri']);

This I don't understand. If I wasn't referencing it correctly, I wouldn't get the URI value I am looking for. So...this confuses me greatly. I am trying to following the example that I found here: Rendering Drupal 7 Fields The Right Way because from what I can tell, this will also work in D8 (I could be wrong). That, and I want to legimately learn how to do this the right way.

Any advice here would be greatly appreciated.

Output

public://public://sandy_beach_banner.jpg

Field: Array ( [0] => Array ( [fid] => 5 [uid] => 1 [filename] => sandy_beach_banner.jpg [uri] => public://sandy_beach_banner.jpg [filemime] => image/jpeg [filesize] => 30663 [status] => 1 [timestamp] => 1444690263 [alt] => Sandy Beach [title] => Sandy Beach [width] => 800 [height] => 200 ) ) 

Output: Array ( [#theme] => image_formatter [#item] => Array ( [fid] => 5 [uid] => 1 [filename] => sandy_beach_banner.jpg [uri] => public://sandy_beach_banner.jpg [filemime] => image/jpeg [filesize] => 30663 [status] => 1 [timestamp] => 1444690263 [alt] => Sandy Beach [title] => Sandy Beach [width] => 800 [height] => 200 ) [#image_style] => [#path] => [#access] => 1 ) 

public://public://nyc_banner.jpg

Field: Array ( [0] => Array ( [fid] => 4 [uid] => 1 [filename] => nyc_banner.jpg [uri] => public://nyc_banner.jpg [filemime] => image/jpeg [filesize] => 480360 [status] => 1 [timestamp] => 1444690227 [alt] => NYC Banner [title] => NYC Banner [width] => 1200 [height] => 492 ) ) 

Output: Array ( [#theme] => image_formatter [#item] => Array ( [fid] => 4 [uid] => 1 [filename] => nyc_banner.jpg [uri] => public://nyc_banner.jpg [filemime] => image/jpeg [filesize] => 480360 [status] => 1 [timestamp] => 1444690227 [alt] => NYC Banner [title] => NYC Banner [width] => 1200 [height] => 492 ) [#image_style] => [#path] => [#access] => 1 ) 

public://public://hindu_banner.jpg

Field: Array ( [0] => Array ( [fid] => 3 [uid] => 1 [filename] => hindu_banner.jpg [uri] => public://hindu_banner.jpg [filemime] => image/jpeg [filesize] => 508630 [status] => 1 [timestamp] => 1444690189 [alt] => Hindu Banner [title] => Hindu Banner [width] => 2000 [height] => 560 ) ) 

Output: Array ( [#theme] => image_formatter [#item] => Array ( [fid] => 3 [uid] => 1 [filename] => hindu_banner.jpg [uri] => public://hindu_banner.jpg [filemime] => image/jpeg [filesize] => 508630 [status] => 1 [timestamp] => 1444690189 [alt] => Hindu Banner [title] => Hindu Banner [width] => 2000 [height] => 560 ) [#image_style] => [#path] => [#access] => 1 ) 

Answer 1

Getting the URL from an Image (or Any File)

Let’s say, for whatever reason, you want to get the URL of a file, probably an image, and insert it into the markup of your document. Maybe, you want to use it in a slideshow and you need to rewrite the output so you can embed it within some div tags and assign it some classes for CSS.

You can do with Views without modifying a template file or writing a single line of code . And because this module is built into Drupal 8 (unlike D7), you will be able to do this out of the box.

Giving credit where credit is due, it was Jay from www.jay-epstien.com, the creator of the Drupal Relativity Data Model who showed me this simple solution. After reading this HOWTO, I encourage you to visit his site.

Background

I wrote this tutorial because I spent days researching this and wanted to save the sanity of anyone in a similar situation. There are tons of posts throughout Stackexchange and on the Drupal API that show you how to accomplish this. I re-wrote my template file per these instructions and while it worked (my original question), it generated an error to which I never got an answer. There is another post that says to use the URL Formatter module.

Using a module is something I want to avoid as I am not a subscriber to the “there’s a module for that” methodology. Also note, that URL Formatter module is not D8 compatible and must be rewritten. This solution doesn't need to be.

How To

We are proceeding under the assumption that you have the Views module installed and that you have created a view to show your desired content. There are lots of tutorials on doing just this so I won’t cover it here.

Your fields can be any format, unformatted list, HTML list, grid, or whatever. For this example, I am going to use an unformatted list. If you are creating a View from scratch, you probably have the Title field already configured as a default. It should look similar to the picture below.

The very first and most important thing that you need to do is create a Relationship to the File Entity. In the Views Display and under the Advanced tab you should see Relationships. Let’s add one.

Select "File Usage: File"

You don’t need to require this relationship, so go ahead and leave this check block blank. The Identifier of “File” is fine, but you can change this to something else if it makes referencing it for you easier.

Let’s add another Field. I use the “File” filter in the selection dialog box to bring up all of my choices that are now available. Pick path.

The very next screen is where all the magic happens. Typically, you will get a URI that looks like

public://sites/default/files/somepicture.jpg

If you want, don’t select anything here and try it out and see what you get in your Views Preview pane. But, if you check the box next to “Display download path instead of file storage URI” you will get

http://www.foobar.com/sites/default/files/somepicture.jpg

You can now rewrite the output of the field and the link and style it as you like. There are lots of posts and tutorials on how to do that, so I won’t go into it here. Here’s what your Views Display should look like when you are done: