Preview for Smartphones & Tablets Question - Device upda - Sitefinity - General Discussions

Posted by Community Admin on 14-Jun-2013 00:00

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

Posted by Community Admin on 17-Jun-2013 00:00

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

Posted by Community Admin on 18-Jun-2013 00:00

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

Posted by Community Admin on 18-Jun-2013 00:00

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

Posted by Community Admin on 18-Jun-2013 00:00

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>

<div id="toolbar" class="sfMobilePreviewToolbar">

<h1 class="sfPreviewTitle">

<asp:Literal ID="previewTitle" runat="server" Text='<%$Resources:ResponsiveDesignResources, MobilePreviewTitle %>' />

</h1>

<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>

<asp:Literal ID="deviceTitle" runat="server" Text='<%# Eval("Title") %>' />

</a>

</li>

</ItemTemplate>

<FooterTemplate>

</ul>

</FooterTemplate>

</asp:Repeater>

</div>

<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>

<div class="sfDeviceWrapper">

<div id="device-preview-container" class="sfDevicePreviewContainer" style="position:relative;">

<iframe id="device-preview-viewport" frameborder="0">

</iframe>

</div>

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

Posted by Community Admin on 19-Jun-2013 00:00

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.

Posted by Community Admin on 19-Jun-2013 00:00

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

Posted by Community Admin on 20-Jun-2013 00:00

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

Posted by Community Admin on 20-Jun-2013 00:00

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

Posted by Community Admin on 20-Jun-2013 00:00

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

Posted by Community Admin on 24-Jun-2013 00:00

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

Posted by Community Admin on 28-Jun-2013 00:00

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

Posted by Community Admin on 03-Jul-2013 00:00

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

This thread is closed

Preview for Smartphones & Tablets Question - Device upda

All Replies