Joomla – Presto Carol

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 to Add a Title Tag to your Image in WordPress

It seems both WordPress and Joomla make the website editor go the extra mile to add a title tag to an image in a post. This is the tag that allows you to describe the significance of the image. Browsers usually display the tag’s value as a “tooltip” when the visitor hovers over the image. Not to be confused with the “alt” tag which describes how the image looks to a visually impaired person and helps Google to rank the image.

Try hovering over this image to see how your browser displays the title tag.

Both CMS’s automatically build an alt tag value when the image is first used in an article or post. Joomla hides the setting for the title tag behind an “Advanced” tab in the JCE image editor. That’s not helpful for encouraging a novice author to provide text for the title tag.

Today in WordPress I wanted to add a title tag to the image in my new post. I dutifully filled in the caption, description and alt tag values in the image editor when I uploaded my image. A title tag was automatically filled in for me. But when viewing my post in a browser window, no tooltip on hover!

So, I went to text mode in my post and added the title tag “by hand.” This time on hover I got an entire paragraph of text with embedded HTML markup. So that didn’t work. On close examination of my markup I could not see what was wrong. So I found this helpful article by WPBeginner.

WordPress post editor, showing image selected — WordPress image editor, showing an image selected, pointing out the edit button

It explained the purpose of alt and title tags, and even explained that the “title” setting WordPress uses when the image is first uploaded, is NOT the title tag that shows as a tooltip. The article’s directions said that, in my WordPress visual post editor, click on the image then click the edit button that appears.

Look in the “advanced” section to find a field you can fill in with the value of the title tag.

I had to hunt a while to find the “advanced” section, as it was out of view within the popup box. But finally, “success!”

I have figured out how to add the title tag in two ways now: if nothing special is going on with captions or other shortcodes, you can simply add a title attribute to the image in question in the post editor’s text mode; or you can use the image editor, scroll down to “advanced” settings and fill in the tag there.

By the way, in adding those last two images, I was reminded of how easy it is in WordPress to display a CAPTION for the image: you just fill in the caption field within the image source. In Joomla how the caption is used depends entirely on the template, and it requires tricky CSS overrides on the web developer’s part, and perhaps CSS knowledge on the editor’s part, to make it look good.

Also, I accidentally selected two images and found BOTH were inserted into my article. Does anyone have a good use for such a feature?

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 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.