Reprodução de imagens do Gerenciador de Design do SharePointSharePoint Design Manager image renditions

Saiba como criar uma representação de imagem, como adicioná-lo a uma página e como cortá-la. Uma representação de imagem define as dimensões que são usadas para exibir imagens em sites de publicação do SharePoint. Renderizações de imagem permitem exibir tamanhos diferentes versões de uma imagem em diversas páginas de um site de publicação, com base na imagem de mesma origem. Quando você cria uma representação de imagem, você deve especificar a largura e/ou altura para todas as imagens que usam essa representação de imagem. A renderização de imagens está disponíveis para cada imagem que foi carregada em uma biblioteca nesse conjunto de sites. Por exemplo, designers podem criar uma representação de imagem para exibir imagens em miniatura e outra representação de imagem para exibir imagens de faixa. Quando uma imagem é adicionada a uma página, o autor pode especificar a representação de imagem para usar em que essa imagem. Os autores também podem cortar a representação de imagem para especificar a parte da imagem, use a representação de imagem. O tamanho da imagem correto é exibido quando a página é processada.Learn how to create an image rendition, how to add it to a page, and how to crop it. An image rendition defines the dimensions that are used to display images in SharePoint publishing sites. Image renditions enable you to display differently sized versions of an image on different pages in a publishing site, based on the same source image. When you create an image rendition, you specify the width and/or height for all images that use that image rendition. The image renditions are available for every image that is uploaded to a library in that site collection. For example, designers can create an image rendition to display thumbnail images and another image rendition to display banner images. When an image is added to a page, the author can specify the image rendition to use on that image. Authors can also crop the image rendition to specify the portion of the image to use in the image rendition. The correct image size is displayed when the page is rendered.

Renderizações de imagem permitem que você renderizar uma única imagem de várias maneiras. Uma imagem pode ser exibida em vários tamanhos ou com o corte de diferentes. Na primeira vez que uma imagem é solicitada, SharePoint Server usa a representação de imagem especificada para gerar a imagem. Quando um usuário exibe um site do SharePoint, a versão corretamente dimensionada da imagem será baixada para o computador cliente. Isso reduz o tamanho do arquivo que será baixado para o cliente, o que melhora o desempenho do site.Image renditions enable you to render a single image in multiple ways. An image can be displayed in various sizes or with different cropping. The first time that an image is requested, SharePoint Server uses the specified image rendition to generate the image. When a user views a SharePoint site, the correctly sized version of the image is downloaded to the client computer. This reduces the size of the file that is downloaded to the client, which improves site performance.

Pré-requisitos para o gerenciamento de renderizações de imagemPrerequisites for managing image renditions

Como as representações de imagem têm dependências em outros recursos do SharePoint, certifique-se de que você atende aos pré-requisitos nesta seção antes de executar os procedimentos deste tópico.Because image renditions have dependencies on other features in SharePoint, make sure that you meet the prerequisites in this section before you perform the procedures in this topic. Pré-requisitos incluem:Prerequisites include:

  • Um conjunto de sites de publicação O conjunto de sites onde você está adicionando renderizações de imagem deve ter sido criado usando o Portal de publicação ou o modelo de conjunto de sites do catálogo de produtos. Ou então, recursos de publicação devem ser ativados no conjunto de sites onde você deseja usar a renderização de imagens. Para obter mais informações, consulte Visão geral da publicação para Internet, intranet e sites da extranet na TechNet Library.A publishing site collection The site collection where you are adding image renditions must have been created by using the Publishing Portal or the Product Catalog site collection template. Or, publishing features must be enabled on the site collection where you want to use image renditions. For more information, see Overview of publishing to Internet, intranet, and extranet sites in the TechNet Library.

  • Um cache BLOB configurado O cache BLOB baseado em disco controla o armazenamento em cache de objetos binários grandes (BLOBs), como imagem frequentemente usada, áudio e arquivos de vídeo e outros arquivos que são usados para exibir páginas da Web, como arquivos. CSS e arquivos. js. O cache BLOB deve ser habilitado em cada servidor web front-end em que deseja usar renderizações de imagem. Se o cache BLOB não estiver habilitado, a imagem original sempre é usada. Para obter mais informações, consulte definir configurações de cache para um aplicativo Web na Biblioteca TechNet.A configured BLOB cache The disk-based BLOB cache controls the caching for binary large objects (BLOBs), such as frequently used image, audio, and video files, and other files that are used to display webpages, such as .css files and .js files. The BLOB cache must be enabled on each front-end web server where you want to use image renditions. If the BLOB cache is not enabled, the original image is always used. For more information, see Configure cache settings for a Web application in the TechNet Library.

  • Uma biblioteca de ativos (recomendada) Você pode usar o modelo da biblioteca de ativos para configurar uma biblioteca que facilita a armazenar, organizar e localizar ativos de mídia avançada, como a imagem, áudio ou vídeos arquivos. Para obter mais informações, consulte Configurar uma biblioteca de ativos para armazenar arquivos de imagem, áudio, ou vídeo no Office.com.An asset library (recommended) You can use the Asset Library template to set up a library that makes it easy to store, organize, and find rich media assets, such as image, audio, or video files. For more information, see Set up an Asset Library to store image, audio, or video files on Office.com.

