Forums / Setup & design / Layering Text using image()

Layering Text using image()

Author Message

Alex Jones

Tuesday 27 April 2004 2:45:49 pm

I am running into a brick wall with textoimage and could really use some help. What I am trying to do is layer two pieces of text, one on top of the other. I cannot set up the system to provide what I need.

<b>The Setup</b>
Top Layer: White, no background color
Bottom Layer: Brown with yellow background color. The text will be shifted one pixel left and one pixel down.

Basically, this will provide a thin border on the right and bottom of the text which will sit upon a solid background. But the system just won't generate this. It includes the background color of the top layer, blocking the bottom layer altogether. Assigning some transparency to the top layer doesn't have any affect. Here are the setting and the code I am using:

<b>From texttoimage.ini</b>
Bottom Layer:
[nav_header_layer_0]
Family=1942
Angle=0
XAdjustment=-4
YAdjustment=0
WidthAdjustment=4
HeightAdjustment=4
TextColor=#887766
BackgroundColor=#FFCC7F

Top Layer:
[nav_header_layer_1]
Family=1942
Angle=0
XAdjustment=4
YAdjustment=4
WidthAdjustment=4
HeightAdjustment=4
TextColor=#ffffff

<b>Template Code</b>

{image( $specialhead|texttoimage( 'nav_header_layer_0' ), 
        $specialhead|texttoimage( 'nav_header_layer_1' ) ) }

$specialhead contains the text to be transformed and works properly. I have checked that both nav_header_layer_0 and nav_header_layer_1 can generate an image on their own, so the problem definitely comes in the layering.

FYI, I am using GD2, not ImageMagick.

Any help would truly be appreciated!

Alex

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Björn Dieding@xrow.de

Tuesday 27 April 2004 4:08:16 pm

here is some code that works

{image(concat($sitename,' ',$siteslogan),imagefile('logo_blank.png'|ezimage(no)|remove(0,1)),array($sitename|texttoimage('logo'),hash(transparency,0,halign,left,valign,top)),array($siteslogan|texttoimage('logoslogan'),hash(transparency,0,halign,left,valign,top)))}

but when ever I try to add a second one my apache crashed (Windows,apache2)

Looking for a new job? http://www.xrow.com/xrow-GmbH/Jobs
Looking for hosting? http://hostingezpublish.com
-----------------------------------------------------------------------------
GMT +01:00 Hannover, Germany
Web: http://www.xrow.com/

Alex Jones

Wednesday 28 April 2004 6:48:41 am

Thanks Björn, I'll try to use yoru code as a starting point. :)

Alex

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Alex Jones

Wednesday 28 April 2004 8:42:04 am

Well, I am closer than I was thanks to Björn's help, but the result is not quite perfect. I'm really really close though. :) I am now using:
<b>From texttoimage.ini.append</b>
[nav_header_layer_0]
Family=palab
TextColor=#ffffff
BackgroundColor=#FFCC7F

[nav_header_layer_1]
Family=palab
TextColor=#807360
BackgroundColor=#FFCC7F

With this code:

{image( array($specialhead|texttoimage('nav_header_layer_0'), hash(transparency,0,halign,left,valign,top)),
        array($specialhead|texttoimage('nav_header_layer_1'), hash(transparency,0.9,halign,left,valign,top,x,2,y,2)) ) }

But, what I would really like to figure out is how to tell the system to not apply any background color to <i>nav_header_layer_0</i>. If I do not specify the background color it automatically applies a white background which makes the entire image faded. Ideally, I want the background color to be set by <i>nav_header_layer_1</i> which also assigns the text color for the offset (like a shadow). Then <i>nav_header_layer_0</i> should only apply a top layer using white text without any background color.

For a visual check out http://www.silverspider.com/layered_text_example.gif
The top box shows the effect I want to achieve - please ignore the small caps for now - that's another question ;)
The second box shows <i>nav_header_layer_0</i>
The third box shows <i>nav_header_layer_1</i>
The final box shows the result of the above code, merging <i>nav_header_layer_0</i> with <i>nav_header_layer_1</i>.

Notice that in the final box the white text is dulled by the fact that the layer has to be somewhat transparent to allow the brown text behind to show through. Also notice that the brown text isn't as strong as it should be, due to the background color applied by the top layer.

Any ideas?

Alex

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

eZ debug

Timing: Jan 18 2025 15:59:10
Script start
Timing: Jan 18 2025 15:59:10
Module start 'content'
Timing: Jan 18 2025 15:59:11
Module end 'content'
Timing: Jan 18 2025 15:59:11
Script end

Main resources:

Total runtime0.9078 sec
Peak memory usage4,096.0000 KB
Database Queries197

Timing points:

CheckpointStart (sec)Duration (sec)Memory at start (KB)Memory used (KB)
Script start 0.00000.0058 587.7109180.8359
Module start 'content' 0.00580.7927 768.5469577.8984
Module end 'content' 0.79850.1093 1,346.4453340.7500
Script end 0.9078  1,687.1953 

