5

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 ) 

1 Answer 1

10

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.

Relationships

Select "File Usage: File"


enter image description here

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.


enter image description here




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.


enter image description here


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


enter image description here


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:

enter image description here

5
  • 2
    I tried this solution. But for me while adding the relationship field am getting Broken/missing handler error. Anybody please help me to solve this. Am using Drual 8.
    – user4026
    May 5, 2017 at 11:24
  • 1
    Would this work the same with a Media field or would there be any tweaks? I am trying this and I am getting Prajila's "Broken/missing handler" error.
    – Jeff
    May 3, 2018 at 18:09
  • This is not working with d8: have a "Broken/missing handler" error
    – VVS
    Jan 22, 2019 at 11:40
  • In D7 it works OK, but in case the nodes have versioning enabled, every file in the revisions will create a row on the view, resulting in duplicate nodes (and wrong, outdated files). Any idea on how to go around this? Thanks! Feb 12, 2019 at 13:43
  • Thank You! Its a GEM of an Answer!
    – Harish ST
    Dec 12, 2019 at 10:36

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