Criar uma representação de imagemCreate an image rendition

Quando uma representação de imagem é criada, o SharePoint cria uma ID exclusiva que identifica a representação de imagem.When an image rendition is created, SharePoint creates a unique ID that identifies that image rendition. Uma imagem é gerada quando SharePoint Server primeiro recebe uma solicitação para a representação de imagem.An image is generated when SharePoint Server first receives a request for the image rendition.

Para criar uma representação de imagemTo create an image rendition

  1. Verifique se a conta de usuário que está executando esse procedimento tem, pelo menos, permissões de Design do site de nível superior do conjunto de sites.Verify that the user account that is performing this procedure has, at minimum, Design permissions to the top-level site of the site collection.

  2. Em um navegador, vá para o site de nível superior do conjunto de sites de publicação.In a browser, go to the top-level site of the publishing site collection.

  3. Escolha o ícone de configurações. Na página Configurações do Site, na seção aparência, escolha Renderizações de imagem.Choose the Settings icon. On the Site Settings page, in the Look and Feel section, choose Image Renditions.

    Observação

    [!OBSERVAçãO] A página de renderização de imagens também pode ser aberta na home page padrão do site de publicação. Na seção sou o Designer Visual, escolha Configurar renderizações de imagem.The Image Renditions page can also be opened from the default home page of the publishing site. In the I'm the Visual Designer section, choose Configure image renditions.

  4. Na página Representações de Imagem, escolha Adicionar novo item.On the Image Renditions page, choose Add new item.

  5. Na página Nova representação de imagem, na caixa nome, digite um nome para a representação. Por exemplo, insira Thumbnail_Small.On the New Image Rendition page, in the Name box, enter a name for the rendition. For example, enterThumbnail_Small.

  6. Nas caixas de texto Largura e Altura, digite a largura e a altura, em pixels, da representação e escolha a opção Salvar.In the Width and Height text boxes, enter the width and height, in pixels, of the rendition, and then choose Save.

Editar uma representação de imagemEdit an image rendition

Quando uma representação de imagem for editada, as novas dimensões entrarão em vigor na próxima vez que a imagem é solicitada. Se houver uma imagem que foi gerada anteriormente a partir da representação de imagem, a imagem seja gerada novamente com as novas dimensões na próxima vez que a imagem é solicitada.When an image rendition is edited, the new dimensions take effect the next time that the image is requested. If there is an image that was generated previously from the image rendition, the image is regenerated with the new dimensions the next time that the image is requested.

Para editar uma representação de imagemTo edit an image rendition

  1. Verifique se a conta de usuário que está executando esse procedimento tem, pelo menos, permissões de Design do site de nível superior do conjunto de sites.Verify that the user account that is performing this procedure has, at minimum, Design permissions to the top-level site of the site collection.

  2. Em um navegador, vá para o site de nível superior do conjunto de sites de publicação.In a browser, go to the top-level site of the publishing site collection.

  3. Escolha o ícone de configurações. Na página Configurações do Site, na seção aparência, escolha Renderizações de imagem.Choose the Settings icon. On the Site Settings page, in the Look and Feel section, choose Image Renditions.

    Observação

    [!OBSERVAçãO] A página de Renderização de imagens também pode ser aberta na home page padrão do site de publicação. Na seção sou o Designer Visual, escolha Configurar renderizações de imagem.The Image Renditions page can also be opened from the default home page of the publishing site. In the I'm the Visual Designer section, choose Configure image renditions.

  4. Na página de Renderizações de imagem, escolha a representação de imagem que você deseja editar.On the Image Renditions page, choose the image rendition that you want to edit.

  5. Na página Editar renderização de imagem, modifique o nome, largura ou altura da representação de imagem.On the Edit Image Rendition page, modify the name, width, or height of the image rendition.

    Observação

