Hints and Tips for the Lenovo Press CMS

These are the steps you'd take to insert an image into a document.

Extract from Word

If the image you want is in Word, follow these steps to extract the image:

1. In Word, right click the image and click Size and Position
2. In the dialog box, click the Reset button to reset the size to 100% and click OK. If you don't reset to 100% then the image you extract will not be the original resolution.
3. Right click the image and click Save Picture As.
4. Select a folder and ensure the Save type is PNG.
5. Enter a meaningful name, eg the caption of the figure
6. Click OK to save the image.

Insert the image into the CMS

Now follow these steps to upload the image and insert it into the document:

1. In the CMS, put the cursor on a blank line (empty paragraph)
2. Click the Image icon in the editor icon bar
3. Copy paste the caption from the Word document into the Alternate Text field, or otherwise type in some summary text into this field. The alt text is used by vision-impared visitors to the web site and is required.
4. Click the Browse Server button
5. In the dialog that appears, navigate to the folder for the document (hint: use Ctrl-F and search for LPxxxx). If a folder doesn't exist, then right click on the Image parent directory to create a new folder. Name it the document number LPxxxx (uppercase LP).
6. With the document folder selected, click the Upload button
7. Click Browse and navigate to the folder where you have the PNG file, then click OK
8. Click Upload Selected File.
9. The file is now uploaded. Find the file in the amongst all the thumbnail. If you can't find the file visually, use Ctrl-F to search on the file name. (Hint: If you single click the image, you'll see the full filename at the bottom of the window.)
10. Double click the thumbnail to select the image
11. Back in the Image properties dialog, if the image is bigger than 615px, then change the Width to a number smaller than 615 (eg 600). The Height should automatically change to keep the ratio, provided the padlock icon is closed (click to close it if it is open)
12. Copy the URL to the Link tab - this will enable the image to be clickable
13. Click OK to close the dialog. The image should now appear in the document.
14. Optionally add a border around the image by double clicking the image to open the Image Properties dialog, go to the Advanced tab, and add the following text after the width and height styles:
    border:2px solid rgb(0,0,0);

Add the caption

Follow these steps to add the caption:

1. Select the image with a single click
2. Press the End key to move the cursor to the right edge of the image
3. Press Shift-Enter to add a line break. The cursor should now be immediately below the image. (Hint: This adds a <br /> to the code)
4. Enter the following text followed by the caption text. This ensures a figure caption with an automatic figure number.
   Figure {counter name="figure"}. Caption goes here

Enable Fancybox

Follow these steps to enable Fancybox - useful if the original image is larger than 615px wide:

1. If you didn't previously, double-click the image to open the Image properties dialog, and copy the URL to the field in the Link tab - this will enable the image to be clickable.
2. Select the image again and click the Source button
3. Find the <a> (anchor) tag that surrounds the <img> (image) tag and add the following parameters to the <a> tag - this enables FancyBox on the clickable image:
   data-fancybox="all" data-caption=""
4. In the data-caption parameter, paste/type in the figure caption - this text is displayed below the image when the visitor clicks the image.

Here are special classes that are useful for our documents.

<ul class="tight">

<ul class="tight flush">

<ul class="loose">

<h3 class="break-before">

<div class="break-avoid">
    <p>These two paragraphs should be kept together</p>
    <p>2nd paragraph</p>
</div>

<tr class="withdrawn">
    <td>4XC7A08264</td>
    <td>B5SW</td>
    <td>ThinkSystem Marvell QL41232 10/25GbE 2-Port Adapter</td>
    <td>1</td>
</tr>

<div class="callout">
    <p><b>Riser 3 support</b>: The use of the onboard NVMe ports 
    is mutually exclusive with Riser 3.</p>
</div>

<img class="img-right" ... >

<pre class="nowrap">
This text will wrap if needed when displayed as a web page</pre>

Some useful code for tables.

• Table starter code
• Shading in table cell
• Table heading with rotated text
• Tables with small text
• Table footnote

Table starter code

Use this code to start a table.

<div class="scroll-y">
<table class="table table-bordered">
<caption>Table {counter name="table"}. Table code</caption>
<thead>
<tr>
<th width="15%">Part number</th>
<th width="15%">Feature code</th>
<th>Description</th>
</tr>
</thead>
<tbody>
... rows here... use the TBLR Chrome tool
</tbody>
</table>
</div>

Tips:

