Poll

Aboot this blog

This blog is a cross between a scrapbook and a diary. I hope you find something here of interest. If you’d like to keep up with things as I see them then you can subscribe to my news feed by clicking the icon below:

feed-icon-28x28.png

DISCLAIMER

Please note that any reviews/recommendations are based solely on my own experience and does not constitute a guarantee that you will have the same experience. Please do your own research before parting with any money - the risk is all yours!

The Briticiser

Looking for my world famous US to GB English spelling converter?

THE “BRITICIZSER”

www.us2uk.eu

IT’S HERE

Tags

  Hardware     Overcoming Disabilities     Acrobat     Reviews         Software     Plausible Lies     Odds and Sods     Bits and Bobs     Browsers     Equipment     Family     Tutorials     3D Stuff     Excel     Bookmarks     Flatpress     VBA     Word     News     Utilities     Windows     PHP     Education  

Find me on Facebook

facebook-icon-28x28.pngVisit my Briticiser Facebook Page to keep up with things here - lots of reviews of stuff I’ve really used and also all kinds of helpful computer tips with a heavy bias towards SAVING YOU TIME.

Avoid SPAM with my text to image conversion plugin for FlatPress

Permalink: http://paul.us2uk.eu/?x=entry:entry150530-064419

As one who knows just how easy it is to scrape web pages for email addresses it never ceases to amaze me how many people are unaware what they’re letting themselves in for by putting their email address on a web page.

I never do it myself but I was recently asked to do so by the owner of a new website I’m developing so I went looking for a way to help make those email addresses invisible to the kind of software programs I’ve used in the past, and found a simple text to image conversion script which displays an email address as an image, like this:

If you right click on the image above and inspect the image source address you’ll see that the email address itself is encoded so this will defeat most of the malicious robotic visitors to your site… though I’d still recommend that you NEVER put an email address on a web page, even like this, if you want to be 100% certain that your email address can’t be stolen and used in ways which could make your life a lot more difficult than it already might be.

As I develop most of my sites using FlatPress I wrote a neat little plugin to convert an email address to an image. This is how it works.

In the Flatpress text editor I use to create my posts (though I also use Live Writer and this works just as well using that) I simply wrap the text I want to convert with opening and closing “txtimg” tags, like so:

[txtimg]myemail@example.com[/txtimg]

To make this method of displaying text as an image a little more versatile I also added the ability to specify style information so, for instance, if you type:

[txtimg style=”right”]myemail@example.com[/txtimg]

the image is floated over to the right hand side of the page:

[txtimg style=”blueborder”]myemail@example.com[/txtimg]

adds a blue border around the image:

and you can also combine styles like this:

[txtimg style=”right blueborder”]myemail@example.com[/txtimg] to give you:

To add a new style to the image (we’ll talk about the text colour another time) you need to understand a little about how Cascading Style Sheets (CSS) work - it’s not too difficult and this is a fun thing to learn it on if you’re not sure.

You’ll find a CSS sheet in the plugin’s “res” folder and, in the examples above the CSS code is:

img.right {
float: right;
}

img.blueborder {
border: 4px solid blue;
}

So, if you wanted to position the text in the centre of the page and add a thin red border with a bit of space around the text, like this:

you would generate the image by including your new style information in the txtimg opening tag:

[txtimg style=”center redborder padded”]myemail@example.com[/txtimg]

and you would need to add the following style code to the CSS sheet in order for it to display as you want:

img.center {
display: block;
margin-left: auto;
margin-right: auto;
}

img.redborder {
border: 1px solid red;
}

img.padded {
padding: 6px;
}

Note that there is one other style attribute which you can set. “text” will collapse all of the space around the image so that it will sit better in line with your text. Depending on the style settings for the rest of your site you may not actually need to use this, but it’s useful to be able to bring those images back inline with the rest of your text if you find they are floating off somewhere!

This address has the text attribute set: looks ok, yes?

but this one doesn’t: see the difference?

You can download the plugin here with all of the above CSS included.

Support our caregiving

If you found anything on this site of use, interesting, or even mildly amusing then please consider dropping a few pennies in the jar to help us to take care of our disabled son who contracted encephalitis in 2007 at the age of 6 and who is now confined to a wheelchair. He is getting bigger as his mother and I get older, imagine that, please. Every penny we collect goes towards his upkeep, and towards his future care requirements.

Thank you.

Support our caregiving

Support our caregiving

If you found anything on this site of use, interesting, or even mildly amusing then please consider dropping a few pennies in the jar to help us to take care of our disabled son who contracted encephalitis in 2007 at the age of 6 and who is now confined to a wheelchair. He is getting bigger as his mother and I get older, imagine that, please. Every penny we collect goes towards his upkeep, and towards his future care requirements.

Thank you.