• Replacing Files in a Sitefinity Document Library

    by Scott Snowden | Feb 03, 2017

    Avoid Multiple Copies of the Same File

    Does this scenario sound familiar?

    • You upload a file
    • You decide to make and edit and update that file
    • You upload the file again (with a new filename like myfile-v2.pdf)
    • Perhaps that cycle repeats because even more edits and uploads take place
    • You now have multiple copies of the same file in your document library
    Unlike your computer, when you add a file with the same name to Sitefinity it does not overwrite the old file with the new file. Instead, you end up with two files in your list that both have the same file name.

    This may seem like counter-intuitive behaviour because you're not used to it, but there are some circumstances where you may not want to overwrite a file with the one that has the same file name. It is a good practice to give your files helpful names, but often with images in particular you end up keeping the default file name that was created by your camera.

    Replace the file

    To avoid multiple copies of the same file in Sitefinity there is an option to explicitly "Replace the file."  Here's how you do this:

    • From the document library or the image library click the file you want to replace
    • On the right side of the properties screen there is a gear icon.
      • For a file this is with the file name
      • For an image this is in the top-right corner of the image preview
    • From this menu choose "Replace the file"
    • Upload your new file
    Here's the screenshot for a replacing a regular file.From the gear icon on the right choose Replace the file

    And, here's the screenshot for replacing an image file.
    Images have the gear icon in the top corder of the preview image

    Benefits of this Approach

    In addition to helping keep your libraries clean and organized, this approach of replacing an existing file will do two helpful things for you:

    1. Any links on your site to the file don't need to be changed.  Those existing links will now open the newest version of the file.
    2. The other existing properties and file name on your website are kept clean. When you replace a file, Sitefinity keeps the original file name. If you replace "myfile.pdf" with one from your computer named "myfile-v2-draft-final-final.pdf", Sitefinity sticks with "myfile.pdf"
  • Responsive Design with Sitefinity Layout Controls

    by Scott Snowden | Feb 02, 2017

    There is a lot you can do with layout controls in Sitefinity and here we're going to look at how you can adjust the behaviour of your page for different screen sizes.

    If you need an introduction to layout controls, check this blog post first.

    Responsive Design Adjustments

    Specifying Which Responsive Rules Apply To A  Page

    Most of the time you do not need to worry about this, but there may be a rare case where you want to completely turn off responsive rules for a page. If you did this then even on a mobile device the regular desktop version of the page would appear.

    As soon as you enter the list of layout controls look to the bottom for the Responsive Layout Settings button

    Settings button highlighted

    From here you can choose which responsive rules apply to the page (or not).
    Choose the options on this screen to select which rules apply (or not).

    Hide or Show Specific Columns for Various Screen Sizes

    You can get more granular with hiding and showing content at certain screen sizes by editing a specific layout control on your page.

    To start, click the Edit link on a layout control on your page.
    The edit button on a layout control will allow the properties to be modified

    At the bottom of the layout properties on the right side of the screen there is now a heading for Responsive design. Click the Change button there to open up additional options for responsive screen sizes.

    Clicking the change button on the responsive design properties gives more otions

    From the new window you can select if a column show appear or be hidden at certain screen sizes

    Note: Hiding a column at a desktop screen size will make that column disappear from the screen you're working on. To show that column again, simply reduce the width of your browser window. When your window size matches a mobile phone for example, the hidden column will appear again.

     

    This screen has options to show or hide columns at different screen sizes

     

  • Organized Document Libraries in Sitefinity

    by Scott Snowden | Jan 22, 2017
    It can be quite frustrating and time consuming if all of your files are stored in one document library, or if one document library gets used extensively resulting in a large file list.

    Organize Your Files with Document Libraries and Subfolders

    Just like organizing files on your computer into folders and subfolders, you can organize documents and files in Sitefinity using Document Libraries and subfolders. Subfolders in Sitefinity are just Document Libraries the live inside another Document Library.

    To get this to work start by going into your Documents & Files in Sitefinity

    Select documents and files from the content menu

    Now, click the button to create a new document library

    Click create a library button

    Give your new document library a name and then make sure to indicate that you want to choose a parent library that this new library will belong to. When you select that choice a new button will appear allowing you to select that parent library.

    Screenshot showing selection of radio button for parent library and the button to make that library choice

    When you click the Select a library button a new window will appear. From here you can choose the parent library and click done. Note that you can nest libraries multiple levels deep just like having folders within folders within folders on your computer.

    Choose the parent library and click done.

    When finished you'll have a well organized list of folders within the parent Document Library.

    Document libraries nested inside a parent document library

    Special Note - You Can Change the Library After Uploading

    So, it is worth admitting that even while composing this blog post, I would forget to switch the library that I wanted these screenshot images to be saved in. Realizing that after the fact is no big deal. Without leaving the blog post editing window I can bring up the image properties and move the image file to the right library.

    From the properties screen (right-click your image or file link and choose properties) click the button at the top labeled Edit all properties (this button is in the middle of the screen when editing a link to a file).

    Edit all properties button is near the top of this window
    The next screen has an option to change the library that the image or file is saved in. Clicking Change here will move the file to a new library. Save your changes by clicking publish on this screen, save on the next screen and then you'll get back to the screen you were working from before.

    The change button near the bottom lets you move the image to a new library

  • Use Sitefinity Layout Controls To Customize Pages

    by Scott Snowden | Jan 20, 2017

    Did you know you can slice up your page layouts very easily using Layout Controls?

    Your page content is not constrained to the content area defined by your page template.

    With Sitefinity Layout Controls you can:
    • Add and customize columns in your content area
    • Assign your own css style names and modify the design
    • Adjust the flow of your content on mobile devices
    To get started, edit a page and click the Layout button in the top right corner of the page.

    Click the layout button to activate layout controls
    You will then get a list of pink(ish) controls that can be dropped on a page just like your content widgets.

    Customize Your Columns

    Add more columns

    By dragging a layout control onto your page you can split your content area in to multiple columns. Sitefinity layout control screenshot

    Nested Controls

    You can also nest your content controls by dropping one inside the other.

    Layout controls can be nested

    Customize the Style of Your Content

    Click Edit to pull up the properties for your layout control.

    The edit button on a layout control will allow the properties to be modified

    Change Column Widths

    The width of each column can be modified. Clicking "Spaces" will also give you options to adjust the padding between columns.

    There is a field allowing you to change the width of each column

    Add Custom CSS Styles

    Clicking Classes & Labels allows you to add your own css class names that get inserted to the html that wraps each column. (Switch back to the list of content widgets and drag a style block onto your page to include your own css.)

    css class names can be added to layout columns

Back to Top Arrow Up