• The TBLR tool ("tabler") is an excellent way to create the rows of a table from Excel. There is also a Chrome app which allows you to run tblr as a standalone Windows program.
• The width parameters in the heading row are good on part number tables to ensure that the column spacing is consistent throughout a product guide. This looks better in my opinion. For other tables, consider removing/adjusting these width parameters. The browser will figure out the widths of the other columns to make everything fit on page, so you don't have to hard-code all 100%.
• The scroll-y class is to ensure that a wide table is viewable even on a small screen such as a phone. Make sure you have this as a div.
• The use of {$block_title} for the caption is a timesaver if your block only has one table in it. Otherwise, you should change it.

Shading in table cell

Use this for heading rows throughout a table, or use it to highlight support (eg all cells with "Yes" or "Supported")

<td bgcolor="#c0c0c0">Yes</td>

Colors I use for table cells:

• Grey: #c0c0c0
• Green: lightgreen
• Blue: lightskyblue
• Yellow: #FFFF75

Storage tables:

• SATA (blue): #87CEEB
• AnyBay (purple): #af7ac5
• NVMe (red): #FF6347

Support tables:

• All supported (green): #00FF00
• Partial (yellow): #FFFF00
• Partial (orange): #FFA500

If you need to use 2 colors in a table, consider using green and blue

Table heading with rotated text

Use this code if you want text to be rotated. Note that the text has to be wrapped inside a div. The default height is 75px which is the minimum and the height will automatically adjust in the browser (via Javascript) to fit the text.

Use a style override to force the height. You can specify a larger height but not a smaller height that 75px.

use rotate-tight to force columns with a narrower width (16px width).

<th class="rotate"><div>VGA port</div></th>
<th class="rotate" style="height:210px;"><div>VGA port</div></th>
<th class="rotate-tight"><div>VGA port</div></th>

Tables with small text

Tables use 10pt font by default. For really complex tables, you might want to switch to a small font size so that more text can fit without extending the length of the table. Do this by adding the table-smalltext class to the table tag. This only affects the PDF; ignored by the web version.

<table class="table table-bordered table-smalltext">

Table footnote

A table footnote is a paragraph that is flush up against the bottom of a table. Normally, a paragraph after a table has space between them, so this class removes the space.

The trick is that the <p> tag has to be placed directly after the </table> end tag.

... table code
</table>
<p class="table-footnote">* Not supported in Slot 3</p>
</div>

Here are HTML snippets that are sometimes useful.

• Keeping words together on the same line
• Special characters
• Space between list item and indented p
• Convert a link to a button
• Tooltips
• Code block

Keeping words together on the same line

Use &nbps; (non-breaking space) or use a style override.

Keep this 1 Gb unit together
<span style="white-space:nowrap">These words stay together</span>
<td style="white-space:nowrap">This cell won't break</td>

Special characters

Note that they all start with an & and end in a semicolon ;.

• &micro; = µ
• &deg; = ° degree symbol
• &dagger; = †
• &Dagger; = ‡
• &sect; = §
• &curren; = ¤
• &nbsp; = non-breaking space
• &#8209; = non-breaking hyphen ‑

If you're looking for more symbols, &what; ("amp-what") is a good resource

Space between list item and indented p

By default, if you have a paragraph inside a list item, there won't be a space between the two. Also, the two might break badly in the PDF. Add the following styles to fix:

<li class="break-avoid">Here is our list item
<p style="margin-top:10px;">This is the indented paragraph</p>
</li>

Convert a link to a button

Bootstrap provides these buttons:
https://getbootstrap.com/docs/4.0/components/buttons/

class="btn btn-primary" on the <a> tag turns the content into a blue button

Clickable blue button:

<p><a class="btn btn-primary" href="https://lenovopress.com/ds0091">Read the datasheet</a></p>

Output:

Read the datasheet

Tooltips

Tooltips are messages that appear when you hover over a link or text. Add to a span or td or anchor tag.

For details see this page:
https://getbootstrap.com/docs/4.0/components/tooltips/

Example:

<span data-toggle="tooltip" data-placement="top" title="This is the tooltip text">Hover over me!</span>

Output:

Hover over me!

Direction choices are top, right, bottom, and left. Top is the default.

The title can include HTML code but you need to add data-html="true".

Code block

To display lines of text as code use <pre><code>...</code></pre>

#include 
int main() {
   // printf() displays the string inside quotation
   printf("Hello, World!");
   return 0;
}

