Tip: working with images in Decor tab creator

While using Decor’s easy drag and drop interface to design your Facebook tab, you might have noticed that the two modes, tab and mobile, helps you to design the page in both desktop and mobile views respectively. In a usual way, while designing the page in tab mode, you might have used a background image. After inserting a background as per your design in tab mode, once if you switch it to the mobile mode to change the components for best mobile view, sometimes you might have noticed that, the background might not fit to the contents. Well, in decor tab creator interface, there are several options to change an image as per your need.

Let us explain you these modes in detail that helps you to change, edit, adjust and add an image easily.

In decor tab creator, you can add an image by choosing the image component which is presented in the top right corner of the system as shown in the figure below.

img-upload
To upload an image you have to add the component into the design space and choose a file to upload. You can upload a picture directly from your computer,  your library and also from your Facebook albums. After uploading an image into the system, if you want to change the way it fits, there are some few options. Once you right click on the image, you can see some options which are relevant to the image component. Those options are listed as follows:

  • Change Picture
  • Fit to content
  • Image Mode
  • Fit within layer
  • No scaling
  • Repeat down and right
  • Repeat right
  • Repeat down
  • Crop Image
  • Edit Image

Change Picture

If you have already uploaded an image  and wants to replace it, decor has a feature to change a picture. This feature allows you to replace a currently existing one with another. This can be done by right clicking on the image component and you can see the first option which says change image, where we can replace the existing image. You can even find the same option on the image layer in the right side panel.

change-picture

Fit to content

This option helps you to reset back the selectors of the image to content. Right click on the image and you will find the option. Once you choose the option, the selectors will fit to the image content as shown in the images.

fit-to-content

fit-to-content

Image mode

This option helps you to change the mode of the image and are discussed in the below sections that will help manage the image scaling with in the design.

image modes

Fit within layer

This mode helps an image to fit within the boundaries. You can select this option by right click-image mode- fit within layer. After choosing the option, you can see the difference right-away by switching the modes in between mobile and tab.

No scaling

As the name suggests, the image retains its original size and does not shrink or expand when you try to do that. Whatever the mode is, the image remains unchanged when we used this option.

Repeat down and right

This option helps the image to repeat in down and right directions in both modes which in turn tries to fill the space in a whole.

Repeat right

This option helps the image to repeat in right direction only in both modes.

Repeat down

This option helps the image to repeat in the bottom direction only in both modes.

Crop Image

This option is very handy , helps to  easily crop an image as per your need. If you reduced the image size from the original ratio, this feature appears.

crop-image

Tip: If you want to undo an action, you can simply use control and Z keys from your keyboard at a time just like you usually do in a normal word preprocessor like wordpad and ms office.

 

Edit Image:

After uploading an image, if you want to edit it online, you can do it with decor app creator. In order to do that, you need to select the image component, you are willing to edit, right click on it and select Edit Image option. A new popup will appear and you can see an environment that will provide you to edit your image as you like which is shown in the image below.

imagesediting


How to clear facebook share cache

Once in a while you might have noticed when you tried to share a news story from an external link into Facebook and realized that the auto populated data is not what it is to be. To be precise, when you tried to share a link in Facebook, there is no picture preview that is supposed to be and sometimes the description, title are not the same as it is. This is the problem of caching mechanism in Facebook. This article provides some insights and comes up with a solution of how to overcome this issue.

 

Usually Facebook parses some open graph tags as meta tags in the page. An open graph tag looks like:

<meta property=”og:tag name” content=”tag value”/>

These meta tags uses the values of the tags such as  <og:image> in the share dialog box. If an image with same height and width is not specified, Facebook uses a random image from the shared link as a thumbnail display. So, once you share a page, Facebook caches its content for at most 7 days.

 

There are two ways to solve this issue. One, by using the Facebook debug tool and the other , by using the Facebook sharer link.

Using debugging tools

  1. Login into your Facebook account and go to https://developers.facebook.com/tools/debug
  2. Input the URL you wanted to share on your profile or page wall.
  3. Click the “Fetch new scrape information”.

sharer_facebook_scrape_post

 

Using Facebook Sharer tool

  1. Login into your Facebook account
  2. Go to https://www.facebook.com/sharer/sharer.php
  3. Input the URL you wanted to share on your profile or page wall
  4. Click “Share” Button

sharer_facebook_scrape_post


Scroll to Top