1

Forward: I have been working with SharePoint for 2 years (mostly front end & css branding). I Have never done any scource coding for SharePoint except for the odd script to hide various fields. With that said...

Question: How do I Get the Url from a Picture/Image Column in a Library and then use that link in my HTML to show the pictue? Hope that makes sense!?

Code so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
    <script language="javascript" type="text/javascript" src="http://qajdgintranet/gs/it/Documents/RARTest/jquery-1.8.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="http://qajdgintranet/gs/it/Documents/RARTest/jquery.SPServices-0.7.2.min.js"></script>

    <script language="javascript" type="text/javascript">
    $(document).ready(function() {

      $().SPServices({
        operation: "GetListItems",
        async: false,
        webURL: "http://mysite",
        listName: "RARTest",

                CAMLQuery: "<Query><Where><Eq><FieldRef Name='Month' /><Value Type='Text'>December</Value></Eq></Where></Query>",
        CAMLViewFields: "<ViewFields><FieldRef Name='Year'/><FieldRef Name='Month'/><FieldRef Name='Award'/><FieldRef Name='Profile_x0020_Picture'/><FieldRef Name='Description'/><FieldRef Name='User'/></ViewFields>",

                completefunc: function (xData, Status) {
        $(xData.responseXML).SPFilterNode("z:row").each(function() { 
        var get_year = $(this).attr("ows_Year");
        var get_month = $(this).attr("ows_Month");
        var get_award = $(this).attr("ows_Award");
        var get_photo = $(this).attr("ows_Profile_x0020_Picture").split(",")[0];
        var get_photoname = $(this).attr("ows_Profile_x0020_Picture").split(", ")[1];
        var get_description = $(this).attr("ows_Description");
        var get_nominator = $(this).attr("ows_User").split("#")[1];

        $("#rar_year").append(get_year);
        $("#rar_month").append(get_month);
        $("#rar_award").append(get_award);
        $("#rar_photo").append(get_photo);
        $("#rar_photoname").append(get_photoname);
        $("#rar_description").append(get_description);
        $("#rar_nominator").append(get_nominator);

          });
        }
      });
    });
    </script>

<h5 id="rar_year"/>
<h5 id="rar_month"/>
<h5 id="rar_award"/>
<h5 id="rar_photo"/>
<h5 id="rar_photoname"/>
<h5 id="rar_description"/>
<h5 id="rar_nominator"/>

<body>
???
</body>

Required Field: Photo

I have tried various things to get this picture just to display independently out of the list.

This is driving me completely nuts ;) Your help would be greatly appreciated.

Improve this question
5
  • Do you want to know how to get the picture field value or how to create the proper html?
    – user3470
    Dec 10, 2012 at 10:59
  • Hi, Sorry I forgot to add that in. From the code above I get all the Values that I need. I Just have no idea how to use it in HTML <img> for eg. I know HTML, but don't know how to use or call the Var into the tags. Thankyou for your prompt response.
    – Neil
    Dec 10, 2012 at 11:06
  • Are you using a .html page or .aspx?
    – user3470
    Dec 10, 2012 at 11:09
  • html, but aspx is good too
    – Neil
    Dec 10, 2012 at 11:11
  • Basically, it's for an internal staff award thing that we have on a monthly basis, I'm using an accordion effect in html to show the pictures of that months winners plus their names etc that will be stored in the list/library. I'm trying to get it automated by using html to pull the current winners from the list that the owner will upload. I'm currently doing it in photoshop and uploading the .jpg every month. My purpose here is to hand it over without the further need of a developer to upload.
    – Neil
    Dec 10, 2012 at 11:16

1 Answer 1

Reset to default
0

First you need to add an img tag in the body:

<img id="myImage" src="" />

Then you need to access the src attribute using JQuery and set it to the image URL.

$("#myImage").attr({src : get_photo});
Improve this answer
1
  • Thank you so so much... It's working!! The $() line is the one that I could not figure out. It's always the simple things that stump us. Your a Star. ;)
    – Neil
    Dec 10, 2012 at 11:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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