Use smarty comments instead of HTML comments, because smarty comments don't appear in the HTML stream and therefore can't be viewed by the end user who happens to be snooping around in the HTML code of the page.

HTML comments can only be added in Source mode and are not visible in Normal mode.

<!-- this a comment in HTML -->

Smarty comments can be added in either Source or Normal mode, so they are always visible in the CMS (but not published).

{* this is a smarty comment *}

You can use smarty comments to hide an entire row. The trick is the placement of the opening and closing comment markup - either both in cell 1 (row to be hidden + the following row) or both in the last cell (preceding row + the row to be hidden).

Example 1 - Hides the first row:

Example 2 - Hides the last row:

Tip: I will often put some additional text in the smarty comment as a visual reminder that the row is hidden. I mark that reminder in red text (using the red A button in the editor).

Add the following code to the Smarty block in the Document Info tab in any product guide, especially server product guides

{assign var=system_name value="ThinkSystem SR650 V2" scope="root"}
{assign var=system_name_short value="SR650 V2" scope="root"}
{assign var=machinetype_1year value="7Z72" scope="root"}
{assign var=machinetype_3year value="7Z73" scope="root"}
{assign var=machinetype_hana value="7D15" scope="root"}
{assign var=machinetype_nowarranty value="" scope="root"}

The following smarty code snippets are useful

The use of if/then Smarty code is very powerful and a real time saver, especially in conjunction with shared library blocks. You can display content based on the $system_name_short variable, for example, which means that a library block can be shared across multiple documents, even if that content needs to change slightly from one document to another.

Smarty help: https://www.smarty.net/docsv2/en/language.function.if.tpl

If statements

<!--{if in_array($system_name_short, ['ST50 V2','ST250 V2','SR250 V2']) }-->
Display something only for these three servers.
<!--{else}-->
Display something for all other servers.
<!--{/if}-->

For the above, you can add not after the if to to the logical opposition of the boolean expression.

Use <!--{elseif}--> to add additional if clauses.

Logical and / or

Use && for logical and and || for logical or. Also: and and or work too.

isset - checks if a variable is set

Use along with an and to only do something if the variable is set and matches a certain value:

{if isset($no_emr_support) and in_array($system_name_short, $emr_support)}
Do something if variable no_emr_support is set and system_name_short is in the array
{/if}

String operations

Use strstr to do a needle/haystack check. The code below checks if variable $system_name_short contains the string "V3":

<!-- {if $system_name_short|strstr:"V3"} -->
Display something only if the server name has "V3" in it.
<!--{/if}-->

Use substr to extract characters from a given position in a string. The first number is the starting position (0 = character 1) and the 2nd number is the length of the string to be returned. Note that "4" as the starting position means the character in the 5th position.

{if $system_name_short|substr:4:1 eq "5"}
This an AMD server, since the 1 character in the 5th position is a 5 (1st character = 0)
{/if}

To get the first n characters from a string, use truncate. Eg to get the first 5 characters:

{$system_name_short|truncate:5}

Array variable

Use the following code to assign a set of strings to an array variable:

{assign var=feature_BFYA value=['SR635','SR655','SR645','SR665'] scope="root"}
...
{if in_array($system_name_short, $feature_BFYA)}

Combining array variables

Use the array_merge function to combine array variables:

{assign var=tatlow value=['SR250 V2', 'ST250 V2', 'ST50 V2']}
{assign var=catlow value=['SR250 V3', 'ST250 V3', 'ST50 V3']}
{assign var=all_servers value=array_merge($tatlow, $catlow)}

2D and 3D array variables

Use the following to build an array of data.

Note: These assign vars need to be in HTML comments otherwise the => will get escaped to &gt;

Lookup with single result:

{assign var=tour_doc value=['SE350 V2'=>'LP1751','SE360 V2'=>'LP1752']}
...
<p>The tour_doc is {$tour_doc[$system_name_short]}

Lookup with multiple data output:

{assign var=shipping_dimensions value=[
'ST50 V2'=>['depth'=>420,'width'=>280,'height'=>540],
'SR250 V2'=>['depth'=>860,'width'=>610,'height'=>196]
]}
...
<p>Width: {$shipping_dimensions[$system_name_short].width} mm

These two parameters are added to the <a> tag to enable Fancybox, our lightbox image viewer widget.

<a data-fancybox="all" data-caption=""></a>

