[image_headline] Image Replacement

This topic should handle most of the common questions. Basically the heading.css file is used to determine what to replace. You need not add this rule to your page, unless you want to. If you want to use a TL CSS stylesheet, just change the config/config.php and point to the new CSS filename (image_headline.css), e.g.

Code:

---

$GLOBALS['TL_CONFIG']['imageheadline']['css'] = 'image_headline.css';

---

Release Notes:
I've updated the 0.5.1 stable build (4) so that it allows you to honour preference of css rules, by placing them further to the bottom of your heading.css file, e.g.

Code:

---

#main h1
{
 color: white;
}

#main h1.ce_headline
{
 color: black;
}

---

Black text will be rendered first, then white text, so that your override rule isn't white text as well.

I noticed that the background of text is rendered Grey instead of white when viewed with IE6.

I almost don't care but is there a work around for this? I tried to set a background color but not sure of the mechanics of where to set the color if that is even possible.


By the way, Great extension, easy to use, saves a huge amount of time over other CSS IR techniques. Would be nice to be able to control line breaks within a title. Seems that should be possible but could not figure out how.

I had to do a copy of alternate IR techniques for titles like attached.[attachment=0:32ouj9gf]corpPR.jpg[/attachment:32ouj9gf]

1. I love it, but unfortunately the IE6 PNG support is a known problem, so I specify that all my "designer" website require IE7+. As a web designer I only support 2 latest releases of a browser, IE7 & 8. F..k IE6 support!!!!!!!!! Those government website that don't want to upgrade to IE7 don't deserve PNG font replacement images! :mrgreen:

2. To control linebreaks to render a headline as a single image, and to control uppercase/lowercase, you simply add the CSS:

Code:

---

        white-space: nowrap;
        text-transform: uppercase;

---

To solve your two-line "problem" you can just place 2 CE elements after each other with 2 different headline levels:

CE Headline h1
Corporate & Financial

CE Headline h2
Public Relations

This would be the safest option, as headlines within headlines wouldn't work, as the code searches and replaces the interior of a css string.

I cant seem to get this to work in the header of my website even though it works in the main body of the text, is this a know issue? does anyone else have the same problem? or is it just me, lol?

I cant work out why. However im limited to only knowing XHTML and CSS (also little bits of typolight PHP).

anyone have any idea what it might be?

Thanks,
Ste

Hi,

Its been a while since I used this myself but since it works in one spot and not another, I would re-check your tags and css settings to see what may be happening. I don't think it should matter where it resides in your HTML so long as its within the body tags. If I recall correctly I had to alter the css in the file /system/modules/image_headline/html/heading.css for this to work as the readme states. Didn't work for me otherwise.

C.

hey,

thanks for getting back to me, i have checked and double checked my code, all i am trageting in the image_headline css is h1

Code:

---

/**
 *
 * ImageHeadline Module
 * Sample css file: heading.css
 *
 * CSS classes to replace with images in your TYPOlight output
 *
 */

h1
{
        font-family: dJ4;
        font-size:24pt;
        color:#000000;
}

---

for some reason it is changing the h1 tags in my body but not the header of my website :|.

Ste

The best is always to direct the replacement using a specific code, although a general tag will also work.

Code:

---

#main h1

---

is better for most occasions. Then you can use #main_menu a for your hyperlinks in your navigation in the header, etc.

I use this extension now for all my websites, and believe me it really works and there are still not only a few problems...

You still can't use inserttags, because leo's routine to parse the Output is done BEFORE the inserttags are replaced.

I've updated the extension, there are now a few file and path changes, but nothing too critical.

NOTE: WARNING!! DO NOT JUST INSTALL ON A PRODUCTION SITE -- YOU WILL HAVE TO MODIFY YOUR config.php file (unless you have placed your config parameters into the dcaconfig.php, which does not get overwritten).

The default now is to create a folder in tl_files/ with your css/ and fonts/ so you can manage them with the File Manager and import the CSS heading.css file using the Stylesheet Editor. The default pointer points to the root (TL_ROOT/headings.css), so all you have to do it import the stylesheet into the style sheet editor and you are setup.

The fonts can then be uploaded using the File Manager and because its a protected folder, no-one can download the fonts, but you can still manage them in the File Manager.

Hey,

how can I change the second level Navigation back to a regular font if the first level uses a special font?
If I set it to Verdana in the heading.css I get an error. If I set it to Verdana in my normal CSS file it gets ignored...

