b2evolution b2evolution

  • Sign in
  • Sign up
  • About
  • Downloads
  • Hosting
  • Docs
  • Support
  • Sign in
  • Sign up
  • Manuals Home
  • Latest Updates
 
  1. b2evolution CMS User Manual
  2. Back-office Reference
  3. Collections
  4. Contents
  5. Short Tags Reference
  6. [image:] Short Tag

[image:] Short Tag

Built-in Feature

[image:123] will insert the attached file having ID 123 as a responsive image (typically using the full width of the text column) with optional caption.

The inline [image:] tag is a placeholder inserted in the content to be replaced by an image when the post is displayed. That image must be already uploaded to the server and attached to the post.

The tag itself can be inserted to the content at the current cursor position by clicking the green icon with a plus sign in the action column of the Item Images & Attachments Panel. It can also be manually typed in the content by following the required syntax.

Note: [image:123] generates a block element (<figure>...</figure>) and cannot appear inside a paragraph. (b2evolution will automatically move it out of the paragraph).

See also: [thumbnail:] Short Tag and [inline:] Short Tag (these tags can appear inside paragraphs).

Syntax Breakdown

[image: Link ID : Caption :. Class Name(s) ]

Available in an upcoming release [image: Link ID : Caption [ : HRef ] :. Class Name(s) ]

TODO [image: Link ID : Caption [ : Alt text ] [ : HRef ] [ : Size ] :. Class Name(s) ]

TODO Several params are optional. You can either skip them by leaving them empty (::) or you may skip them completely because the next param will be recognized by its specific content.

  • Link ID : ID of an attached image to the current Item. This is a number that is automatically created when you attach an image to a post in the Item Images & Attachments Panel. The tag will not be rendered in the following cases:
    • If an invalid ID is provided
    • If the ID refers to a file that is not an image
    • If the ID refers to an image but that image is assigned to any display position other than "Inline".
  • Caption : By default, the image will be displayed with the caption that has been entered in the File properties of the linked File. This caption will be displayed under the image and also in the colorbox that opens when you click the image. This parameter of the short tag allows you to:
    • Override the default caption by explicitly specifying one here
    • Not display any caption by specifying -
    • Use the default caption by not specifying anything here (empty param like ::)

      Note: you can also affect the caption with the CSS classes, see below.
  • Available in an upcoming release Alt text : By default, the image will be displayed with the Alt text that has been entered in the File properties of the linked File. This parameter of the short tag allows you to:
    • Override the default Alt text by explicitly specifying one here
    • Not display any alt text by specifying -

      Note: if the alt text param you specify starts with a . it will be considered to be a class name (see below),
      if it looks HRef like http://... or ((slug-name)) it will be considered to be a HRef (see below).
  • Available in an upcoming release HRef : Where to go when clicking on the image:
    • By default, i-e: if no Href specified:
      • the image will link to the original file on disk
      • additional params such as rel="lightbox[p363660] are added in order to display a Lightbox / Colorbox in most skins.
    • This parameter allows to override this href= URL in 3 different ways:
      • http://... or https://...
      • ((slug-name))
      • (()) : means : no link.
        In all these cases, no Lightbox/Colorbox params are added.
  • TODO Size : (similar to [thumbnail:]) small, medium, large or default (If omitted, the default is default which uses the setting from the skin)
  • Class Name(s) : can be any CSS class name. The class name must start with a dot. Multiple class names can be specified, separated by a dot. See: Common Helper CSS Classes You may add your own classes.

Samples

  • [image:123]
  • [image:123:This is a Caption]
  • [image:234:-]
  • [image:345:-:.redborder]
  • [image:456:This is a Caption:.redborder.noinlinecaption]

Class Names provided by b2evolution:

  • .noinlinecaption will hide the caption from under the image, but the caption will still display when the image is zoomed in colorbox.
  • .floatleft allows your image to float left, if it smaller than the column width. This has been deprecated in favor of thumbnail-short-tag (in b2evo 6.8+)
  • .floatright allows your image to float right, if it smaller than the column width. This has been deprecated in favor of thumbnail-short-tag (in b2evo 6.8+)
Tags: 7.0.2, CSS, classes, image, styles, styling
Created by fplanque • Last edit by yurabakhtin on 2020-07-02 17:05 • •

4 comments

Comment from: gerardp

If I could make recommendations, it would be
[image:123:size (px or %)] [image:123:link]

2016-09-27 @ 09:05

Comment from: fplanque

These options will be available soon, see TODOs above.

2020-01-08 @ 01:57

Comment from: amoun

Using b2evo 7.1.6 See https://forums.b2evolution.net/image-caption-how-to-add-links
for example of adding link to an image, not to the caption.

2020-08-03 @ 23:17

Comment from: amoun

Further to that.
Although I don’t use the short image tag it would be useful to have the not just the option of a URL linked to the image but that any links in the caption would work. To that end I have made further comments on the post mentioned before this comment.

2020-08-07 @ 15:15

On this page

  • Built-in Feature
  • Syntax Breakdown
  • Samples
  • Class Names provided by b2evolution:

Search the Manual

Content Hierarchy

  • b2evolution CMS User Manual
  • User's Guide
  • Installation / Upgrade
  • Front-office Reference
  • Back-office Reference
    • Site
    • Collections
      • Collection Dashboard
      • Contents
        • Post Browsing Screens
        • Post Edit Screen
        • Short Tags Reference
          • Helper CSS Classes
          • Custom Fields Short Tags
          • [audio:]
          • [cblock:]
          • [div:]
          • [emailcapture:]
          • [file:]
          • [image:]
          • [include:]
          • [inline:]
          • [pagebreak]
          • [poll:]
          • [subscribe:]
          • [switcher:]
          • [teaserbreak]
          • [thumbnail:]
          • [video:]
        • Post Concepts
        • Mass Edit
        • Mass Post Contents
        • Other post actions
        • Renderers Reference
      • Comments
      • Categories
      • Features
      • Skins
      • Widgets
      • Settings
      • Creating a new collection
    • Files
    • Analytics
    • Users
    • Messages
    • Emails
    • System
    • Working with Results Tables
  • Developer Reference
  • Operations Reference
  • Advanced Topics
  • Glossary
  • Archives
Complete website engine

This online manual is powered by b2evolution CMS – A complete engine for your website.

About b2evolution

  • What is it?
  • Features
  • Getting Started
  • Screenshots
  • Online demo
  • Testimonials
  • Design philosophy
  • Free & open source
  • Terms of service

Downloads

  • Latest releases
  • Skins
  • Plugins
  • Language packs

About us

  • About us
  • Contact

Webhosting Guide

  • Web hosting blog
  • Best web hosting
  • Cheap web hosting
  • Green web hosting
  • Hosting with SSH
  • VPS hosting
  • Dedicated servers
  • Reseller hosting
  • Int'l: UK / France

Docs & Support

  • Online manual
  • Forums
  • Hire a pro !

Other

  • Adsense
  • Press room
  • Privacy policy

Stay in touch

  • GitHub
  • Twitter
  • Facebook
  • LinkedIn
  • News blog
  • RSS feed
  • Atom feed

Founded & Maintained by François Planque