Time accumulators:

 Accumulator Duration (sec) Duration (%) Count Average (sec)
Ini load
Load cache0.00380.4163210.0002
Check MTime0.00150.1609210.0001
Mysql Total
Database connection0.00090.102010.0009
Mysqli_queries0.830991.52461970.0042
Looping result0.00180.20151950.0000
Template Total0.883597.320.4417
Template load0.00200.224120.0010
Template processing0.881497.087720.4407
Template load and register function0.00010.008410.0001
states
state_id_array0.00070.074810.0007
state_identifier_array0.00060.065320.0003
Override
Cache load0.00190.2043670.0000
Sytem overhead
Fetch class attribute can translate value0.00110.124630.0004
Fetch class attribute name0.00090.095560.0001
XML
Image XML parsing0.00100.111630.0003
class_abstraction
Instantiating content class attribute0.00000.001780.0000
General
dbfile0.00450.4974330.0001
String conversion0.00000.000730.0000
Note: percentages do not add up to 100% because some accumulators overlap

CSS/JS files loaded with "ezjscPacker" during request:

CacheTypePacklevelSourceFiles
CSS0extension/community/design/community/stylesheets/ext/jquery.autocomplete.css
extension/community_design/design/suncana/stylesheets/scrollbars.css
extension/community_design/design/suncana/stylesheets/tabs.css
extension/community_design/design/suncana/stylesheets/roadmap.css
extension/community_design/design/suncana/stylesheets/content.css
extension/community_design/design/suncana/stylesheets/star-rating.css
extension/community_design/design/suncana/stylesheets/syntax_and_custom_tags.css
extension/community_design/design/suncana/stylesheets/buttons.css
extension/community_design/design/suncana/stylesheets/tweetbox.css
extension/community_design/design/suncana/stylesheets/jquery.fancybox-1.3.4.css
extension/bcsmoothgallery/design/standard/stylesheets/magnific-popup.css
extension/sevenx/design/simple/stylesheets/star_rating.css
extension/sevenx/design/simple/stylesheets/libs/fontawesome/css/all.min.css
extension/sevenx/design/simple/stylesheets/main.v02.css
extension/sevenx/design/simple/stylesheets/main.v02.res.css
JS0extension/ezjscore/design/standard/lib/yui/3.17.2/build/yui/yui-min.js
extension/ezjscore/design/standard/javascript/jquery-3.7.0.min.js
extension/community_design/design/suncana/javascript/jquery.ui.core.min.js
extension/community_design/design/suncana/javascript/jquery.ui.widget.min.js
extension/community_design/design/suncana/javascript/jquery.easing.1.3.js
extension/community_design/design/suncana/javascript/jquery.ui.tabs.js
extension/community_design/design/suncana/javascript/jquery.hoverIntent.min.js
extension/community_design/design/suncana/javascript/jquery.popmenu.js
extension/community_design/design/suncana/javascript/jScrollPane.js
extension/community_design/design/suncana/javascript/jquery.mousewheel.js
extension/community_design/design/suncana/javascript/jquery.cycle.all.js
extension/sevenx/design/simple/javascript/jquery.scrollTo.js
extension/community_design/design/suncana/javascript/jquery.cookie.js
extension/community_design/design/suncana/javascript/ezstarrating_jquery.js
extension/community_design/design/suncana/javascript/jquery.initboxes.js
extension/community_design/design/suncana/javascript/app.js
extension/community_design/design/suncana/javascript/twitterwidget.js
extension/community_design/design/suncana/javascript/community.js
extension/community_design/design/suncana/javascript/roadmap.js
extension/community_design/design/suncana/javascript/ez.js
extension/community_design/design/suncana/javascript/ezshareevents.js
extension/sevenx/design/simple/javascript/main.js

Templates used to render the page:

UsageRequested templateTemplateTemplate loadedEditOverride
1node/view/full.tplfull/forum_topic.tplextension/sevenx/design/simple/override/templates/full/forum_topic.tplEdit templateOverride template
4content/datatype/view/ezimage.tpl<No override>extension/sevenx/design/simple/templates/content/datatype/view/ezimage.tplEdit templateOverride template
4content/datatype/view/ezxmltext.tpl<No override>extension/community_design/design/suncana/templates/content/datatype/view/ezxmltext.tplEdit templateOverride template
11content/datatype/view/ezxmltags/paragraph.tpl<No override>extension/ezwebin/design/ezwebin/templates/content/datatype/view/ezxmltags/paragraph.tplEdit templateOverride template
6content/datatype/view/ezxmltags/line.tpl<No override>design/standard/templates/content/datatype/view/ezxmltags/line.tplEdit templateOverride template
2content/datatype/view/ezxmltags/literal.tpl<No override>extension/community/design/standard/templates/content/datatype/view/ezxmltags/literal.tplEdit templateOverride template
1pagelayout.tpl<No override>extension/sevenx/design/simple/templates/pagelayout.tplEdit templateOverride template
 Number of times templates used: 29
 Number of unique templates used: 7

Time used to render debug report: 0.0001 secs