!importent doesn't help.
Code Example:

Code:

---

#mainnav .level_1 a {
font-family                        : FancyFont, verdana, arial, helvetica, sans-serif;
font-size                                : 20px;
color                                        : #00849f;
white-space                        : nowrap;
}

#mainnav .level_1 a:hover {
color                                        : #fff;
white-space                        : nowrap;
}

#mainnav .level_1 ul a {
font-family                        : verdana, arial, helvetica, sans-serif;
font-size                                : 10px;
color                                        : #00849f;
white-space                        : nowrap;
}

---

your CSS is wrong.... it should be:

Code:

---

#mainnav ul.level_1 a

---

just make sure your CSS in the headings.css is very specific.. add more trails if you need to... since level_2 is NOT level_1, it will not be replaced as there is no code for it... just don't add a generic #mainnav ul..

The css parsing isn't perfect...

Thanks for your help but it still doesn't work!?
I changed my CSS to this:

Code:

---

#mainnav ul.level_1 a {
font-family: FancyFont, verdana, arial, helvetica, sans-serif;
font-size: 20px;
color        : #00849f;
white-space: nowrap;
}

---

There is nothing else in the heading.css!
This is what I get:

Code:

---

<ul id="nav" class="vlist level_1">
        <li class="active first">[img]system/html/dtr-b04933dc3bb6e7e87b25db68108dfc27.png[/img]<span class="dtrtext">Home</span>
        <li class="submenu">
                [img]system/html/dtr-b1afe89b9bd18ba3caa8581b78f9e761.png[/img]<span class="dtrtext">Text</span>
                <ul class="vlist level_2">
                        <li class="first">[img]system/html/dtr-3b0418d358bed0fad47441d41a3a9445.png[/img]<span class="dtrtext">Text</span>
                        <li class="submenu">
                                [img]system/html/dtr-86eb8e5519749dcb2edb5abd2203fba0.png[/img]<span class="dtrtext">Text</span>
                                <ul class="vlist level_3">
                                        <li class="first">[img]system/html/dtr-3c9d33e0b0dbf41dab5861d3e3bc2f71.png[/img]<span class="dtrtext">Text</span>
                                [/list]
                       
                        [*][img]system/html/dtr-321080316f0c77ba9c57bf7b297e2af3.png[/img]<span class="dtrtext">Text</span>
                [/list]
        [/list]

---

Level 1, 2 and 3 get all images!?
I guess it's because of inheritance?
Any other ideas to solve this?

Thanks again,
Thorsten

Do you have any other hint how I can solve the problem?

yeah, you made a little mistake... understandably

ul.level_1 => li.level_1 => ul.level_2 => li.level_2 is still under ul.level_1, that's the mistake.

rewrite it to use ONLY the li.level_1, then you'll be sorted.

Code:

---

#mainnav ul li.level_1 a {
font-family: FancyFont, verdana, arial, helvetica, sans-serif;
font-size: 20px;
color  : #00849f;
white-space: nowrap;
}

---

Thanks again for your time and help but it still doesn't work :-(
What you say makes sense to me that I need to rewrite only the li level_1 but it doesn't work with your code:

Code:

---

#mainnav ul li.level_1 a

---

As far es I understand there is no "li.level_1" there is only a li under ul.level_1.
The hierarchy looks like this:

Code:

---

<div id="mainnav">
  <ul class="vlist level_1">[*] (no id or class to work with)
      <a> (no id or class to work with)

---

But even this code doesn't work:

Code:

---

#mainnav ul.level_1 li a

---

Any other hint?
Thorsten

Like I said, you cannot re-set fonts in the headings.css. you can ONLY replace fonts. So, you have two choices:

1. Try to use a child selector:

Code:

---

#mainnav ul.level_1 > li a

---

this will ensure that the "li a" combination must lie directly UNDER ul.level_1 as it's parent. This will not render li a elements under level_2, because they do not lie directly under (children) of ul.level_1, but level 2.

2. Make a custom navigation template and manually add in the level_1 as an additional class string into each LI element as well... This will make my code work then.

3. Why not just make the sub-pages also have the font replacement, just make it a smaller or different one, like this site I did for my client:
www.delaney.co.za

Thanks again for your help!

Thats a really interesting problem!
I think I understand HTML and CSS quite good but none of these solutions work…

