Category: How To

In Joomla: How to Float an Image Left or Right of Text

Here’s how to float an image left or right using JCE editor in Joomla, using your template’s custom styles.

image inserted into article in JCE editor
Image inserted into article in Joomla JCE editor

1) Create your article in the JCE editor, and get it far enough along that you have your text and image added to the article.  Put your image just ahead of the paragraph or list containing the text that’s to be floated alongside the image.

 

JCE editor showing an image selected and the styles menu open
Open the styles pull-down menu

2) Click on your image, then click on the styles pull-down menu to open it.  There are a bunch of styles there to choose from, listed in no particular order.  Scroll down to find the styles img-right and img-left.

 

image floating to the right of text, in JCE editor
Click to apply the style, observe that the image now floats to the right of the text

3) For our example, click the style img-right and note the image now floats to the right of the text in the JCE design view window.

4) Notice too, that the image now has a thin black border.  That is part of the CSS img-right style for this website, as well as custom margins all around the image.

How it works: For each Joomla website I create two custom CSS styles for floating images left or right.  I name them something like img-left and img-right, or image-left and image-right.  These styles will also apply the border and margins to the image, to match the style of your website.

image floating to the right of text on a web page
Front end view, image floated right with thin black border

The margins keep the text some distance from the edges of your image.  For an image floated to the right, I set the right margin to zero and the other top, bottom, and left margins to some small distance.

Extra credit: These custom styles go into the custom style sheet for the Joomla template, named something like custom.css.  In JCE editor global configuration I specify the location of this CSS file, so that the JCE design view window preview shows your article as it would look with these custom styles applied.

How can Let’s Encrypt provide SSL certificate without an IP address?

SiteGround tech support recently introduced a new feature to me when I asked the cost for an SSL certificate for a client’s website.  She said I can set up an SSL certificate for free using a new feature available at their web hosting cPanel called “Let’s Encrypt.”

I tried it out and it seems to work!  I’ve coded this link with http protocol.  Click it to see that the server redirects you to a page that uses the https protocol.  Does it work for you?  Or does your browser display some SSL certificate error messages?

For a long time I’ve provided SSL encryption only when necessary (e.g. e-commerce sites, sites that collect visitor’s private info) because it’s extra cost (lately about $80/year) and requires tech support’s help.  I looked into how SSL could work without needing a dedicated IP address:

I found a thread that explains why no dedicated IP address needed for the SSL certificate.  It says that if your web server’s SSL library supports “server name indication” (SNI), which all modern libraries do, there’s no longer a need for a dedicated IP address for each SSL certificate.

The difference is that if the browser supports SNI, it can send the host name unencrypted, so the server can properly match the virtual host without needing to decrypt the request first.  It also says that for older versions of IE browser running on Windows XP, these browsers don’t support SNI.  It doesn’t say how web servers would handle such requests from these browsers

…   but this next article gives an example of extra work a web server has to do to figure out which website to go to if it gets a request from IE browser with host name encrypted: if it can’t figure out which website to go to, it returns a certificate error.

Joomla global configuration screenshotJoomla has a setting that lets you direct the website to USE the SSL certificate once the certificate is installed on the web server.  That’s how I finished the SSL setup for the example Joomla website above.

For a future topic, once I learn how to set up SSL for a WordPress website I’ll make a new post here.

This just in (9/26): WPBeginner has an article all about how to set up an SSL certificate at SiteGround and DreamHost then what’s required once the certificate is installed, to use it in your WordPress site.  I have not yet read the article, but I’m open to comments from others who have and tried it out.

A quick online search just now shows that only SiteGround and DreamHost offer integration with Let’s Encrypt.  I am looking for my 2nd-favorite web hosting company, InMotion Hosting, to support Let’s Encrypt, but it seems as of Dec 2015 they have no plans to add it.