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. [inline:] Short Tag

[inline:] Short Tag

Built-in feature

[inline:123] will insert the attached image file having ID 123 as a very simple <img src="..."> tag pointing to the original image file.

This tag will not attempt to resize the image. Therefore it is most useful for inserting small icons that fit into the flow of text. For larger images, which you want to be Responsive you should use [image:] Short Tag or [thumbnail:] Short Tag.

The inline [inline:] 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 current Item. The tag can be manually typed into the content by following the required syntax.

Note: the [inline:] short tag generates inline text (<img src="...">) and can appear anywhere (inside a paragraph, table, etc.)

Syntax Breakdown

[inline: Link ID :. Class Name(s) ]

TODO [inline: Link ID [ : Alt text ] [ : Size ] [ :. Class Name(s) ] ]

  • 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".
  • 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),
      The Alt text cannot be small, medium, large or original, otherwise it will be considered to be the Size (see below).
  • TODO Size : small, medium, large or original (If omitted, the default is original)
  • 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. You may add your own classes.

Samples

  • [inline:123]
  • [inline:1234:.top]: the predefined CSS class top aligns the image with the top of the surrounding characters.
  • [inline:1234:.middle]: the predefined CSS class middle aligns the image with the middle of the surrounding characters.
  • [inline:345:.redborder]
  • [inline:345:.redborder.squared]

Adding your own CSS classes to style the image

Here is some sample CSS code you could use to define the classes .redborder (which adds a red border to your image) and .squared (which removes rounded corners):

img.redborder, .image_block.redborder img { border: 1px solid red }
img.squared, .image_block.squared img { border-radius: 0 }

You can use any method described in How to add custom CSS to define such extra CSS classes. For example you could add this to your Collection’s Skin and Style Panel Panel like this:

[inline:] Short Tag

Proper placement

This tag renders into a link (<img src="...) and can be placed almost anywhere.

This tag can be placed inside a link.

Tags: 7.0.2, CSS, classes, image, img
Created by fplanque • Last edit by yurabakhtin on 2020-07-02 17:09 • •

No feedback yet

On this page

  • Built-in feature
  • Syntax Breakdown
  • Samples
  • Adding your own CSS classes to style the image
  • Proper placement

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
Content Mangement System

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