Hints and Tips for the Lenovo Press CMSReference Information

Author
Published
29 Jul 2022
Form Number
TIPS4CMS
PDF size
14 pages, 210 KB

Abstract

This document is for Lenovo Press CMS users. It provides useful information on the use of our content management system.

Inserting an image

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

CSS classes

Here are special classes that are useful for our documents.

Table 1. CSS classes
Class Comment
tight

By default, first level lists have white space between each item. The class will remove the space. Use it on the ul or ol tag.

<ul class="tight">
flush

Use with a list item when you want to reduce the left indent of the list item. Often used in conjunction with tight

<ul class="tight flush">
loose

By default, 2nd-level and 3rd-level (and beyond) lists do not have white space between each item. The class will add the space. Use it on the ul or ol tag.

<ul class="loose">
break-before

Forces a page break in the PDF before this tag. Ignored for the web version.

<h3 class="break-before">
break-after Forces a page break in the PDF after this tag. Ignored for the web version.
break-avoid

Attempts to keep a block element (div, p, li, etc) from splitting between pages in the PDF. Ignored for the web version.

Example:

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

By default, the default for tables is break-avoid. To override this, use break-allow, which will allow the table to split across PDF pages, even if the table is small enough to fit on one page.

withdrawn

The content will be treated as withdrawn product information. The CMS has a feature where content marked as withdrawn is hidden by default. The user can show this information by clicking the checkbox on the web page, which then shows withdrawn content with a pink background. Withdrawn content is not shown in the PDF at all.

Example (a row in a table of part numbers):

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

Tip: There's also a button in the editor icon bar (look for the ⊘ symbol in the same row as bold and italics). If you just want a word or two marked as withdrawn (as opposed to an entire paragraph or list item), then you can use this. However, don't use this button for blocks of text (table cells, paragraphs, list items).

  • Also if a row is already "gray color" marking it withdrawn works, however background gray color overwrites pink in this scenario.
callout

Displays text in a grey box. Use in a div tag.

Example:

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

Output:

Riser 3 support: The use of the onboard NVMe ports is mutually exclusive with Riser 3.

Tip: If possible, the text in bold should be something descriptive and not simply "Note". This will allow the reader to get a sense of purpose of the callout without having to read all of it.

small Displays text in a smaller (8pt) font size. Applies to both PDF and web.
pdf-small Displays text in the PDF in a smaller (8pt) font size. Ignored by the web version.
img-left
img-right

Use these classes in img tags as alternatives to the standard float:left and float:right styles where images are aligned left or right. img-right will float an image right if the screen width is above the smallest screen breakpoint (>768px), and smaller than that, the image will be centered on its own. The img-left class floats the image left and provides the same styling below 768px.

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

Table code

Some useful code for tables.

Table starter code

Use this code to start a table.

<div class="scroll-y">
<table class="table table-bordered">
<caption>Table 2. 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>

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>

Other useful HTML

Here are HTML snippets that are sometimes useful.

Keeping words together on the same line

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

Keep this 1&nbsp;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".

Smarty comments

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

No comments within comments: You can't have a smarty comment that includes another smarty comment. You'll need to add a = or some other character between the * and the } of the inner 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:

Part number Feature
code
Description
{*7XB7A00036 AUUE ThinkSystem 2.5" 1TB 7.2K SATA 6Gb Hot Swap 512n HDD HIDDEN ROW
*}7XB7A00037 AUUJ ThinkSystem 2.5" 2TB 7.2K SATA 6Gb Hot Swap 512e HDD

Example 2 - Hides the last row:

Part number Feature
code
Description
7XB7A00036 AUUE ThinkSystem 2.5" 1TB 7.2K SATA 6Gb Hot Swap 512n HDD{*
7XB7A00037 AUUJ ThinkSystem 2.5" 2TB 7.2K SATA 6Gb Hot Swap 512e HDD HIDDEN 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).

Smarty code

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

Table {counter name="table"}. {$block_title}
Smarty Description
{$system_name_short}

Displays the system_name_short variable. Used in conjunction with the Smarty code definitions above.

Example: The {$system_name_short} is a new 1U server.

{$system_name} Displays the system_name variable. Used in conjunction with the Smarty code definitions above.
{counter name="figure"}

An automatically incremented counter for figures.

Example: Figure {counter name="figure"}. This is the figure caption

{counter name="table"}

An automatically incremented counter for tables.

Example: Table {counter name="figure"}. This is the table caption

{$block_title} Returns the text of the current block title. Useful in a table caption if you want the table to match the block name.
{$block_title|slugify}

If you want to use the block_title variable in the id parameter in a heading tag, you can make it uniform and URL-friendly by piping the variable through our slugify modifier.

Example: <h3 id="internal-drives-{$block_title|slugify}">Internal drives for {$block_title}</h3>

{link href=""}

Use this as a way to display a URL. Useful because it ensures that the displayed URL and the actual URL behind the click are identical.

Example: {link href="https://lenovopress.com"}

{$minitoc} Inserts of bullet list of all the <h3> headings in the current section. The list items are clickable to allow the user to jump down to that heading. It assumes (requires) that the headings are unique in the document and does not test for that.
{svsup_desc part=4XC7A08316} Returns the description of the specified part number or feature code. This data comes from the Server Support file that is uploaded into the Server Support section of the CMS. Returns nothing if the part number is missing.
{$mbrgo}

Used to hide text before or after a specific date and time (embargo)

{mbrgo bf="yyyy-mm-dd hh:00"}
{mbrgo bf="yyyy-mm-dd hh:00"}

Fancybox

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:

Lenovo ThinkSystem ThinkSystem SR645 V3

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

Logic using Smarty code

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

Hint: Wrap the smarty code in HTML comments <!-- ... --> to ensure the smarty code doesn't get interpreted as HTML. This is especially important in tables.

Example:

<!--{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.

The code below checks if the $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 && for logical and and || for logical or.

Useful web sites

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

Useful Browser extensions

Firefox:

Chrome:

Trademarks

Lenovo and the Lenovo logo are trademarks or registered trademarks of Lenovo in the United States, other countries, or both. A current list of Lenovo trademarks is available on the Web at https://www.lenovo.com/us/en/legal/copytrade/.

The following terms are trademarks of Lenovo in the United States, other countries, or both:
Lenovo®
ThinkSystem

The following terms are trademarks of other companies:

Excel® and Windows® are trademarks of Microsoft Corporation in the United States, other countries, or both.

Other company, product, or service names may be trademarks or service marks of others.