4

I want to create some images to be defined as background images for promoted links. However, I did not find any articles or documentation that define the recommended height and width for these background images. Should I use specific dimensions or it does not matter?

Edit

now i define the following custom style as mentioned on the link you provide link

<style type="text/css">
            div.ms-promlink-body {
                height: 100px;
            }

            div.ms-tileview-tile-root {
                height: 110px !important;
                width: 110px !important;
            }

            div.ms-tileview-tile-content, div.ms-tileview-tile-detailsBox,  div.ms-tileview-tile-content > a > div > span {
                height: 100px !important;
                width: 100px !important;
            }

            div.ms-tileview-tile-content > a > div > img {
                max-width: 100%;
                width: 100% !important;
            }

            ul.ms-tileview-tile-detailsListMedium {
                height: 100px;
                padding: 0;
            }

            li.ms-tileview-tile-descriptionMedium {
                font-size: 11px;
                line-height: 16px;
            }

            div.ms-tileview-tile-titleTextMediumExpanded, div.ms-tileview-tile-titleTextLargeCollapsed, div.ms-tileview-tile-titleTextLargeExpanded {
                padding: 3px;
            }

            div.ms-tileview-tile-titleTextMediumCollapsed {
                background: none repeat scroll 0 0 #002E4F;
                font-size: 12px;
                line-height: 16px;
                min-height: 36px;
                min-width: 97px;
                padding-left: 3px;
                position: absolute;
                top: -36px;
            }

            li.ms-tileview-tile-descriptionMedium {
                font-size: 11px;
                line-height: 14px;
                padding: 3px;
            }

</style>

this have modify the width and height for the prompted links, but it did not modify the tiles images which now became out of layout since only part of the images will be shown as follow:-

enter image description here

6

The promoted links default size is 150x150 pixel. But you can always have bigger/smaller pictures and then manipulate the CSS for the promoted links if you want bigger/smaller tiles.

Change the default tile size in Sharepoint 2013

Edit

Add this to the bottom of the CSS before closing the style tag.

.ms-tileview-tile-content img {
    width:100px!important;
    height:100px!important;
} 

This won't apply on the "Getting started" promoted link webpart as it is using just one picture and uses CSS to position it.

In the example below, my pictures are sizes 150x150px so they won't look good being scaled down to 100px. Better to create the pictures/icons in the size that you want your tiles to be in the first place.

enter image description here

  • can you adivce how did you check the defualt size ? as i tried accessing the "_\15\templete\image" folder to check how the default prompted link is designed but i could not determins which images are being used as the background images for the built-in prompted links.. – john Gu Sep 1 '15 at 15:42
  • 1
    F12 developer tool is your friend.. :) Right now i don't have access to any environment so i can't check but i i would say that the tiles used in the promoted links web part are a part of the web part and not stored in the hive. msdn.microsoft.com/en-us/library/gg699337(v=vs.85).aspx – Christoffer Sep 1 '15 at 15:44
  • can you check my edit to the original question, as i followed the link u provide and it minimize the dimension for the prompted links,, but the tiles images were not modified as they became out of layout ... – john Gu Sep 1 '15 at 22:03
  • 1
    Updated my answer. – Christoffer Sep 2 '15 at 6:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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