SP13: Upload Image and Appear on a Page

Question

Scenario: I am not sure if this is an out of box way to do this. If I upload a photo to a library I want the photo to appear on the home page in particular section of the page with a border...etc.

To solve: I thought if I have create a custom photo library or custom list I can add the field to add a image. Then create a web part on the home page. This will at least cause the photo to appear in that zone. But it will not be the format that I want because I just want the photo not anything else. I would also like a border around the photo if possible.

My thoughts are to create css that will change the way the image appears (ex: border around the photo). But how would I ensure the photo appears always in the particular zone on the home page?

This may be the hardest way to complete this task. If there is a better way or could help me on this problem this would be great.

Answer 1

You can upload your image to sharepoint library (Site Assets ideally if it won't be changing too often) then add CEWP (Content Editor Web Part) to your page and inside CEWP add

<img src="/sites/yourSite/yourLibrary/yourImage.jpg" />

Then you can also use css to design it, for example iof you need a border:

<img src="/sites/yourSite/yourLibrary/yourImage.jpg" id="myImage" />

<style type="text/css">

#myImage {
    border: 1px solid black;
}

</style>

In this case you would upload a new image with the same name (yourImage.jpg) to that library and replace the old one later.

Answer 2

There are many ways to achieve this:

1. Build an html page and add your css (inline or external even) then place a content editor web part where you like the photo to appear, and reference the html page you built.
2. Create a custom display template and your query can be customized to pull this photo and our add you can build the UI to your requirements.
3. Place Code Editor WP in the spot you like, and add all your html and css in there.