Para usar a mesma representação de imagem em todas as Webs dentro do mesmo conjunto de sites, vá para o arquivo de imagem diretamente e edite as renderizações desse local.To use the same image rendition on all webs within the same site collection, go to the image file directly and edit renditions from there.

Adicionar uma representação de imagemAdd an image rendition

Quando você adiciona uma imagem a uma página em um site de publicação do SharePoint, você pode especificar a representação de imagem a ser usado para essa imagem. Quando a página é processada em um navegador, o tamanho da imagem correto é exibido. Você pode especificar a representação de imagem no Editor de Rich Text, em um controle de campo de imagem ou a URL da imagem.When you add an image to a page in a SharePoint publishing site, you can specify the image rendition to use for that image. When the page is rendered in a browser, the correct image size is displayed. You can specify the image rendition in the Rich Text Editor, in an image field control, or in the image URL.

Especificar a representação de imagem, usando o Editor de Rich TextSpecify the image rendition by using the Rich Text Editor

Quando uma imagem é inserida em uma página, você pode especificar a representação de imagem usar para que o tamanho da imagem correto é exibido quando a página é processada. Você pode especificar a representação de imagem no Editor de Rich Text apenas para imagens que são armazenadas no mesmo conjunto de sites como a página que está sendo editado.When an image is inserted in a page, you can specify the image rendition to use so that the correct image size is displayed when the page is rendered. You can specify the image rendition in the Rich Text Editor only for images that are stored in the same site collection as the page that is being edited.

Para especificar uma representação de imagem, usando o Editor de Rich TextTo specify an image rendition by using the Rich Text Editor

  1. Na guia página, escolha Editar.On the Page tab, choose Edit.

  2. Escolha o ícone configurações e, em seguida, escolha Adicionar uma página.Choose the Settings icon, and then choose Add a page.

  3. Na janela Adicionar uma página, insira um nome para a página e, em seguida, escolha criar.In the Add a page window, enter a name for the page, and then choose Create.

  4. Posicione o ponteiro no campo de Conteúdo da página.Place the pointer in the Page Content field.

  5. Na guia Inserir, escolha a imagem e escolha Do SharePoint.On the Insert tab, choose Picture, and then choose From SharePoint.

  6. Localize a imagem que você deseja adicionar à página, selecione a imagem e clique em Inserir. A imagem será exibida em tamanho normal.Locate the image that you want to add to the page, select the image, and then choose Insert. The image will be displayed at full size.

  7. Na guia Design, no grupo Selecionar, escolha Selecionar representação e, em seguida, selecionar uma representação de imagem. A imagem será exibida conforme o tamanho especificado para a representação de imagem.On the Design tab, in the Select group, choose Pick Rendition, and then select an image rendition. The image will display according to the size specified for the image rendition.

    Observação

    [!OBSERVAçãO] O comando Selecionar representação está disponível apenas para imagens que são armazenadas no mesmo conjunto de sites como a página que está sendo editado.The Pick Rendition command is available only for images that are stored in the same site collection as the page that is being edited.

  8. Se você deseja cortar a representação de imagem, escolha Selecionar representação e escolha Editar representações.If you want to crop the image rendition, choose Pick Rendition, and then choose Edit Renditions.

    Para obter mais informações sobre o corte de renderização de imagens, consulte a seção de Corte uma representação de imagem deste artigo.For more information about cropping image renditions, see the Crop an image rendition section of this article.

Especifique a representação de imagem na URL da imagemSpecify the image rendition in the image URL

Você pode especificar a representação de imagem, adicionando os parâmetros RenditionID, largura ou altura para a URL da imagem.You can specify the image rendition by adding the RenditionID, Width, or Height parameters to the image URL.

