SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribs On SPIP-Zone, 74 visitors now

Home > Tools for editing > Assistants de rédaction > Ecriture > How to turn a text string into an image

How to turn a text string into an image

14 December 2007 – by Corrobori

All the versions of this article: [English] [français]

0 vote

All contributions published for previous SPIP versions

A model, as spip means it, designed to transform a text string into an image is one of the many features we needed to release our template EVA 3 last september. It has been designed and developped thanks to the helpfull people on spip IRC chanel. As a Spip global feature, this is not specifically linked to our templates and that’s why we feel free to explain it here, out of it’s initial context.

Warning ! After a little more than three years of good and faithful service and almost 30000 visits this tutorial retires. Long life to its substitute

What is the purpose ?

Sometimes a writer may need to use a different font for one part of his text and in the meantime he doesn’t want this change to occur on all or on any other texts.

For the needs of EVA 3 we had to find a way to use hand writting fonts for such partial texts.

What is the problem ?

A Spip feature aldready allows to turn a single text string into an image, wich easily increases creativity. It’s the typographical image filter.

[(#TITRE|image_typo)] turns a text string into an image .

[(#TITRE|image_typo{police=my_font.ttf})] turns a text string into an image using the specified font.

This is exactely what we need; although it can’t work with #TEXT unless we want to turn all the text into an image .

Here is the solution

It comes from spip’s models. As a matter of fact spip comes with the features we need.

<imagetypo|texte=my partial text>

This code lets us change font in a partial text, actually returning an image img of the writtings, and that’s exactly what we need.

Setting up

Since we only need a part of text to be processed by imagetypo we are going to let spip do the work elsewhere _that will be a task for ecriture.html_ and then return the final img.

Let’s begin by specifying exactly what we want. If we mean to change only the first sentence of a text, then we need to write the following code in our body text:

<ecriture1|texte=My first sentence|police=my_font.ttf|left>

[(#ENV{texte}|image_typo{police=#ENV**{police}})]

Technically speaking

You will need to place the file ecriture.html in the /modeles directory of your templates folder : /modeles/ecriture.html

Then of course, make sure you’ll add the fonts you need in your template’s fonts directory [1] at the root of your site : /polices/my_font.ttf, or in the templates directory : /your_templates/polices/my_font.ttf

Make sure to create those directories if they do not already exist.

Footnotes

[1Warning: unless you protect the folder (with an htaccess for example), anyone will be able to download your font files. If you use commercial fonts, beware you do not inadvertently distribute them without any authorisation.

updated on 15 November 2010

Back to top

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Add a document

Back to top

Here they're talking

  • (fr) Passer un site SPIP sous https://

    23 février 2017 – 42 commentaires

    Comment migrer simplement votre site SPIP de http:// vers https:// Le protocole https:// devient de plus en plus courant : C’est mieux pour la vie privée de tous La plupart des grands sites l’a déjà adopté Certains navigateurs commencent à afficher (...)

  • (fr) SPIP 3.2, Agenda et FullCalendar

    6 juin – 20 commentaires

    Nous avions publié un article sur la manière d’utiliser FullCalendar avec SPIP 3.0 afin d’afficher des évènements sous forme d’Agenda. La version de FullCalendar a changé avec SPIP 3.2. Le présent article est donc un tutoriel adapté à SPIP 3.2. Pour (...)

  • (fr) Grappes 1.0

    23 novembre 2012 – 36 commentaires

    Présentation et nouveautés Cette version 1.0 du plugin Grappes est un portage pour SPIP 3.x. Le plugin permet de grouper des objets de SPIP dans des grappes. Les objets du core (articles, rubriques, auteurs, etc.) sont pris en charge, ainsi que (...)

  • (fr) PHANTOM (HTML5UP)

    18 juillet – commentaires

    Squelette SPIP pour intégrer le modèle Phantom de HTML5UP. https://html5up.net/phantom Installation A l’activation, le plugin installe aussi les plugins suivants : crayons, favicon, metasplus+, Couleur d’objet, champs extras, SPIP reset centre (...)

  • (fr) Cycle2

    7 août 2014 – 119 commentaires

    La seconde version de la librairie Javascript « jQuery Cycle », qui permet de produire des diaporamas, se nomme « Cycle2 » : http://jquery.malsup.com/cycle2/. Voici cette nouvelle librairie mise en plugin pour SPIP. Si vous utilisez déjà « jQuery (...)