The child selector and the custom navigation template doesn't solve the problem.
Not even a combination of both help. Strange.

Nr. 3 would help. Sure.
But it's still not the right solution for other reasons (design, font-style, etc.)

I guess I will try cufón or something like this now…
As soon as the Website is online I will post a link to show you the problem / solution ;-)

Thanks again for your time.

hey you could try targeting li li a

its a bit cheating but seems to work

example...

Code:

---

#navcontainer li li a

---

if you want to replace the font you will need to place the font in the correct folder and also need to target the li a separately from the li li a in the style sheet for image headline.

hope that helps.

Ste

Nope, thats not working...

The Problem is that I want to change the Top Level.
For some reason I can address the class or id however I want - they always work for the levels underneath as well.

The only way to solve this would be to replace the font in the other levels as well.
In my case I just want a normal web font like Arial or Verdana for the other levels.

It makes no sense to upload one of those fonts to the webserver... ;-)

I found my solution in cufon (http://cufon.shoqolate.com/) for now.
Very easy to implement as well.

Thanks for your help anyway!
Thorsten

Hi Thyon,

I really like your extension, but I think it might need some improvement. I was trying to use a standard navigation together with a custom navigation on a website. Both of them contained identical links. But only one navigatin should use image replacement via image_headline. But the extension always replaced links in both navigation bars. I tried several CSS-selectors to solve the problem but nothing really worked out.

Then I started to analyse your ImageHeadline.php - especially the replaceHeadlines function. Well, I'm probably no expert, but I think the problem is here:

Code:

---

$outertext = str_replace(">".$element->innertext."<", ">".$imageHeadline."<", $element->outertext);
$buffer = str_replace($element->outertext, $outertext, $buffer);

---

The extensions creates a new outertext and replaces any match in the buffer. By doing so, it doesn't check for the right selectors, but only matches the elements with an identical outertext. Unfortunately all links targeting the same page in different navigations have an identical outertext. I think you can fix this problem by modifying and saving the dom - at least it worked out pretty well for me:

Code:

---

$outertext = str_replace(">".$element->innertext."<", ">".$imageHeadline."<", $element->outertext);
$element->outertext = $outertext;
$buffer=$html->save();

---

What do you think?

yes I finally cracked that nut, but I just haven't updated it yet. I've also added in the new version a section in LAYOUT, where you can check the stylesheet to be used for image headlines. This means that you can assign image headlines to a layout. This makes it possible so that the image replacement isn't global, but layout specific and site specific (if you have multiple roots).

Now we're cooking! There are only 1 more feature before I release, which I'll add as a checkbox: [ x ] perform inserttag replacements on the innertext.

In the meantime, here is the correct replacement code for your section:

Code:

---

...
...
                $cssTags = array_reverse($css);
                foreach ($cssTags as $tag=>$cssStyle)
                {
                        $csstags = split(',', $tag);
                        foreach ($csstags as $csstag)
                        {

                                foreach($html->find($csstag) as $key=>$element)
              {

                                        // check for existing replacements in case CSS matches twice
                                        if (!preg_match('/<img class=\"dtrimage\"/', $element->innertext))
                                        {


                                                $imageHeadline = $this->createImages(trim($element->plaintext), $cssStyle, (array_key_exists($csstag, $cssHover) ?
                $cssHover[$csstag] : null) );

                                                // replace plaintext (not html) with new image headline
                                                $element->innertext = str_replace(trim($element->plaintext), $imageHeadline, $element->innertext);
                                        }
                                }
                        }
                }       


                // update html and save buffer
    $buffer = $html->save();

    // clean up memory
    $html->clear();
    unset($html);

                // output buffer
                return $buffer;
}

---

You have to include the $html - > clear and the unset, otherwise it causes a memory overflow.

This NEW 2.9 Contao version now replaces DOM element, so no more multiple page replacements. You can now have multiple NAVs on a single page. Yah!

This is a new release with some major improvements.

NOTE: THIS RELEASE CHANGES THINGS and by installing it you may have to change the settings and save them otherwise the site might be broken. UPGRADE AFTER HOURS SO YOU CAN TEST

