Assets Library

What is an asset?

The assets are the files (mainly multimedia files) that you use in your project, like images, videos and sounds. Every time you add an asset in your project for the first time, for example you drag an image file on the stage, PubCoder makes a copy of that file inside the project and processes it, for example creating thumbnail files for an image, to optimize speed and compatibility. From that moment on, that asset will exist in your project file and you will find it in the Assets panel, thus you can safely delete the original file, since the PubCoder project file contains a copy of it. Most importantly, if you need to send a project to a colleague, you can safely send the .pubcoder project file alone, which has everything bundled in: no need to also send zipped linked files like you do in other authoring tools.

PubCoder divides assets in different categories: Images, Audio, Video, Folder, Font, SMIL, Other assets. For supported file formats, see the help pages for the specific objects.

Assets Library

The assets library displays every asset which is actually in your project, and allows to select and edit them. You can always find the assets library in the assets panel on the left of the project window, but it will also be displayed whenever you choose to select an asset, for example if you need to select a project cover from the project inspector among the various images in your library.

The library is divided horizontally into four different areas:

• At the top, a popup menu allows to switch between the different categories of assets (Images, Audio, Video, Folder, Font, …)
• Just below, it presents an area where you can find a preview of the selected asset (if applicable) and some metadata informations. You can click the preview to display it at its original size
• The list of assets takes most of the interface. You can select one or more assets asset and drag on the stage to place them on your layout (if applicable), or right-click (or click the small arrow that appears when hovering over a row) to open a contextual menu (see Working with assets)
• At the bottom of the interface you can find a search box to filter the assets and a plus button to add/import new assets to the library

Importing Assets

To import a file/folder as an asset in PubCoder, just drop in in the assets library or click the plus button. When dropping a file, the software will figure out the right category automatically.

Beside importing files from your desktop, PubCoder offers some integrations to find and get some specific assets from the Internet. Specifically, trying to add Images or Fonts to your project (e.g. using the plus button in assets library or the Insert button in the project window toolbar) will also present an option Import from Internet.

Import Images from Internet

PubCoder includes a remote images browser that allows to search for icons on The Noun Project and for photos on Unsplash and the Google Open Images database. Simply switch the source tab to the correct source (Icons / Photos), then type a search term (in english) and hit enter, and PubCoder will filter images from the right source for you.

To import an image, simply double-click on it to see details - you can even easily copy the creative commons attribution string to include credits in your project - and then click download: your image will be available in PubCoder without the need to leave the application.

Some icons are even available in SVG vector format, this means that you can scale them at whatever size without seeing any pixelated results. Vector icons are labeled with a SVG green badge in the browser so you can easily recognize them.

Import Fonts from Google Fonts

PubCoder is completely integrated with the Google Fonts directory, which offers a collection of fonts licensed under open source licenses that can be used in your projects and embedded in your final exports with no extra costs.

Simply browse the directory in PubCoder, filtering by name or font type to display previews of all fonts, then click one to import the entire font family in your project.

Once downloaded, the fonts will be automatically included in your exports, and PubCoder will also generate the correct CSS to let you use them in the project (this is valid also for font files imported from your desktop)

Working with assets

You can manipulate assets in the library by opening the assets menu, either by right-clicking on an asset or clicking the small down-facing arrow that appears on every row while moving the cursor over it.

Let’s see the various options:

• Rename - Allows to assign a new name to the asset file. This is usually safe, unless using custom code that links to that file via path, in this case the custom code should be fixed manually
• Preview - Opens a preview of the asset at its original size, when possible, using QuickLook technology on Mac and a custom-written viewer on Windows: you can see an image at full size, play a video or listen to an audio asset
• Open in External Editor - Opens the asset in an external application and starts monitoring the file for modifications, that will be automatically applied on your project until you close the Monitoring External Editing window in PubCoder. External editors can be configured in the application preferences, accessible from PubCoder menu on Mac or from the Edit menu on Windows

• Save as… - Allows to save a copy of the assets as a file on your desktop
• Attach Asset - Allows to attach an asset to the exports (see Attaching Assets)
• Update Asset - Rebuilds the asset from its file, reloading its metadata and rebuilding the thumbnails: use this when the file contents do not reflect what you see in the assets library
• Replace Asset… - Allows to replace that asset with another file, meaning that the old file and all its occurrences in your project will be replaced by the new one. This is usually safe, unless using custom code that links to the old file via path, in this case the new file name should match the old one, or custom code should be updated manually to match the new file name
• Remove Asset from Library… - Removes the asset from the library, eventually breaking all references in the project, e.g. if you remove an image that was used in an image object, the image object would stay on the page but to contain no image (a warning for this will be generated when exporting or previewing your project)

Attaching Assets

Usually PubCoder manages assets automatically, including them in your exports only when it is necessary, and sometimes even modifying them while exporting. For example, if your assets library contains 2 images, but you are actually using only one of them in your pages, PubCoder will export only the image you are actually using in the project, reducing the overall size of the export; also, if an image is in a format which is not web-savvy (e.g. Photoshop PSD), it will convert it as necessary (e.g. to PNG).

But this will not work when you reference assets directly in custom HTML, CSS or Javascript code which you may use in your project. In that case, PubCoder does not know that you are actually using the asset, and you will have to “Attach” the asset to your exports manually, otherwise PubCoder will not export it. To attach an asset, use the Attach Asset menu entry in the asset menu (see Working with assets): attached assets will display a “clip” icon in their rows in the Assets Library.

Since attaching assets is useful only to use them via code, the assets menu also include an Attach asset and copy path menu item which will also put the path to the file directly in your clipboard, ready to be pasted in your code.

Analyze Project

Sometimes your assets library can get pretty heavy, containing duplicate assets or other assets that are not used at all in the project but that make the size of your .pubcoder project file unnecessarily big.

You can use the Analyze Project functionality (accessible from the Project menu in the menubar) to find orphaned assets that you are not actually using in your project, duplicated assets (e.g. two identical images with different names) and assets with problematic file names.

The Analyze Project window will analize your project and display a list of those issues, and also display a simple bar graph to let you understand how much space is taken by each kind of files. Just select the issues you want to fix and click Consolidate and PubCoder will automatically remove oprhaned files, merge duplicated assets (that is, keep only one of those asset and relink all objects pointing to the duplicate assets to the original one), and fix wrong file names.