RenditionID Use o parâmetro RenditionID para especificar o ID da representação de imagem a ser usado.RenditionID Use the RenditionID parameter to specify the ID of the image rendition to use.

Largura Use o parâmetro de largura para especificar a largura, em pixels, da representação de imagem. SharePoint Server tenta localizar uma representação de imagem com a largura especificada. Em seguida, SharePoint Server tenta localizar uma representação de imagem que tenha uma largura maior que a largura especificada. Se houver vários renderizações de imagem que correspondem a esse critério, SharePoint Server usa a representação de imagem com a largura da mais próxima à que foi especificado. Se não houver nenhuma representação de imagem com uma largura que é igual ou maior do que a largura especificada a imagem original é usada.Width Use the Width parameter to specify the width, in pixels, of the image rendition. SharePoint Server tries to find an image rendition with the specified width. Next, SharePoint Server tries to find an image rendition that has a width that is larger than the specified width. If there are multiple image renditions that match this criterion, SharePoint Server uses the image rendition with the closest width to what was specified. If there is no image rendition with a width that is equal to or larger than the specified width the original image is used.

Altura Use o parâmetro de altura para especificar a altura, em pixels, da representação de imagem. SharePoint Server tenta localizar uma representação de imagem com a altura especificada. Em seguida, SharePoint Server tenta localizar uma representação de imagem que tem uma altura maior que a altura especificada. Se houver vários renderizações de imagem que correspondem a esse critério, SharePoint Server usa a representação de imagem com a altura mais próxima à que foi especificado. Se não houver nenhuma representação de imagem com a altura que é igual ou maior do que a altura especificada a imagem original é usada.Height Use the Height parameter to specify the height, in pixels, of the image rendition. SharePoint Server tries to find an image rendition with the specified height. Next, SharePoint Server tries to find an image rendition that has a height that is larger than the specified height. If there are multiple image renditions that match this criterion, SharePoint Server uses the image rendition with the closest height to what was specified. If there is no image rendition with a height that is equal to or larger than the specified height the original image is used.

Width e Height Se tanto o parâmetro de largura e a altura forem especificados, SharePoint Server tenta localizar uma representação de imagem com a especificado largura e altura. Em seguida, SharePoint Server tenta localizar uma representação que for mais próxima a proporção de largura/altura especificada. Se houver várias correspondências, a representação de imagem que tenha a proporção de largura/altura maior mais próxima até atingir o tamanho solicitado for escolhida.Width and Height If both the Width parameter and the Height parameter are specified, SharePoint Server tries to find an image rendition with the specified width and height. Next, SharePoint Server tries to find a rendition that is closest to the width/height ratio specified. If there are multiple matches, the image rendition that has the closest larger width/height ratio to the requested size is chosen.

Observação

[!OBSERVAçãO] Se a URL da imagem inclui o parâmetro RenditionID e os parâmetros Width e Height, os parâmetros Width e Height são ignorados.If the image URL includes the RenditionID parameter and Width and Height parameters, the Width and Height parameters are ignored.

O exemplo a seguir mostra como usar o parâmetro RenditionID:The following example shows how to use the RenditionID parameter:


<img src="/sites/pub/Assets/Lighthouse.jpg?RenditionID=2" />

O exemplo a seguir mostra como usar os parâmetros Width e Height:The following example shows how to use the Width and Height parameters:

<img src="/sites/pub/Assets/Lighthouse.jpg?Width=400&amp;Height=200" />

Especifique a representação de imagem no controle de campo de imagemSpecify the image rendition in the image field control

Um desenvolvedor pode especificar a representação de imagem para usar no controle de campo de imagem. Use a propriedade RenditionId para definir a identificação da representação de imagem. Para obter mais informações, consulte RenditionId.A developer can specify the image rendition to use in the image field control. Use the RenditionId property to set the ID of the image rendition. For more information, see RenditionId.

Corte uma representação de imagemCrop an image rendition