Once you add this code to the anchor tag wrapped around an image tag, when the user clicks the image in the document, the image will display centered on the page with the rest of the browser window greyed out (like a photographer's lightbox). Only applies to web pages; Ignored by the PDF generator.

Example:

<a data-caption="Lenovo ThinkSystem {$system_name_short}" data-fancybox="all" href="/assets/images/LP1607/ThinkSystem-SR645-V3.jpg"><img alt="Lenovo ThinkSystem {$system_name_short}" src="/assets/images/LP1607/ThinkSystem-SR645-V3.jpg" style="width:600px;height:116px;" /></a>

Output:

For other Fancybox hints, see https://fancyapps.com/docs/ui/fancybox/

To display an alert banner use the predefined classes, alert and alert-xxxxxx.

• blue = alert-primary
• grey = alert-secondary
• green = alert-success
• red = alert-danger
• yellow = alert-warning

For example:

<p>{if not isset($adapter_fc)}</p>
<div class="alert alert-danger">
<p><strong>Warning</strong>: Variable adapter_fc has not been set.</p>
</div>
<p>{/if}</p>

This produces the following:

Anchor links within the text should be coded with class="alert-link" so that they are colored properly.

For more information, see:
https://getbootstrap.com/docs/4.0/components/alerts/

Use the mailto smarty function to obfuscate the email address from spammers:

{mailto address="example@example.com" encode="javascript_charcode"}

However, the use of javascript won't work in exports to Word. If you need the email address to appear in the Word export then change the encoding to hex:

{mailto address="example@example.com" encode="hex"}

See this page for other parameters:
https://www.smarty.net/docs/en/language.function.mailto.tpl

Use the CMS to activate the blue Configure and Buy buttons in product guides and other documents. The process is two high-level steps:

1. Define the URLs for each product, one per e-commerce enabled market. This is done in the E-COMMERCE URLS section of the CMS
2. In the product guide, select the product in the Enable e-commerce field in the Document Info tab of the document in the CMS.

Note: Only CMS users with the Buylink Administrator admin role as specified in Admin Users section of the CMS will have the authority to define URLs in step 1 above.

In Step 1: To define the URLs for multiple products, the easiest way is to import them in an XLS file. You can use the Export function to get a complete listing of all URLs - you can use that as a template to add additional products.

Tips:

• The XLS file you use as an import does not have to be a complete list of all products. Only the products listed in column A are updated; all other products are ignored.
• If you import a product without any URLs, that product is deleted
• Once you click the button to Import, wait on that screen for 5-10 seconds. You should wait until a Success or Failure popup message appears.
• You can also delete a single product by opening that product up in the Products section and clicking the Delete button
• If you are updating URLs to an existing product via an XLS import, make sure the name of the product listed in column A matches the existing product. If not, a second product will be created (which will probably be confusing and not recommended)
• To add additional markets, simply add additional columns.

In Step 2: To select the products you want associated with a product guide, simply enter the product name(s) in the Enable e-commerce field in the Document Info tab. You can enter more than one product.

These are web tools I use regularly:

• HTML-G - An easy way to strip out formatting and extra CSS from web pages or weird formatting from Word documents. Will also correctly process Tracked Changes from a word document. Requires a license for longer text.
• tblr - Converts Excel to HTML table code.
• CharacterCount - will display the number of characters and words in text you type/paste in.
• PDF unlocker - This tool will remove the protections from a PDF, such as preventing the ability to copy text.
• &what; ("amp-what") - a tool to show you all possible symbols & emojis you can use in text. Good for symbols like µ (also &micro;) , and for footnote symbols like daggers († and ‡, &dagger; and &Dagger;) and section (§ or &sect;), and of course the poop emoji

Firefox:

• Clippings: Lets you keep a library of code snippets for easy pasting into a field. Works in Source mode or in Normal mode (hold the Ctrl key down then right-click). https://addons.mozilla.org/en-US/firefox/addon/clippings/
• FoxReplace: Global search and replace in Source mode. https://addons.mozilla.org/en-US/firefox/addon/foxreplace

Chrome:

• tblr: Create HTML table code from Excel. https://chrome.google.com/webstore/detail/tblr/hfpbmgjmknhcakmgmfofmjloiecbocjj
• Copytables: Allows you to select and copy cells of a table from a web page. https://chrome.google.com/webstore/detail/copytables/ekdpkppgmlalfkphpibadldikjimijon