SPIP

[ar] [ast] [bg] [br] [ca] [co] [cpf] [cs] [da] [de] [en] [eo] [es] [eu] [fa] [fon] [fr] [gl] [id] [it] [ja] [lb] [nl] [oc] [pl] [pt] [ro] [ru] [sk] [sv] [tr] [vi] [zh] Espace de traduction

Download
Home > English documentation > Webmasters > A few examples of loops > Several logos for a single article

Several logos for a single article

August 2010

All the versions of this article:

In order to give some graphical "life" to a site, it’s a common desire to use different logos (and in particular, logos of different sizes) for the same article depending on where that article is referenced or used.

For example, you might want to use a "big" logo on the home page in order to draw attention to the "article of the day", and then use a "small" logo where that article is included in the site’s general navigation mechanism.


Recalling that since SPIP 1.7, SPIP 1.7.2 , SPIP webmasters have been able to use the image_reduire function to create various versions (in size) of a single same logo assigned to an article. But we will need to employ a different method if we have several different logos for any single given article.

Some webmasters have created individual methods based on the differentiated usage of the "normal" logo and the "mouseover" or "hover" logo. For example: the "normal" logo might be used as a "small logo" for the article in a navigational context (called using the #LOGO_ARTICLE_NORMAL tag), and then use the "mouseover" logo (called using the #LOGO_ARTICLE_SURVOL tag) to access the "big logo" when linking to the article from the home page. Although it works, this sort of approach complicates the squelette templates and means that you can’t use the "mouseover" logo for its intended purpose which SPIP would automatically provision itself in the "normally" appropriate circumstances. In addition, it doesn’t really leave a lot of room for flexibility.

Since version SPIP 1.4 , it has been possible to attach documents to articles (and later also to sections/rubriques). We’re going to explain here below how you can use these attached documents to create several logos for a given article.

The general principle

-  We will continue to use the article’s two logos to display just the "normal" logos (those that will appear in the most commonly accessed navigation links, as is the case for a section that lists its constituent articles), which means we can enjoy using the standard simple mechanisms for logos in SPIP with automatic handling of the "mouseover" logo (and simultaneously re-enabling the ordinary usage of the #LOGO_ARTICLE and #LOGO_ARTICLE_RUBRIQUE tags).

-  We will choose to attach to each article concerned an additional document (generally an image in either GIF, JPEG or PNG format), which we will then systematically assign the same title name. This is all we need to be able to display this document (by referencing with this assigned standard name) instead of the "normal" article logo whenever we have a need to do so.

-  This method then clearly makes it possible for us to assign as many different logos as we want for a given article (not just one big logo and one small logo, but why not a thumbnail logo as well to brighten up a title zone for the article as well, etc.).

-  We will then see that thanks to SPIP’s loops, it becomes very easy to determine within our templates if such a "big" logo exists (the one bearing the name that we so chose), and to take appropriate action (displaying it instead of the "normal" logo) for any specific piece of text in our database - or to use a completely different kind of graphical component instead.

-  With the continuing innovation of modern technology, proprietary formats and broadband access, these specific versions of the logos, being as they are simply attached documents, can be in various other formats instead of just standard image "stills". We could just as easily display Flash or Shockwave animations, video clips, whatever you have at hand, instead of the "big" logos that we illustrate in this article.

Installing the documents and the choice of their names

-  We have decided (quite arbitrarily, and you should follow or modify as suits your needs) that the attached documents that will be used as the "big" logos will all be named as "spip_logo": it is this "spip_logo" document that will be displayed on the home page of our site instead of the "normal" article logo entered in the "normal" fashion in the editor’s private zone.

We will soon other names later in this exercise to create more delicate effects: but right now, we will decide that all such names will be prefixed with "spip_". (This will allow us, in the normal display of documents attached to an article, to exclude all the ones that have names starting with "spip_". This will mean that our using attached documents as alternative logos will not interfere with the display of other images, a portfolio of photos, for example.)

-  For an article published online (so that we can play around with our squelette templates when testing them), we simply attach:

  • one normal logo; we could, if we wanted, also add a "mouseover" logo which would be automatically displayed when the site visitor moved their mouse over the normal logo;
JPEG - 33.7 kb
The "normal" logo
The logo uploaded using the standard method for article logos. Normally this will be an image of modest proportions.
  • one "attached document" (using the "ATTACH A DOCUMENT" panel); to make things simple, we attach just an ordinary image (JPEG, GIF, PNG); once this document is installed ("uploaded"), we will assign it a name of "spip_logo". There - that’s all you need to do in the private zone... SPIP will automatically display this document at the bottom of the page for the article in the private zone, displaying the name of the file as it’s stored in the server directory, its title that you just assigned ("spip_logo") and the image’s dimensions measured in pixels.
JPEG - 40.8 kb
The "spip_logo" document
The only requirement is to assign this document a title of "spip_logo". There is no need to install a preview thumbnail.
If this were a multimedia document (Flash, Shockwave...), you will need to manually specify its dimensions in pixels.

-  We choose what we will do with this document entitled "spip_logo": it will be displayed on the home page of the site instead of the normal logo for the most recently published article. Doing this will mean that the home page can display a "BIG" image to highlight the "article of the day".

Displaying the "spip_logo" on the site’s home page

-  We start by inserting a very simple loop to display the most recently published article on the site and its "normal" logo. (In all of the examples which follow, the HTML code has been reduced to its strict minimum for the sake of clarity: you will still need to "wrap it up" nicely in the correct position and framing that suits your graphical charter.)

This very simple loop will display the first article ({0,1}) amongst all ARTICLES in the database, selected in order of publication date ({par date}) from most recent to earliest published ({inverse}). This means that we will definitively be displaying the article most recently published on the site. Inside that loop, we display the logo of the article followed by the title of the article.

-  We said before, that we would like to display the document attached to the article that has a name of "spip_logo" instead of the normal logo. In that case then, the code becomes:

The BOUCLE_logo_article_of_the_day loop selects from the documents attached to that article ({id_article}) the one that is named "spip_logo" ({titre=spip_logo}). Inside that loop, we request the display of that attached document using (#EMBED_DOCUMENT).

The usage of #EMBED_DOCUMENT inside squelette templates makes it possible to directly insert the document into the page using the standard loop mechanism. SPIP takes care of creating the corresponding code for the images or other multimedia files (depending on the type of the file that has been attached and embedded).

-  Once inconvenience: if the article does not have an attached document titled "spip_logo", then the code above will only display the title. So we will then make another modification, which will allows the display of the "normal" logo for the article if in fact that article does not have a specific attached document nominated for this purpose. Attention: once you’ve understood this concept, there aren’t any other subtleties to learn to achieve all of the effects detailed further below...

We have simply added the call to the "normal" logo (#LOGO_ARTICLE) as the alternative text (the code located just before the closing <//B...> of a loop, that will be displayed if the loop does not return any results itself - in this case, that will be when there isn’t any document attached to the article that bears the title of "spip_logo").

So we have obtained the result we were looking for:
-  if there is an attached document linked to the article to which we have assigned the title "spip_logo", then it will be directly displayed;
-  otherwise, it will be the "normal" logo that will be displayed.

Excluding these specific documents form the normal display of attached documents

In the articles template, we display the attached articles using the BOUCLE_documents_joints, which is constructed with the following criteria applied to it:

<BOUCLE_documents_joints(DOCUMENTS){id_article}{mode=document}{doublons}>

This calls the DOCUMENTS linked to this article ({id_article}), which are definitely attached documents and not just images ({mode=document}) and which have not already been displayed inside the text of the article by using the <EMBxx> shortcut ({doublons}).

We modify this code to prevent the display, inside of this loop (which is a kind of document "portfolio"), of any documents that have a title starting with "spip_" (we do not want to display here the "BIG" logo that is used on the site’s homepage):

The {titre!==^spip\_} criteria is a regular expression, the syntax of which has been very strictly formalised. It selects the documents that have a title which does not match the regular expression (the !== means "not matching the regular expression"): the first characters (the ^ symbol is used to denote the start of the text string) are "spip" followed by "_" (in regular expressions, we are required to use an "escape" character in order to specify the literal "_" by using the carat just beforehand, this "\_", since the "_" character plays a special role in regular expression syntax).

This criteria then selects attached documents with a title that does not start with "spip_".

The demonstration of the general principle is now finished, and you’ve now got the key ingredients necessary for you to work with on your own site. The examples that follow are simply some additional variants on the theme.

Always display a big logo at the top of the page

I have decided, once again quite arbitrarily, that there should always be a big image displayed at the top of the page for my articles. This is a graphical layout choice all of my own: in order to ensure some graphical consistency to my site, I’m going to display a large format version of an image linked to the article up at the top of the page (a variation on the "big" logo principle above), and if the article doesn’t have one of its own assigned, then I will use a "default" image that I have stored elsewhere on my site.

-  Still using the same principle: I attach a document to my article and assign it the title of "spip_top". (To make sure that the document does not display in the "portfolio" generated by the preceding BOUCLE_documents_joints loop, I have selected a different title that starts with "spip_".)

In my articles template, I simply display this document at the top of the page with this:

As in the previous example, I display the document linked to the article for this page which has a title of "spip_top". Too easy.

-  As with the earlier example, I would like to display the article logo instead of that document doesn’t exist for this article:

-  But this still isn’t quite the desired result. I insist, for reasons of graphical consistency, to make sure that I always have a big image in the predetermined image dimensions.

So I’m going to create some substitution images (still quite arbitrary on my part), for use in the event that an article doesn’t have any image of its own at all. These images that I create meet the graphical demands that I have stipulated (e.g. they have the same dimensions as the documents that I normally use for the "spip_top" image).

So somewhere on my site, I’ve create a section to host such substitution documents "in bulk". I need to activate the use of documents linked to sections/rubriques. (I could also create an article which hosts all these documents, and then not need to activate the availability of attaching documents to sections. But in the end, the code wouldn’t really be much different.) Assuming that this section was number 18 (a number which SPIP automatically assigns when the section is created). I then install all of my substitution (or default) documents into this section number 18. In this case, there’s no use giving each of these "bulk" documents any title.

In order to randomly call a document stored in this section, all I need to do use the criteria shown below:

(Attention: the {par hasard} criteria does not mean that the image selected will necessarily be a different one each time that the page is visited, only that it will be selected at random each time that the page is actually recalculated.)

We need to take care that the site navigation does not include section 19, which does not need to shown to site visitors at all. The criteria {id_rubrique!=18} will take care of that for us.

-  To complete the installation of our mechanism, we need to insert this loop displaying the randomly selected section 18 substitution document as the alternative text in our BOUCLE_doc_top loop (instead of the #LOGO_ARTICLE):

Displaying a graphical title

Still using the same principle, we are now going to display a graphical version of the article’s title. This involves an image that has been created using a graphical design programme, which uses the article’s title shown with a particularly carefully selected typographical layout (shadow effects, colour gradients, fancy fonts...).

-  We will state that this will be a attached document linked to the article that we will always name "spip_title".

-  To call this document, at the location where the #TITRE of the article would normally be displayed, we will include a now familiar looking loop instead:

Note again that this method not only allows us to use an image to display the title, but we could also use a Flash animation or a video clip... In such cases, you will need to specify manually what the pixel dimensions of your article are supposed to be.

-  So let’s finish of the mechanism: if there is no attached document bearing the title of "spip_title", then we need to display the necessary information as standard ordinary HTML text:

* * *

We’d like to mention here one last advantage to this kind of method...

It makes it possible to radically alter the graphical interface of your site again later at any time you choose. You won’t need to manually delete all these documents named as "spip_top", "spip_title"..., all you need to do is create new squelette templates that just simply don’t call them at all.

For example, if the "spip_top" documents have been previously all created with a width of 450 pixels, and the new graphical interface requires images with a width of 600 pixels instead, then you don’t need to modify all of your "spip_top" images one by one - you can just assign a new name for the replacement images, and install the new versions of the replacement documents at your own pace and name them "spip_large" instead. During the transition, there won’t be any glaring graphical inconsistencies from one article page to another.

The more adventurous readers might even imagine all sorts of tests for the document type ({extension=...}) or their size ({largeur=...}, {hauteur=...}) (no PHP necessary) to compile interfaces that respond to these tests (e.g. a certain graphical interface to use if "spip_top" has a 450 pixel width, and another if it has a 600 pixel width...).