Por padrão, uma representação de imagem é gerada a partir do centro da imagem. Você pode ajustar a representação de imagem para imagens individuais, cortando a parte da imagem que você deseja usar. Por exemplo, se uma foto mostra uma cena farol, mas a representação de imagem não mostrar o farol todo (consulte a Figura 1), você pode alterar a área de imagem selecionadas para que o farol todo seja exibida (consulte a Figura 2).By default, an image rendition is generated from the center of the image. You can adjust the image rendition for individual images by cropping the portion of the image that you want to use. For example, if a photo shows a lighthouse scene but the image rendition does not show the whole lighthouse (see Figure 1), you can change the selected image area so that the whole lighthouse is displayed (see Figure 2).

Figura 1. Representação de imagem originalFigure 1. Original image rendition

Original image rendition

Figura 2. Representação de imagem recortadaFigure 2. Cropped image rendition

Cropped image rendition

Uma representação de imagem pode ser cortada na biblioteca de ativos ou em uma página, sem alterar a imagem original.An image rendition can be cropped in the asset library or on a page, without changing the original image.

Reprodução de imagens pode ser cortada das seguintes maneiras:Image renditions can be cropped in the following ways:

  • Os designers podem cortar uma representação de imagem na biblioteca de ativos. Por exemplo, um designer talvez queira especificar como a imagem é exibida na representação de imagem em miniatura.Designers can crop an image rendition in the asset library. For example, a designer may want to specify how an image appears in the thumbnail image rendition.

  • Os autores podem cortar uma representação de imagem quando eles inserem uma imagem em uma página. Isso permite que eles personalizar a aparência da sua página. Quando um autor corta uma representação de imagem, isso também alterará a representação de imagem para essa imagem. Qualquer pessoa que usa esse representação de imagem vê da imagem cortada.Authors can crop an image rendition when they insert an image into a page. This enables them to customize the look of their page. When an author crops an image rendition, this also changes the image rendition for that image. Anyone who uses that image rendition sees the cropped image.

    Observação

    [!OBSERVAçãO] Um autor pode cortar uma representação de imagem somente quando a imagem original é armazenada em uma biblioteca que esteja no mesmo conjunto de sites como a página que está sendo editado. Por exemplo, em cenários de publicação intersite, um autor pode cortar a representação de imagem, apenas se a imagem está armazenada no mesmo conjunto de sites como o conteúdo do catálogo. Caso contrário, a representação de imagem deve ser cortada na biblioteca de ativos.An author can crop an image rendition only when the original image is stored in a library that is in the same site collection as the page that is being edited. For example, in cross-site publishing scenarios, an author can crop the image rendition only if the image is stored in the same site collection as the catalog content. Otherwise, the image rendition must be cropped in the asset library.

Corte uma representação de imagem na biblioteca de ativosCrop an image rendition in the asset library

Os designers podem cortar uma representação de imagem na biblioteca de ativos.Designers can crop an image rendition in the asset library.

Para cortar uma representação de imagem na biblioteca de ativosTo crop an image rendition in the asset library

  1. Verifique se a conta de usuário que está executando esse procedimento tem permissões de gravação para a biblioteca de ativos onde a imagem está localizada.Verify that the user account that is performing this procedure has Write permissions to the asset library where the image is located.

  2. Em um navegador, vá para a biblioteca de ativos.In a browser, go to the asset library.

  3. Posicione o ponteiro no canto inferior direito da imagem cuja representação que deseja alterar, selecione as elipses ( ) que aparece e, em seguida, escolha Editar representações.Position the pointer in the lower-right corner of the image whose rendition you want to change, select the ellipses ( ...) that appears, and then choose EDIT RENDITIONS.

    Observação

    [!OBSERVAçãO] Você também pode abrir a página Editar representações posicionar o ponteiro sobre a imagem de visualização na biblioteca de ativos e, em seguida, em seguida, selecionando a caixa de seleção que aparece na parte inferior da imagem de visualização. Em seguida, na guia Design, escolha Editar representações.You can also open the Edit Renditions page by placing the pointer over the preview image in the asset library, and then selecting the check box that appears at the bottom of the preview image. Then, on the Design tab, choose Edit Renditions.

    A página Editar representações exibe uma imagem de visualização para cada representação de imagem que é definida no conjunto de sites.The Edit Renditions page displays a preview image for each image rendition that is defined in the site collection.

  4. Localize a representação de imagem que você deseja alterar e clique em clique para alterar.Locate the image rendition that you want to change, and then choose Click to change.

  5. Na janela de Representação de corte, use a ferramenta de imagem para selecionar a parte da imagem que você deseja usar na representação de imagem.In the Crop Rendition window, use the image tool to select the portion of the image that you want to use in the image rendition.

  6. Escolha Salvar.Choose Save.

