Images with HyperCode

How to decorate your posts with images using HyperCode

HyperCode supports several different types of Tags for inserting images. See what they are, the differences, and how to use them.

A post with images becomes much more attractive. Whether it's a post about news, a product, an opinion article, images add an extra sparkle to your post.

HyperCode supports several different types of Tags for inserting images. See here how to use them, what are the types and differences are, and which type is most suitable for each case.

Before proceeding, it is recommended to read and understand Images in HyperFluxCMS.

The image tags described below are some of the HyperCode Tags that are self-contained, meaning they DO NOT NEED and MUST NOT be used in "open/close" pairs. They should be used simply as a single tag..

Tag [img]

The img tag is the standard method for inserting images into a post in HyperCode.

Syntax:

src is the only mandatory property.
src must contain the path to a valid image file. It can be:

• a full path, such as "https://my-site-name.com/gallery/photo.jpg". In this case, you can use an image from the site itself or from an external source.
• a relative path, if it is an image from the site itself, such as "/gallery/photo.jpg"
• an automatic path, if it is an image from the site itself, such as "/auto/photo.jpg" (see Automatic Image Selection)
• just the image name, if it is in the site's own image gallery, such as "photo.jpg"

If it is an image from the site itself, you can also use the path to an Automatic Thumbnail, such as "photo.jpg:300.200.cover".

Anonymous property

The "src" property can be omitted and the link can be provided directly after the tag name;

Additional properties

caption is an optional property. If included, the provided text will appear at the bottom of the image, as a caption.

width and height indicate, respectively, the width and height of the image. They can be specified in pixels, pt, %, or any other valid HTML unit of measurement.

If neither the width nor height properties are provided, the image will be inserted in its original pixel size according to the file's own data.

If both width and height properties are provided, the image will be inserted in the specified size. If the measurements do not follow the proportion of the original image, the image will be displayed distorted, compressed, or stretched vertically or horizontally, to occupy exactly the specified size.

If only one of the width or height properties is provided, the image will be inserted with the specified dimension, with the other calculated automatically so that the image is displayed maintaining the original proportion and without distortion.

Like most HyperCode Tags, img optionally accepts the properties class, style, and id. See Class, Style, id

Example:

Tag [thumb]

The thumb tag is the standard method for inserting image thumbnails into a post in HyperCode.

Syntax:

src is a mandatory property.
src must contain the path to a valid image file. It can be:

• a full path, such as "https://my-site-name.com/gallery/photo.jpg". In this case, you can use an image from the site itself or from an external source.
• a relative path, if it is an image from the site itself, such as "gallery/photo.jpg"
• just the image name, if it is in the site's own image gallery, such as "photo.jpg"

options indicates the options for generating the thumbnail. It is a /string composed of 3 fields separated by a dot . with no spaces between them.

• The first field is the width of the thumbnail image in pixels.
• The second field is the height of the thumbnail image in pixels.
• The third field is the IMAGE MODE, which can be stretch, fit, or cover. See more at Thumbnail Modes.

Example:

Additional properties

width and height indicate, respectively, the display width and height of the image on the page. They can be specified in pixels, pt, %, or any other valid HTML unit of measurement.

If neither the width nor height properties are provided, the image will be inserted exactly in the size indicated in the options property.

If both width and height properties are provided, the image will be inserted in the specified size.

If the measurements do not follow the proportion indicated in options, the image will be displayed distorted, compressed, or stretched vertically or horizontally, to occupy exactly the specified size.

If only one of the width or height properties is provided, the image will be inserted with the specified dimension, with the other calculated automatically so that the image is displayed maintaining the original proportion and without distortion.

Like most HyperCode Tags, thumb optionally accepts the properties class, style, and id. See Class, Style, id

Differences between img and thumb

• The img tag has the caption field that allows adding a caption to the image. The thumb tag does not.
• The thumb tag has the options field that allows providing thumbnail parameters. The img tag does not, but this can be done by indicating in the path the information for generating thumbnails. See Thumbnails.
• By default, img and thumb have different CSS classes and are displayed slightly differently, configured in the site's style sheets.

Example:

Tag [image]:

The image tag is exactly the same as the img tag, being just an alternative name for the same tag, with the same functions and properties.

Example:

Tag [floatimg]

The floatimg tag is another way to insert an image into a post.

The floatimg tag is very similar to img. The only difference is that, by default, it belongs to the CSS class floatimg and will be displayed on the site slightly differently from a standard img. Otherwise, it is similar to img in syntax and properties. See img Tag.

Example:

Like most HyperCode Tags, floatimg optionally accepts the properties class, style, and id. See Class, Style, id

Tag [modalimg]

The modalimg tag is another way to insert an image into a post.

The modalimg tag is a simple and useful way to insert photo galleries into a post.

It shows a thumbnail of the photo in the main post, and when the visitor clicks on it, it is displayed enlarged (or at actual size) prominently, with the rest of the page darkened.

After the user clicks an "X" in the corner of the screen, the image closes and normal site viewing is restored.

Syntax:

Properties

The properties src, caption, width, height, class, style, and id are identical to those of the img tag.

The options property is identical to that of the thumb tag.

Example:

Like most HyperCode Tags, modalimg optionally accepts the properties class, style, and id. See Class, Style, id

Tag [coverimg]

The coverimg tag is another way to insert an image into a post and serves almost exclusively to insert a cover image into the post.

The coverimg tag is basically the img tag but where the src property can - and should - be omitted, and will be automatically replaced by the image defined as the "cover image" in the page configuration.

If the post is edited and the cover image is modified, the new image will automatically be displayed the next time the page is accessed.

Except for this, the syntax and properties of coverimg are exactly the same as those of the img tag.