Show pageOld revisionsBacklinksBack to top This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. CKG Edit One of the very powerful features Cyrious Online gives you is the ability to use HTML for formatting in certain places (product descriptions, the page header, promotional area, etc.). Many users find it advantageous to insert links to specific products, images, PDFs, and more. This page gives sample code that you can use for this purpose. <html><div style="margin-left: 20px;"> **Caveat**: While you can use HTML within Cyrious Online, you will need to develop the necessary HTML skills or hire someone who does. Cyrious support does not include training or assisting with your custom HTML, nor are the technicians trained on this. </div></html> The following types of links are commonly used in HTML text that you can insert in Cyrious Online: * Image Assets * Default Images/Icons * Links to Open/Download Documents (PDFs, Excel, Word, etc.) * Links to Open another Web Page * Links to navigate to a specific Product Each of these cases is handled below. <html><div style="margin-left: 20px;"> **Note**: Normally, images and documents you upload in the Images & Documents folders are only available to Employees. Fortunately, you can publish the images so that they are publicly available. In general, you have to publish any image you are showing to a Contacts. See [[digital_asset_manager]] for more information on publishing images and documents. </div></html> ==Embedding Images== To embed an image in HTML, use the **** tag. You can obtain the URL by clicking on the image and choosing **Link to URL**. This will open a pop-up windows with the web address (URL) for that image. {{::image_w_menu.png_width200?nolink&|}} {{::asset_url_popup.png?nolink&|}} By default, you will get the low-resolution version of your uploaded image. This is to ensure you don't negatively impact performance for your customers. If you desire an alternate resolution, you can append a size parameter **?imagesize="XXXX"** to the link. Valid image sizes are: * **thumbnail**: Scaled down so that the largest dimension (height or width) is 180 pixels. If the image is already smaller than this, it is returned without scaling. Suitable for icon rendering. * **lowres**: Scaled down so that the largest dimension (height or width) is 540 pixels. If the image is already smaller than this, it is returned without scaling. Suitable for non-proof rendering of the image. * **highres**: Scaled down so that the largest dimension (height or width) is 1620 pixels. If the image is already smaller than this, it is returned without scaling. Suitable for most on-screen proof rendering. * **asset**: Returns the original uploaded image. No scaling is applied. Sample #1 - Retrieves the default Cyrious logo (yeah!) in the (default) low-resolution. [[code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code format="HTML"]] <code> Sample #2 - Retrieves the default Cyrious logo (yeah!) in high-resolution. [[code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code format="HTML"]] <code> Notes: * Be sure to replace YOURSITE in the URL with one of your valid website addresses. * If an asset is going to be used on multiple websites, Cyrious recommends using your employee website (cyrious-) as the embedded URL. ==Embedding the Default Image== A special URL is provided to access the //**Primary Image**// for a particular item, like a product, your business, a company, and many others. Instead of getting the specific URL for the image, you can request the primary image for a particular type of asset. Sample #1 - Retrieves the default thumbnail for product 142 (you can find the ID by examining the URL in product setup). [[code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code format="HTML"]] <code> Sample #1 - Retrieves your business' default logo. [[code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code format="HTML"]] <code> Sample #3 - Retrieves an employee's default image (you can find the ID by examining the URL in employee setup). [[code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code format="HTML"]] <code> Notes: * Be sure to replace YOURSITE in the URL with one of your valid website addresses. ==Embedding Links to Open/Download Documents (PDFs, Excel, Word, etc.)== To download an asset (document, image, etc.) use the **** tag. You can obtain the URL by clicking on the document and choosing **Link to URL**. This will open a pop-up windows with the web address (URL) for that image. {{::document_w_menu.png_width200?nolink&|}} {{::document_url_popup.png?nolink&|}} Sample #1 - Displays a link called "Sign Up Form" which will open or download the document when clicked. (Depending on the browser settings.) [[code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code format="HTML"]] Sign Up Form <code> Sample #2 - Displays a link called "Sign Up Form" which opens the document in a new window when clicked. [[code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code format="HTML"]] Sign Up Form <code> Sample #3 - Displays a link called "Sign Up Form". Instructs the browser to download it and name it "Your Signup Form.pdf". Not supported on all systems, which may still open in a window. [[code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code format="HTML"]] Sign Up Form <code> ==Embedding Links to Open another Web Page== Sometime you will want to embed a link to another web site. This is often reference information like shipping or installation instructions you may already have on your website. You also use the **** tag for links (just like for downloads). You can determine whether the new window will replace the current one (the default) or it will open in a new tab or window. Sample #1 - Open a linked page and replace the current one. [[code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code format="HTML"]] Great WIKI! <code> Sample #2 - Open a linked page in a new window. [[code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code format="HTML"]] Great WIKI! <code> ==Embedding Links to navigate to a specific Product== One of the nice features in Control is the ability to link directly into the page to order a product. The link for any given product can be found on the first tab of product setup. Embedding a link to a product from a Cyrious Online page is just like embedding a link to any other page ... **with one major caveat!** The link that you insert to the new product needs to be a //relative// link, not an absolute link. Because employees and contacts access the website using different URLs, the web address for these groups is different. If you insert an absolute link it will only work for one of the two groups, and the other will be taken to the login page of the other website! Sample #1 - Relative link to Step Stakes - Product 596 (as identified by the link on the product setup page - your link will be different). [[code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code format="HTML"]] Step Stakes <code> Sample #2 - Relative link to Safety Signs - Product 143 (as identified by the link on the product setup page - your link will be different) by clicking on the default image for the same product. [[code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code_formathtml|code format="HTML"]] <code> =References= Created : {$creationdate} Revision : {$revisiondate} Links [[include_pagepage_componentbacklinks|include page="" component="backlinks"]] linking_to_products_images_and_other_assets.txt Last modified: 2019/01/27 09:38(external edit)