Drupal + Ajax + Custom fonts + Flash + PNG = cross-browser site

Recently, I was tasked with developing a website on Drupal using powerful Flash, proprietary fonts and PNG-graphics so that all this would equally display in office IE6 and other more popular browsers. With all the technologies, I worked for a long time, but I could not even imagine that all together would turn out to be one big headache. But a million different particular solutions did lead me to a general solution to this long equation. What I’m going to talk about in this article.

Task

Drupal product catalog with flash-magazine as a “highlight” and replacement of standard fonts in menus and headers.

Go!

Usually, when developing a design layout for a future Drupal site to reduce development time, I used the Framework theme that was shoveled for myself . And this time, did the same as the previous ones. The general structure was developed, it was necessary to fasten flash to it.

The first dead end. Flash in Drupal Theme

Since the future site of the customer was located on my hosting without access rights to the source code, but with the rights of the Drupal Administrator, it was necessary to prohibit changing the inserted flash element. The usual swftools had to be abandoned.
After a long search for a solution (since the usual insertion of flash into HTML in the Drupal theme did not give any results), the flash object was inserted using the following code:



- The code, of course, is as old as the World and, possibly, is not correctly built, but it worked! And this is the main thing. But, since the inserted element took up a lot of space relative to the main content of the page and did not plan to change, I suggested that the user, after a single review of this flash-clip, would not want to see it in the future. In order not to distract the visitor, it was necessary to give the opportunity to "hide" the element, but at the same time, to give the opportunity to see it again. Ideally, without reloading the page.
The decision came quickly. Using simple jQueery and not complicated additional js-file in the subject:
  1. Install jQuery Update and jQuery UI modules in Drupal
  2. In the Drupal topic, add the necessary CSS (for the blocks that we want to hide or show)
  3. Add a JS file hiding / showing these elements to the theme
  4. Create a button, when clicked, that same action will be performed

To my surprise, everything worked and there were no conflicts. But the effect was not, in fact, achieved. After switching to another page, everything was repeated from the beginning.

The second dead end. Ajax and Drupal

After painful deliberation, weighing all the pros and cons, I nevertheless decided to use ajax-loading of the content so that the hidden blocks with flash would not be updated along with the rest of the content.
After some searches, I found several solutions on the network. I chose the first one and began to twist it to the site being created. The so-called “solution” - Page renderer + Asynchronous modules and the corresponding theme from the same manufacturer. For some reason, now they are not available on drupal.org. Apparently, because I was far from the only one who ran into the problems of this “solution”. At first glance, everything was great! I screwed the topic, installed the modules, configured. It all worked! And moreover, it worked very nicely: when I clicked on one or another internal link, a CSS div divisible by means of means appeared, notifying about the loading being done. I finalized some details of the topic and when everything was ready, I set about filling the site with information itself (text, photo, etc.), but the saddest thing happened: Any Wysiwyg editors and some modules, also important for me, refused to work. They seemed to be gone. Having spent several sleepless nights at the laptop, having smoked more than a block of cigarettes and having drunk more than a dozen liters of coffee in search and elimination of the conflict, I was forced to abandon all this “beauty” and start looking for another solution. And it was found:
  1. We install (in addition to the already installed jQuery Update and jQuery UI) the AjaxIT module , not forgetting to update / install the necessary libraries
  2. We configure it according to the theme of the site (everything is very simple there)

And "Oh, God!" - it works! True, a beautiful boot element does not appear. But this, I think, for those who care, it’s not difficult to screw it on their own. When everything worked, it seemed to me that I could only dance for joy, but it wasn’t there. I forgot about replacing standard fonts with mine.

Third impasse. Drupal + AjaxIT + Cufon = conflict

I'm used to using the Cufon module and the font converter in JS for it. But this time, having completed all the usual actions, I did not get any result. At first, I thought that the problem was in the font, but after applying another, already tested, I did not get anything again. Then the @ font-face property surfaced in my head.

The fourth impasse. @ font-face and Opera

Without delving into the wilds of the World Wide Web for a long time, I found a font-face generator , the operation with which seemed extremely simple to me, which alerted me. But the apprehension of simplicity did not seem to find excuse after testing the site for cross-browser compatibility in Adobe BrowserLab - even the world-wide “beloved” donkey worked like a clock. But, calling my friend with joyful news and a desire to brag about the work done with a request to test the site and take me a screen, I was dumbfounded to receive a letter from her - in the Opera, which she used (10.50), the fonts that I screwed so carefully were not displayed.
After some deliberation and attempts to find a suitable solution, using the code:

@font-face {
font-family: 'Шрифт';
src: url('Шрифт_normal-webfont.eot');
src: local('Шрифт'), local('Шрифт-Normal'), url('Шрифт_normal-webfont.woff') format('woff'), url('Шрифт_normal-webfont.ttf') format('truetype'), url('Шрифт_normal-webfont.svg#Шрифт') format('svg');
}

- came to the desired result. All browsers of interest to me (including Opera, which more than thirty percent of Russian users of my projects prefer) displayed fonts and all other content as I wanted.
It only remained to display PNG in IE6, for which I used the module for Drupal - PNG behave . And he carried out his work with dignity.

If you have questions, I can tell you in detail about each of the "dead ends" that this or that technology drove me into when creating this project and provide a link to the result.

Also popular now: