Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
    
Do you want to know how to get the picture field value or how to create the proper html? –  user3470 Dec 10 '12 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 '12 at 11:06
    
Are you using a .html page or .aspx? –  user3470 Dec 10 '12 at 11:09
    
html, but aspx is good too –  Neil Dec 10 '12 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 '12 at 11:16
add comment

1 Answer 1

up vote 0 down vote accepted

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});
share|improve this answer
    
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 '12 at 11:34
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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