#SharePoint – Inserare imagine cu mai multe link-uri

În activitatea curentă a unui site de SharePoint apar necesități specifice de navigare. Una din cele mai comune metode de navigare complementară meniurilor obișnuite (personalizarea meniului din stânga sau de sus) sau listelor de legături sunt imaginile. În viziunea mai multor utilizatori poți folosi o imagine pentru mai multe link-uri.

Pentru a putea să inserăm mai multe link-uri pentru o imagine trebuie să utilizăm tagul HTML IMG cu atributul usemap și tagul MAP cu opțiunile AREA.

În exemplul pe care vi-l propun voi folosi o imagine de dimensiunea 640×427 px. Imaginea va fi încărcată în SharePoint într-o bibliotecă de imagini sau active. Este foarte important în procesul de mapare a imaginii să se păstreze dimensiunea corectă a imaginii pentru a nu decala legăturile stabilite prin arii.

Ariile pe imagini pot fi definite sub formă de pătrat (rect) cu 4 coordonate, cerc (circle) cu 3 coordonate din pagină și polinom cu câte două dimensiuni pentru fiecare colț. Explicații mai elaborate puteți găsi în articolul:  How To Create Multiple Links On A Single Image With Image Map

Pentru determinarea poziției/ariei se pot utiliza resurse on-line de mapare sau aplicații clasice de editare a imaginilor. Un instrument on-line interesant poate fi accesat și utilizat pe site-ul http://www.image-maps.com/map_image.php care permite definirea și salvarea ariilor cu tot cu o serie de opțiuni specifice de formatare.

image

În Offline pentru editare eu mai folosesc din când în când versiunea de 30 de zile a aplicației Zoner Photo Studio 18 care îmi permite identificarea poziției x,y de start și început a unui pătrat sau determinarea punctului central al unui cerc.

image

Vedeți pe imagine poziția x,y a cursorului în colțul de jos al selecției.

Implementarea în SharePoint

Am încărcat imaginea în Site Assets apoi am creat o nouă pagină simplă în care am inserat imaginea și m-am asigurat că are dimensiunea dorită (640×427 px).

Din ribbonul Format Text am ales opțiunea Edit Source și am introdus codul:

<p>
   <img src=”/SiteAssets/Image.png” alt=”” style=”margin: 5px; width: 640px; height: 427px;” usemap=”#ress”/>
   <map name=”ress”>
       <area title=”Resource 1″ href=”#” shape=”rect” coords=”63,281,233,363″ alt=”Resource 1″ />
       <area title=”Resource 2″ href=”#” shape=”rect” coords=”223,182,386,254″ alt=”Resource 2″ />
       <area title=”Resource 3″ href=”#” shape=”rect” coords=”403,113,574,193″ alt=”Resource 3″ />
   </map>
    </p>

image

În forma de editare putem vizualiza în SharePoint dacă încadrarea este corectă după care putem adăuga legăturile corecte (atributul href de pe area) și salva pagina.

Sper să vă fie util!

Customizing the Links SharePoint App to open links into new window using XSL Link

 

This article describe a simple way to format Links App web parts using XSL Link for SharePoint Server 2013 and SharePoint Online from Office 365.

Description

Into a Links app you can add new items by specifying URL, Description and Notes. By default all links stored in this lists are opened into the same windows/tab. This article purpose a new way to open links into another tab/windows by using a custom XSL file, without any programming skills or tools.

Remarks

There are many articles on the internet that are demonstrating the use of custom applications, JavaScript or programming languages. Other articles are referring to other type of links. (see References section)

Tested in SharePoint Server 2013 and SharePoint online from Office 365.

How it works

 

  1. Create a default Links app (Add an app, select Links, type the name example Links and press Ok).
  2. Open site contents, Site Assets, and upload the XSL file.
  3. Copy the shortcut of uploaded xsl file into your clipboard.
  4. Edit your page and insert Links App part.
  5. Check the webpart from page and select Web part Properties from Ribbon.
  6. From the right side expand Miscellaneous and paste your clipboard into the XSL Link text box and click Apply

How to add the XSL as XSL Link for Links App

Press Ok and Save the page.

XSL File

The file could be downloaded from Technet Gallery from the address:  https://gallery.technet.microsoft.com/Open-SharePoint-Links-into-76550ff1

<?xml version=”1.0″ encoding=”UTF-8″?>
<!–
#Project: Open Links in New Tab v1
#Author: Valy Greavu, MVP
#Date: 2014-11-26
#Version comment:
1:-
–>

<!– XLS Link SharePoint Definition –>
<xsl:stylesheet xmlns:x=”http://www.w3.org/2001/XMLSchema”
        xmlns:d=”http://schemas.microsoft.com/sharepoint/dsp”
        version=”1.0″
        exclude-result-prefixes=”xsl msxsl ddwrt”
        xmlns:ddwrt=”http://schemas.microsoft.com/WebParts/v2/DataView/runtime”
        xmlns:asp=”http://schemas.microsoft.com/ASPNET/20″
        xmlns:__designer=”http://schemas.microsoft.com/WebParts/v2/DataView/designer”
        xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”
        xmlns:msxsl=”urn:schemas-microsoft-com:xslt”
        xmlns:SharePoint=”Microsoft.SharePoint.WebControls”
        xmlns:ddwrt2=”urn:frontpage:internal”>

    <xsl:output method=”html” indent=”no”/>
    <xsl:template match=”/” xmlns:x=”http://www.w3.org/2001/XMLSchema”>

    <!– Defining variable userd for all records from a Links list –>
    <xsl:variable name=”Rows” select=”/dsQueryResponse/Rows/Row” />
    <!– Display the list as a unsorted list. Also you can choose to create a table. –>   
    <ul>
        <xsl:for-each select=”$Rows”>
            <xsl:variable name=”LinkUrl”>
                <xsl:value-of select=”@URL”/>
            </xsl:variable>   
            <xsl:variable name=”LinkTitle”>
                <xsl:value-of select=”@URL.desc”/>   
            </xsl:variable>
            <li>
                <a href=”{$LinkUrl}” target=”_blank”>
                    <xsl:value-of select=”$LinkTitle” />
                </a>
            </li>
        </xsl:for-each>
    </ul>
    </xsl:template>

</xsl:stylesheet>   
<!– EOF –>

References

Blog la WordPress.com.

SUS ↑