Se a imagem e a página que estiver sendo editada estiverem no mesmo conjunto de sites, você também pode cortar uma representação de imagem, usando o Editor de Rich Text.If the image and the page that is being edited are in the same site collection, you also can crop an image rendition by using the Rich Text Editor.

Corte uma representação de imagem em uma páginaCrop an image rendition on a page

Os autores podem cortar uma representação de imagem quando eles inserem uma imagem em uma página. Isso permite que eles personalizar a aparência da sua página. Quando um autor corta uma representação de imagem, isso também alterará a representação de imagem para essa imagem. Qualquer pessoa que usa esse representação de imagem vê da imagem cortada.Authors can crop an image rendition when they insert an image into a page. This enables them to customize the look of their page. When an author crops an image rendition, this also changes the image rendition for that image. Anyone who uses that image rendition sees the cropped image.

Para cortar uma representação de imagem em uma páginaTo crop an image rendition on a page

  1. Verifique se a conta de usuário que está executando esse procedimento tem permissões de gravação para a biblioteca de ativos onde a imagem está localizada.Verify that the user account that is performing this procedure has Write permissions to the asset library where the image is located.

  2. Em um navegador, vá para o site do SharePoint que contém a imagem.In a browser, go to the SharePoint site that contains the image.

  3. Na guia página, escolha Editar.On the Page tab, choose Edit.

  4. Selecione a imagem que você deseja cortar.Select the image that you want to crop.

  5. Na guia imagem da faixa de opções, no grupo Selecionar, escolha Selecionar representação e escolha Editar representações.On the Image tab of the ribbon, in the Select group, choose Pick Rendition, and then choose Edit Renditions.

    A página Editar representações exibe uma imagem de visualização para cada representação de imagem que é definida no conjunto de sites.The Edit Renditions page displays a preview image for each image rendition that is defined in the site collection.

    Observação

    [!OBSERVAçãO] O comando Selecionar representação está disponível apenas para imagens que são armazenadas no mesmo conjunto de sites como a página que está sendo editado.The Pick Rendition command is available only for images that are stored in the same site collection as the page that is being edited.

  6. Localize a representação de imagem que você deseja alterar e clique em clique para alterar.Locate the image rendition that you want to change, and then choose Click to change.

  7. Na janela de Representação de corte, use a ferramenta de imagem para selecionar a parte da imagem, use a representação de imagem.In the Crop Rendition window, use the image tool to select the portion of the image to use in the image rendition.

  8. Selecione Salvar.Choose Save.

Excluir uma representação de imagemDelete an image rendition

Quando uma representação de imagem é excluída, essa representação de imagem não é mais gerada para as imagens. Se um site solicita a representação de imagem excluída, a imagem original será retornada.When an image rendition is deleted, that image rendition is no longer generated for images. If a site requests the deleted image rendition, the original image is returned.

Para excluir uma representação de imagemTo delete an image rendition

  1. Verifique se a conta de usuário que está executando esse procedimento tem, pelo menos, permissões de Design do site de nível superior do conjunto de sites.Verify that the user account that is performing this procedure has, at minimum, Design permissions to the top-level site of the site collection.

  2. Em um navegador, vá para o site de nível superior do conjunto de sites de publicação.In a browser, go to the top-level site of the publishing site collection.

  3. Escolha o ícone de configurações. Na página Configurações do Site, na seção aparência, escolha Renderizações de imagem.Choose the Settings icon. On the Site Settings page, in the Look and Feel section, choose Image Renditions.

    Observação

    [!OBSERVAçãO] A página de Renderização de imagens também pode ser aberta na home page padrão do site de publicação. Na seção sou o Designer Visual, escolha Configurar renderizações de imagem.The Image Renditions page can also be opened from the default home page of the publishing site. In the I'm the Visual Designer section, choose Configure image renditions.

  4. Na página de Renderizações de imagem, localize a representação de imagem que você deseja excluir e escolha Excluir.On the Image Renditions page, locate the image rendition that you want to delete, and then choose Delete.

Confira tambémSee also