+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / Preview for Smartphones & Tablets Question - Device update

Preview for Smartphones & Tablets Question - Device update

13 posts, 0 answered
  1. Eddie
    Eddie avatar
    17 posts
    Registered:
    17 Apr 2013
    14 Jun 2013
    Link to this post
    dear all,

    may i know how to update the device preview such as iphone 5 in  Preview for
    Smartphones & Tablets ? how does it update the device list ?

    many thanks !

    ec
  2. Grisha 'Greg' Karanikolov
    Grisha 'Greg' Karanikolov avatar
    156 posts
    Registered:
    30 Nov 2016
    17 Jun 2013
    Link to this post
    Hello Eddie,

    More devices can be added to the "Preview for Smartphones & Tablets" screen. This is done through the Administration->Settings->Advanced->ResponsiveDesign->PreviewDevices

    You can add new devices there, specifying the various device specs. The most important thing for you here is to put a relative Viewport Width and Height, that would correspond to the screen of the device you'd like to start previewing in.

    Regards,
    Grisha 'Greg' Karanikolov
    Telerik
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Eddie
    Eddie avatar
    17 posts
    Registered:
    17 Apr 2013
    18 Jun 2013
    Link to this post
    Hi Grisha,

    Thank you very much for your information. I have checked that we can add the PreviewDevices by our own. We will need to input the screen size detail. What about the "outlook" of the device ? For example, the current iphone 4 preview device also show the iphone 4 device outlook and likewise to other devices. If I add iphone 5 with new screen size in the PreviewDevice section. What should we do for the device outlook ?

    many thanks !

    rgds,

    ec
  4. Eddie
    Eddie avatar
    17 posts
    Registered:
    17 Apr 2013
    18 Jun 2013
    Link to this post
    Hi Grisha,

    Thank you very much for your information. I have checked that we can add the PreviewDevices by our own. We will need to input the screen size detail. What about the "outlook" of the device ? For example, the current iphone 4 preview device also show the iphone 4 device outlook and likewise to other devices. If I add iphone 5 with new screen size in the PreviewDevice section. What should we do for the device outlook ?

    many thanks !

    rgds,

    ec
  5. Grisha 'Greg' Karanikolov
    Grisha 'Greg' Karanikolov avatar
    156 posts
    Registered:
    30 Nov 2016
    18 Jun 2013
    Link to this post
    Hi Eddie,

    After sending you the initial reply I tried exactly that. I thought "okay, so how do you actually set in the image of the device I need in there?". I inspected the code of the other devices. It seems like the images for iPhone, iPad and so on are inserted via CSS:
    .sfDeviceIcon { margin: 0 auto; position:relative; top:11px; }
    .sfIPhone4 .sfDeviceIcon { width:25px; height:48px; background: transparent url(<% = WebResource("Telerik.Sitefinity.Resources.Templates.Backend.ResponsiveDesign.Devices.iPhone4_thumbnail.png") %>) no-repeat 0 0; }
    .sfHtcHd2 .sfDeviceIcon { width:25px; height:48px; background: transparent url(<% = WebResource("Telerik.Sitefinity.Resources.Templates.Backend.ResponsiveDesign.Devices.hd2_thumbnail.png") %>) no-repeat 0 0; }
    .sfHtcIncredible .sfDeviceIcon { width:25px; height:48px; background: transparent url(<% = WebResource("Telerik.Sitefinity.Resources.Templates.Backend.ResponsiveDesign.Devices.htc_incredible_thumbnail.png") %>) no-repeat 0 0; }
    .sfIPad2 .sfDeviceIcon { width:25px; height:48px; background: transparent url(<% = WebResource("Telerik.Sitefinity.Resources.Templates.Backend.ResponsiveDesign.Devices.iPad_thumbnail.png") %>) no-repeat 0 0; }
    .sfSamsungGalaxyTab .sfDeviceIcon { width:25px; height:48px; background: transparent url(<% = WebResource("Telerik.Sitefinity.Resources.Templates.Backend.ResponsiveDesign.Devices.galaxy_tab_thumbnail.png") %>) no-repeat 0 0; }
      
    .sfDevicePreviewContainer { margin: 20px auto 0; }
    .sfDevicePreviewContainer iframe { position:relative; overflow: auto; }
    .sfDeviceWrapper .sfIPhone4 { background: transparent url(<% = WebResource("Telerik.Sitefinity.Resources.Templates.Backend.ResponsiveDesign.Devices.iphone4_full_device.png") %>) no-repeat 0 0; }
    .sfDeviceWrapper .sfHtcHd2 { background: transparent url(<% = WebResource("Telerik.Sitefinity.Resources.Templates.Backend.ResponsiveDesign.Devices.hd2_full_device.png") %>) no-repeat 0 0; }
    .sfDeviceWrapper .sfHtcIncredible { background: transparent url(<% = WebResource("Telerik.Sitefinity.Resources.Templates.Backend.ResponsiveDesign.Devices.htc_incredible_full_device.png") %>) no-repeat 0 0; }
    .sfDeviceWrapper .sfIPad2 { background: transparent url(<% = WebResource("Telerik.Sitefinity.Resources.Templates.Backend.ResponsiveDesign.Devices.ipad2_full_device.png") %>) no-repeat 0 0; }
    .sfDeviceWrapper .sfSamsungGalaxyTab { background: transparent url(<% = WebResource("Telerik.Sitefinity.Resources.Templates.Backend.ResponsiveDesign.Devices.galaxy_tab_full_device.png") %>) no-repeat 0 0; }
      
    .sfDeviceWrapper .sfIPhone4_landscape { background: transparent url(<% = WebResource("Telerik.Sitefinity.Resources.Templates.Backend.ResponsiveDesign.Devices.iphone4_full_device_landscape.png") %>) no-repeat 0 0; }
    .sfDeviceWrapper .sfHtcHd2_landscape { background: transparent url(<% = WebResource("Telerik.Sitefinity.Resources.Templates.Backend.ResponsiveDesign.Devices.hd2_full_device_landscape.png") %>) no-repeat 0 0; }
    .sfDeviceWrapper .sfHtcIncredible_landscape { background: transparent url(<% = WebResource("Telerik.Sitefinity.Resources.Templates.Backend.ResponsiveDesign.Devices.htc_incredible_full_device_landscape.png") %>) no-repeat 0 0; }
    .sfDeviceWrapper .sfIPad2_landscape { background: transparent url(<% = WebResource("Telerik.Sitefinity.Resources.Templates.Backend.ResponsiveDesign.Devices.ipad2_full_device_landscape.png") %>) no-repeat 0 0; }
    .sfDeviceWrapper .sfSamsungGalaxyTab_landscape { background: transparent url(<% = WebResource("Telerik.Sitefinity.Resources.Templates.Backend.ResponsiveDesign.Devices.galaxy_tab_full_device_landscape.png") %>) no-repeat 0 0; }

    There is a field in the backend that allows you to specify which CSS class should be used, but there isn't a place where you actually specify the CSS file itself, nor can you directly add CSS code anywhere.
    The solution to this is to change the Preview page template.

    Here's the original code of the Telerik.Sitefinity.Resources.Templates.Backend.ResponsiveDesign.MobilePreviewView.ascx template:

    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
     
    <sf:ResourceLinks id="resourcesLinks2" runat="server" UseEmbeddedThemes="true" Theme="Default">
      <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Templates.Backend.ResponsiveDesign.MobilePreview.css" Static="true" />
    </sf:ResourceLinks>
     
    <!-- toolbar which provides functionality for choosing the device -->
    <div id="toolbar" class="sfMobilePreviewToolbar">
        <h1 class="sfPreviewTitle">
            <asp:Literal ID="previewTitle" runat="server" Text='<%$Resources:ResponsiveDesignResources, MobilePreviewTitle %>' />
        </h1>
        <!-- devices -->
        <asp:Repeater ID="devicesRepeater" runat="server">
            <HeaderTemplate>
                <ul class="sfPreviewDevices sfInlineBlock">
            </HeaderTemplate>
            <ItemTemplate>
                <li>
                    <a class="sfPreviewDeviceButton" data-sf-deviceName='<%# Eval("Name") %>'>
                        <div class='<%# "sfPreviewDeviceIconWrapper " + Eval("CssClass") %>'>
                            <div class="sfDeviceIcon">
                            </div>
                        </div>
                        <asp:Literal ID="deviceTitle" runat="server" Text='<%# Eval("Title") %>' />
                    </a>
                </li>
            </ItemTemplate>
            <FooterTemplate>
                </ul>
            </FooterTemplate>
        </asp:Repeater>
        <!-- end devices -->
    </div>
    <!-- end toolbar -->
     
    <!-- portrait / landscape buttons -->
    <div class="sfPortraitLandspaceButtons">
        <a id="mobile-preview-portrait-button" href="#">
            <asp:Literal ID="portraitButton" runat="server" Text='<%$Resources:ResponsiveDesignResources, Portrait %>' />
        </a>
        |
        <a id="mobile-preview-landscape-button" href="#">
            <asp:Literal ID="landscapeButton" runat="server" Text='<%$Resources:ResponsiveDesignResources, Landscape %>' />
        </a>
    </div>
    <!-- end portrait / landscape buttons -->
     
    <!-- device preview -->
    <div class="sfDeviceWrapper">
        <div id="device-preview-container" class="sfDevicePreviewContainer" style="position:relative;">
            <iframe id="device-preview-viewport" frameborder="0">
            </iframe>
        </div>
    </div>
    <!-- end device preview -->

    All you need to do is simply attach a CSS link which would also contain your image in there, similarly to the CSS attached above.

    This blog post will help you switch the original template with the one you've created using ViewMap.

    Hope this helps!

    Regards,
    Grisha 'Greg' Karanikolov
    Telerik
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Tom
    Tom avatar
    17 posts
    Registered:
    11 Jun 2013
    19 Jun 2013
    Link to this post
    Hi all,
    I also work on same problem. And i also following the blog post to do it. But it always alert me that
    "Value cannot be null. Parameter name: key".
    So i would like to ask about the host type of the preview or where can i check the host type of other function?
    And from your css, i think there are some image file use in the css.
    Where can i find those image?


    Thanks.
  7. Grisha 'Greg' Karanikolov
    Grisha 'Greg' Karanikolov avatar
    156 posts
    Registered:
    30 Nov 2016
    19 Jun 2013
    Link to this post
    Hi Tom,

    The HostType you need to use in this case is

    Telerik.Sitefinity.Modules.ResponsiveDesign.Web.MobilePreviewView 

    Apparently, for HostTypes which you can't obtain otherwise (for widgets, the host types are typically enclosed in the "Advanced" properties screens), you should turn to Sitefinity support to help you out there.

    The images that are used in the CSS file I enclosed are built-in resources within Sitefinity. I've attached a ZIP file with these images here if you really need them.

    Let me know if that helps!

    Regards,
    Grisha 'Greg' Karanikolov
    Telerik
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Tom
    Tom avatar
    17 posts
    Registered:
    11 Jun 2013
    20 Jun 2013 in reply to Grisha 'Greg' Karanikolov
    Link to this post
    Thanks Grisha.

    After i unziped the WidgetTemplate.zip file and i modified the MobilePreviewView.acsx file.  Which location i should use for the new acsx file to import?
    i had try use to use
    "~/Resources/WidgetTemplates/Templates/Backend/ResponsiveDesign/MobilePreviewView.acsx"
    and put the css file in same folder.
    But still alert me that "Value cannot be null. Parameter name: key".So would you tell me the right location that i need to use?

    And also i would like to ask does those device css class is using in same css file which from your post?
    Tom
  9. Grisha 'Greg' Karanikolov
    Grisha 'Greg' Karanikolov avatar
    156 posts
    Registered:
    30 Nov 2016
    20 Jun 2013
    Link to this post
    Hi Tom,

    You are not forced to follow that whole path structure, you can easily go for "~/CustomTemplates/MobilePreviewView.acsx" or anything else for that matter, as long as the path corresponds to the actual location of your .ascx template. The CSS file I attached was an example how we have styled the page to show all the emulator devices that are already in there.

    You can create a new .css file, add the styling for the new device and reference that .CSS in your custom .ascx template. That should do it!

    Where exactly are you getting the error?

    Regards,
    Grisha 'Greg' Karanikolov
    Telerik
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Tom
    Tom avatar
    17 posts
    Registered:
    11 Jun 2013
    20 Jun 2013 in reply to Grisha 'Greg' Karanikolov
    Link to this post
    Thanks Grisha.

    The error will appeat  when I click the save button after i entered the HostType and LayoutTemplatePath.
    And i also attach a image file which is about the error.


    Also i still have some question of layout path.
    Since my project folder is not inside the sitefinity folder. So when i want to add a file, i need to put in the project folder or put it into the sitefinity folder?


    Tom
  11. Grisha 'Greg' Karanikolov
    Grisha 'Greg' Karanikolov avatar
    156 posts
    Registered:
    30 Nov 2016
    24 Jun 2013
    Link to this post
    Hi Tom,

    I'm unable to reproduce the problem, so I'm presuming it might be something related to your project. I would recommend posting a ticket to our support team to obtain some assistance, related specifically to your environment.

    Just make sure you haven't added some unnoticed space there :-)


    Regards,
    Grisha 'Greg' Karanikolov
    Telerik
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  12. Tom
    Tom avatar
    17 posts
    Registered:
    11 Jun 2013
    28 Jun 2013
    Link to this post
    Thank Grisha,


    Now i can create it.
    But there are another problem happen.
    When i go to mobile preview page, the webpage are broken. All the css and image are disappear. So did i missing some thing?

    Thanks.
    Tom

  13. Grisha 'Greg' Karanikolov
    Grisha 'Greg' Karanikolov avatar
    156 posts
    Registered:
    30 Nov 2016
    03 Jul 2013
    Link to this post
    Hi Tom,

    Could you send over a screenshot and/or preferably a copy of your project?
    Please contact me directly at "greg at telerik dot com"

    Regards,
    Grisha 'Greg' Karanikolov
    Telerik
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
13 posts, 0 answered