• NEW* Specify the stylesheet in the Layout. Just checkbox the stylesheets (you can use more than one as well) and they will be merged into 1 stylesheet and then parsed [/*:m:1rbq59ew]
• NEW* in the Layout, optionally you can [ x ] add support for replaceInsertTags (so you can use inserttags in headings and text).[/*:m:1rbq59ew]
• NEW* the remaining settings that were in the config.php file have been moved into a section in the SETTINGS area in Contao (font path, image format and jpg quality are all settable in the backend now)[/*:m:1rbq59ew]

http://www.contao.org/extension-list/vi ... dline.html

I've written a small setup guide in the new Contao Factory we're creating for documentation (User, Extension, Developer).

http://www.contao-factory.com/image-headline.html

Hi!

Quote:

---

Originally Posted by thyon

• NEW* Specify the stylesheet in the Layout. Just checkbox the stylesheets (you can use more than one as well) and they will be merged into 1 stylesheet and then parsed [/*:m:1a834dlf]
• NEW* in the Layout, optionally you can [ x ] add support for replaceInsertTags (so you can use inserttags in headings and text).[/*:m:1a834dlf]

---

After Updating to Contao 2.9.1 and image_headline 0.5.3, I can't find any of these settings inside themes->layouts!

But the settings area inside the system settings is there and working!

What's wrong with my system?

Bye
Marcus (aka Tiggr)

Do you have any stylesheets to check. It might be another extension conflict ng

Hi!

It's strange: After disabling an reenabling all extensions, it works fine now!

Thank you very much for your help and that usefull extension!

Bye
Marcus (aka Tiggr)

Thanks for this ext, it's very usefull.
With php 5.3, split function is deprecated (E_DEPRECATE enabled).

yeah, sorry about that, I'll update it now. Do you know which module is complaining, because I have several plugins and those are the ones that I'm not able to update easily.

When I change the line-height property, the content doesn't change the space between lines.
Or is it meant to work out only with h1...h6

The Image Headline doesn't respond to line-height. It only reponds to certain properties: font-size, color, background-color and text-wrap.

Hello,
Sorry to bother you but i can't get the readme.txt file in the modules/image_headline folder...it seems to be missing

Can anybody send me it ?


i've got the 0.5.3 version installed

There is no readme anymore, because all the settings are now in the LAYOUT and in the SETTINGS area, there are no more files to configure....

The manual is located by clicking on the MANUAL button in the Extension Repository - Contao back-end catalog or Contao.org online catalog. Did you click that?

http://www.contao-factory.com/image-headline.html

Hi!


First of all: Thank you for this useful extension, Thyon!

I already use it successfully in major parts of a website I'm developing, but right now I'm having problems in applying it to a customized catalog page: The defined elements are not being replaced and atm I do not have a guess why.

e.g. http://emkon.mit2m.de/index.php/produkte.html (replacement works for defined child-elements of #left) vs. http://emkon.mit2m.de/index.php/produkt ... p-302.html (replacement does not work for (#left) .backlink a)

I use Contao 2.9.1, Catalog 2.0.0 beta1 and image_headline 0.5.3 stable.

Any hints greatly appreciated!


Best regards,
Matthias

I use it ALL the time for a left nav, so just double-check your CSS and make sure it's "published"... since the CSS isn't part of the source, I can't check it for you. send the css portion.

Hi Thyon!


Thanks for your help.

The replacement rules are activated/published in the templates used, inserttag replacement is activated too.

The whole image_headline "stylesheet" is located at http://emkon.mit2m.de/headings.css.

The relevant portion for the site not working (http://emkon.mit2m.de/index.php/prod...on-pp-302.html, catalogreader) is...

Code:

---

.backlink a {
font-family:TheSans-Caps;
font-size:10px;
color:#635C5F;
white-space:nowrap;
text-transform:uppercase;
}
.backlink a:focus,
.backlink a:hover,
.backlink a:active {
font-family:TheSans-Caps;
font-size:10px;
color:#009999;
white-space:nowrap;
text-transform:uppercase;
}

---

...while this excerpt works for another site (http://emkon.mit2m.de/index.php/produkte.html, cataloglist):

Code:

---

#catnav ul li a,
#catnav ul span {
font-family:TheSans-Caps;
font-size:10px;
color:#635C5F;
white-space:nowrap;
text-transform:uppercase;
}
#catnav ul li a:focus,
#catnav ul li a:hover,
#catnav ul li a:active {
font-family:TheSans-Caps;
font-size:10px;
color:#009999;
white-space:nowrap;
text-transform:uppercase;
}
#catnav ul li span.active {
font-family:TheSans-Caps;
font-size:10px;
color:#999999;
white-space:nowrap;
text-transform:uppercase;
}

---

For me these rules seem to be (more or less) identical and the selectors should be appropriate too, so I don't have a clue what goes wrong.

The backlink not replaced derives from a custom html module:

Code:

---

<div class="backlink">
{{link_open::back}}
{{iflng::de}}zurück zur Auswahl{{iflng}}
{{iflng::en}}return to selection{{iflng}}
{{link_close}}
</div>

---

I'm sorry to be so cheap on information, but since I have no idea where to search for my fault, I simply do not know what information to provide. Pleask ask and I will deliver asap.


Thanks again,
Matthias

Do a method of testing. Remove all the elements that could cause a problem first, then introduce them one by one to see which one is the culprit.

1. Make the Back link pure text (remove and backup all the inserttag nonsense) -- this could be 1 problem
2. You have TONS of css in the headline for pseudoclasses, when the image_headline can ONLY support a and a:hover, all the others will just screw up your headlines, so I suggest removing them ALL, and ONLY have two classes a and a:hover.

Simplify, simplify, simplify....

Hi Thyon!


{{link_open::back}}{{link_close}} seems to be the root of all evil in my case.

Thanks for your help and the clarification about the pseudoclasses!


Dank U well!
Matthias

why not just type the back link in manually, just copy it from the source....

Hi Thyon,


I already replaced the inserttag by the straight code it generates. Nevertheless: Thanks for that hint!

For me this problem can now be regarded als "solved".


Thanks for all,
Matthias

Hi Typhon,

i really love your extension. And after some time it works very well for me, but there i have one problem with the descender height. After some research iam starting to realize that your examples are only use uppercase text. Does this mean, that your extension don´t support normal letters with descender height?

Regards. Ralp

uh umm... its Thyon actually... :D

I'm working on adding padding support, which will eliminate this problem, as you can then manually add padding into the rendering. Remember that this padding will be internal to the image-headline and won't render as your ihl styles are not usually applied to the site.

You offer great support Typhoon,
I'm sure Ralph appreciates it :D

Quote:

---

Originally Posted by ramjet

You offer great support Typhoon,

---

Impossible. Tropical cyclones don't exist off the coast of Cape Town XD

After install and configured I get this error:
Fatal error: Cannot redeclare class csstidy_print in /Applications/MAMP/htdocs/contao-2.9.5/plugins/csstidy/class.csstidy_print.php on line 40
Any idea. Did I miss anything?

I'm not sure, as this error doesn't occur normally.

Please consider using the Font Squirrel @fontface packer, as now you can use their font included to generate actual fonts legally, as they modify the original TTF/OTF files so they cannot be used on a desktop, so they are web-safe. This is a much better solution that using the image_headline.

http://www.fontsquirrel.com/fontface/generator

i'm just in the same shoes with Spica. I'll try to fix the problem, following what you've posted. Hope it'll help
Thank you.

hi thyon,

still sticking to the same problem. tried fontquirrel, and it has done it well. But now in a projekt the needed font ist blacklistet and I cant render it anymore. Cant find any other way to make webonly webfont, do you?

therefore I maybe have to get back to image replacement, if I dont want to hurt licences. Meanwhile a new version is out. does it also work with the latest contao and is there anyhow the before reportet error solved or do I simply have to test it?

if a company blacklists the font from font squirrel, it means that you are REQUIRED to purchase a web-only or web-safe license from the provider of the font. You are NOT permitted to use the font on the website, even if you legally bought it for Desktop usage. Font foundry companies are realising now that they can cash in on the font web market to sell you the font again and again. The best way is then simply to switch to a free font, or try to find a free alternative font that is close to your font you're trying to use.

Hi Thyon

I was just looking for your Great Extension for the 2.10 Contao, and could not find it in the Katalog.

Do you know why i cant find it, is that because it is not for 2.10.

When will it be activated for 2.10.

Thanks for Your Help.

I am no longer supporting this extension, as previously stated. You can now use custom fonts directly in CSS in most browsers.

Quote:

---

Originally Posted by thyon

uh umm... its Thyon actually... :D

I'm working on adding padding support, which will eliminate this problem, as you can then manually add padding into the rendering. Remember that this padding will be internal to the image-headline and won't render as your ihl styles are not usually applied to the site.

---

Thank you thyon, areyour examples not only use uppercase text now?
Sorry for my question, I am a new hand.