none
Can I add a non-square shape to a SharePoint content editor webpart?

    Question

  • I am trying to create a series of pages to represent our project methodology and I would like to be able to add shapes that I have created in PowerPoint to content editor web-parts however it seems that I can only do so by creating a rectangular image of the shapes.

    Our methodology images (as shown in the image attached) represent a workflow and when shown correctly, appear close together based on the shape of the individual stage components.  When I save these as images individually (so I can add separate hyperlinks), they become separated as the images are rectangular.

    Does anyone have any ideas on how I can insert a non-rectangular image onto a SharePoint page using out of the box SharePoint?  My shapes are all just simple PowerPoint shapes.

    Thanks 

    PH

     

    Friday, January 25, 2019 5:58 AM

Answers

  • Hi Peter,

    This can be done. I mean that you can insert multiple hyperlinks into the one image. 

    Image Map is a feature that has been around for a while now. Using it you can create multiple “hotspots” linking within a single image. Image maps can be created manually or if you like to get things done in an easy and quick way, there are several free applications available too.

    I suggest you use the free tools, they are more easy. You can refer to below article for more information about how to use a tool called "Image Map Editor" to achieve your purpose:

    http://www.topproducer.com/campus/websites/using-websites/pages-and-content/hyperlinked-image-map/

    Best regards,

    Allen Bai


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.



    Wednesday, January 30, 2019 9:37 AM

All replies

  • Hi,

    If these are images, you can directly upload them into a library, and then refer to these images in the content editor web part. You can use below code to add images:

    <img src="the image1 url" />

    <img src="the image2 url" />

    <img src="the image3 url" />

    If you want to add hyperlinks in the images(make these images clickable), you can use below code:

    <a href="http://www.google.com/"><img src="image url" /></a> 

    You can get the image URL in below location:

    Best regards,

    Allen Bai


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.


    Friday, January 25, 2019 8:38 AM
  • Thanks Allen

    I am familiar with how to load images to content editor webparts. Maybe I wasn't clear enough in my post.

    Each of the above steps in our methodology appear on a landing page and are links to other pages. hence, each step needs to be a separate image so I can add a different link to each one.  When I save each step as a separate image, (from shapes I have in PowerPoint), the saved image takes a rectangular shape, so when I load each image to the content editor web part, they no longer appear as close to each other (as shown in my original post).

    So my question is, "Is there any way that the individual images can be saved to retain their irregular shape so when loaded to SharePoint, they appear interlaced and not separated as necessary when the shapes are rectangular?"

    I am assuming this isn't possible using out-of-the-box SharePoint which, as I don't have programming skills, is my only option.

    Thanks

    Peter

    Monday, January 28, 2019 11:19 PM
  • Hi Peter,

    Yes, as you mentioned, per my knowledge, there is no OOB method to achieve this(you may be disappointed).

    When adding image in more than two content editor web part, the images will no longer appear as close to each other.

    Best regards,

    Allen Bai


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, January 29, 2019 2:09 AM
  • Thanks Allen

    It's what I expected. 

    Further to your second sentence, the images do not appear close to each other even in the same Content Editor web part because saving the image (using Paint or Snipping Tool etc), simply puts the image into a box based on the extreme points of the image. Hence, in my example above, I can't get the components to appear as though they are 'spooning' each other haha.

    Having said that, as you can see in the above image, if I save all the shapes in one image it looks good, however I can't then insert more than one hyperlink to the image can I? You know, like in Facebook you can tag multiple people in a picture. I'd like to be able to insert multiple hyperlinks into the one image so if you click on certain areas of the image (say the Develop Idea section) you navigate to the Develop Idea page, and ditto for Assess Feasibility and the other stages.

    Anyway, no need to respond. I know the answer is that it can't be done out-of-the-box.

    Thanks for your help anyway.

    Peter

    Wednesday, January 30, 2019 6:19 AM
  • Hi Peter,

    This can be done. I mean that you can insert multiple hyperlinks into the one image. 

    Image Map is a feature that has been around for a while now. Using it you can create multiple “hotspots” linking within a single image. Image maps can be created manually or if you like to get things done in an easy and quick way, there are several free applications available too.

    I suggest you use the free tools, they are more easy. You can refer to below article for more information about how to use a tool called "Image Map Editor" to achieve your purpose:

    http://www.topproducer.com/campus/websites/using-websites/pages-and-content/hyperlinked-image-map/

    Best regards,

    Allen Bai


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.



    Wednesday, January 30, 2019 9:37 AM
  • Hi,

    How are things going?

    If you think my suggestion is helpful, you could mark it as an answer.

    Best regards,

    Allen Bai


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, February 12, 2019 1:08 AM
  • Hi Allen

    I have marked your response as an answer however I am not sure how to use the Image Map Editor. 

    I followed their instructions on the site but the last step is just 'Show me the Code'.  What am I supposed to do with that?  I am not a coder and I assumed that their process would embed the hyperlinks into the image so I could just upload the new image to my site.

    Cheers

    Peter

    Tuesday, February 12, 2019 1:42 AM