0.00 (0 votes)

Would you like to insert and display separate images for intro text and full article in your blog? Start using standardized images to save your time!

What should be configured?

Navigate Content -> Article Manager and click on the Options button (at top right). Then open Editing Layout tab to check if:

  • Administrator Images and Links paremater is set to Yes
  • if you need to enable this option for front end editing set Yes to Frontend Images and Links
     

intro-images


You can also specify placement for images, take a look at Intro Image Float and Full Text Image Float settings.

Important CSS styles

The intro image will use the following classes: img-intro-none, img-intro-right, img-intro-left, so make sure that your template includes the relevant css style, otherwise siply add the following styles to your template.

.img-intro-none{
   text-align: center;
   margin-bottom: 10px;
}
.img-intro-left{
   float: left;
   margin-right: 10px;
}
.img-intro-right{
   float: right;
   margin-left: 10px;
}

The similar code should be placed for Full Text Image Float if needed.

.img-fulltext-none{
   text-align: center;
   margin-bottom: 10px;
}
.img-fulltext-left{
   float: left;
   margin-right: 10px;
}
.img-fulltext-right{
   float: right;
   margin-left: 10px;
}

In addition you can add for example any border, shaddow or background for the image container.

Inserting the image

Once the necessary configuration is done save settings and edit any article to check how it works.

Open Images & Links tab, should see as follows:

 

images-links-tab

Select the image, do not forget about Alt text - it's important to your site's search engine optimization since an effective image alt tag helps robots to understand the image you inserted on yur site.

The Result

intro-images-result

Users' reviews

Total rating: (0 votes) Add review

Video Tutorials

EF4 Framework for Joomla! 3 - introduction

Joomla! 3 Quickstart Installation Guide

Speed up your website! Must watch video!

How to create Joomla article?

Joomla ReCaptcha - how to set up?

How to use Joomla editors?

How to display a module in Joomla article?

How to configure Joomla contact form?

How to check Joomla module positions names?

How to configure your language for Joomla 3?

How to create Joomla custom HTML module?

How to create Joomla menu?