[image_headline] Image Replacement

[thyon]

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.

$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.

#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.

[nvisioncurtis]

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]

[thyon]

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:

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

[thyon]

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.

[matchboxhero]

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

[nvisioncurtis]

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.

[matchboxhero]

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

/**
 *
 * 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

[thyon]

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

#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.

[thyon]

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.

[cranker]

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:

#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;
}

[thyon]

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

#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...

[cranker]

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

#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:

<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

[cranker]

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

[thyon]

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.

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

[cranker]

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:

#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:

<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:

#mainnav ul.level_1 li a

Any other hint?
Thorsten

[thyon]

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:

#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

[cranker]

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.

[matchboxhero]

hey you could try targeting li li a

its a bit cheating but seems to work

example...

#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

[cranker]

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

[wicked]

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:

$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:

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

What do you think?

[thyon]

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:

...
...
		$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.

[thyon]

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

[thyon]

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

[Tiggr]

Hi!

• 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)

[thyon]

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

[Tiggr]

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)

[vmulot]

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

[thyon]

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.

[chrillemeter]

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

[thyon]

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

[septentrio]

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

[thyon]

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....

[thyon]

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

[mit2m]

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

[thyon]

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.

[mit2m]

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...

.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):

#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:

<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

[thyon]

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....

[mit2m]

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

[thyon]

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

[mit2m]

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