Author Topic: [Mod] Background Image  (Read 37174 times)

0 Members and 1 Guest are viewing this topic.

Rembrandt

  • Guest
[Mod] Background Image
« on: October 03, 2009, 01:50:49 PM »
Hi!

Idee dazu: http://www.4homepages.de/forum/index.php?topic=25984.msg141700#msg141700

Mit dieser Modifikation ist es möglich ein beliebig großes Bild und einen darin enthaltenen formatierten Text auf der Home.html darzustellen.
Weiters ist es auch möglich ein Bild im Bild darzustellen.  

 Neue Datei:
image_background_bit.html

 Dateien zu ändern:
1.)index.php
2.)home.html

Demo:Demo

Erstellt eine neue Datei mit den Namen "image_background_bit.html" mit fogenden Inhalt,
und kopiert sie in euren Templates Ordner.
Code: [Select]
{image_background}
<!--  don't remove from top //-->
<!--  Below your TEXT //-->
<p style="text-align:center;margin-top:20px; color:red; font-size: 15px; font-weight: bold;">
<br>
 <a href="{bg_link}">{bg_image_name}</a>
<br>
{bg_description}
<br>

<a href="http://www.4homepages.de/forum/index.php?topic=25987.msg141707#msg141707"/>
<marquee behavior="alternate" scrollamount="5" scrolldelay="5">
<p style="color:yellow; font-size:15px;font-weight:bold;">[Mod] Background Image</p></marquee></a>
</p>
<!-- Above your TEXT  //-->
<!--  don't remove from bottom  //-->
</div>
</div>
</div>

sucht in der index.php:

//-----------------------------------------------------
//--- Print Out ---------------------------------------
//-----------------------------------------------------


und fügt darüber ein:

//######################################## Mod Background Image Start #############################################
$max "0.6"// Factor !
 
$sql "SELECT image_id, cat_id, user_id, image_name, image_description, image_keywords, image_date, image_active, image_media_file, image_thumb_file, image_download_url, image_allow_comments, image_comments, image_downloads, image_votes, image_rating, image_hits
        FROM "
.IMAGES_TABLE.
        WHERE image_active = 1 AND cat_id NOT IN ("
.get_auth_cat_sql("auth_viewcat""NOTIN").") AND image_media_file LIKE '%.jpg'
	
	
	
	
ORDER BY RAND()
	
	
	
	
LIMIT 1"

	
	
	
//
	
ORDER BY i.image_date DESC
$result $site_db->query($sql);
$back_row2 $site_db->fetch_array($result);

$file_src "./".MEDIA_DIR."/".$back_row2['cat_id']."/".$back_row2['image_media_file']."";
$bg_detail "./details.php?image_id=".$back_row2['image_id']."";
 
$image_info = @getimagesize($file_src);
	
	
$width $image_info[0]*$max."px";
	
if(empty(
$width)){ 
	
	
$width "300px";     //fallback
	

	
	
$height $image_info[1]*$max."px";
	
if(empty(
$height)){ 
	
	
$height "200px";   //fallback

$site_template->register_vars(array(
                
"bg_link" => $bg_detail,
	
"bg_description" => $back_row2['image_description'],
	
"bg_image_name" => $back_row2['image_name']
	
));
	

  
$images_overlay .= "<div style=\"z-index:1;\"><div style=\"border:0px;position:relative;z-index:2;width:$width; height:$height;\"><img src=\"".$file_src."\" style=\"border:0px;width:$width; height:$height;\" alt=\"".$back_row2['image_name']."\"><br>"
  
$images_overlay .= "<div style=\"position:absolute;z-index:3;top:1px;\">";
  
$images_overlay .= $site_template->parse_template("image_background_bit");
  
$site_template->register_vars("image_background"$images_overlay);
unset(
$images_overlay);
//######################################## Mod Background Image END #############################################


in der home.html könnt ihr jetzt mittels {image_background} das Hintergrundbild darstellen.
Den darzustellenden Text schreibt ihr in die image_background_bit.html.
Mit $max = "0.6"; // Factor ! könnt ihr die größe des bildes angeben (im php code ganz oben).

Viel Spass damit ! :)

mfg Andi

Edit: so ich habe jetzt noch auf "Kundenwunsch"  :mrgreen: zwei variablen hinzugefügt, mit der könnt ihr den beschreibungstext und den namen des hintergrundbildes einblenden.
{bg_image_name} {bg_description} und {bg_link}.

weiters habe ich festellen müßen das es anscheinend auf  einigen server probleme gibt mit den auskomentierten zeilen " <!-- blabla --> wenn das bei euch der fall ist, löscht die betreffenden komentare in der images_background_bit.html
« Last Edit: October 06, 2009, 06:15:28 AM by Rembrandt »

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: [Mod] Background Image
« Reply #1 on: October 03, 2009, 02:50:58 PM »
Hallo Andi,

... interessantes und gut ausbaubares (vom Design her) Feature für die 4images Startseite ...
... doch folgende Probleme zeigen sich für mich noch auf deiner Demo-Seite ...
... im IE werden offenbar die Bildabmessungen nicht richtig dargestellt, das Thumb sehe ich nicht ...
... im Safari sehe ich keine Bilder und der DIV-Container schieb sich über die folgende Tabelle (letzter Upload) ...
... offensichtlich müssen die die div-Eigenschaften noch etwas optimiert werden ...
Your first three "must do" before you ask a question ! ( © by V@no )
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...

Rembrandt

  • Guest
Re: [Mod] Background Image
« Reply #2 on: October 03, 2009, 02:56:36 PM »
Hi!
....

thx fürs testen, der fehler ist mir auch aufgefallen, darum habe ich diesen mod erst mal gekübelt.

ich denke ich habe den fehler gefunden, bei der variable "$images_overlay ="  habe ich einen punkt vergessen.
es sollte lauten "$images_overlay .="

mfg Andi

EDIT: könntest es bitte nochmal testen, mir raucht schon der kopf :)
auf meiner demoseite scheint es jetzt zu funktionieren.

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: [Mod] Background Image
« Reply #3 on: October 03, 2009, 03:14:39 PM »
... funktioniert jetzt bestens im MSIE und Safari (andere Browser stehen mir jetzt gerade nicht zur Verfügung) ...
... und wie bereits gesagt ...
... das Feature lässt sich sehr gut in der image_background_bit.html mit html an die eigenen Bedürfnisse anpassen ...

... Klasse ... kanst jetzt verschieben ... ;)
Your first three "must do" before you ask a question ! ( © by V@no )
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...

Rembrandt

  • Guest
Re: [Mod] Background Image
« Reply #4 on: October 04, 2009, 11:51:06 AM »
Hi!

ich mußte leider ein kleines codeupdate machen, ich bin draufgekommen das mit "background:url" es nicht möglich ist die bilder in einen container verkleinert darzustellen.
ich hab das ganze jetzt mit z-index gemacht, und es funktioniert einwandfrei.
eine andere möglichkeit hätte es noch gegeben, und zwar mittels "imagecopy", wäre aber zu aufwändig und zu langsam gewesen, und ohne GD hätte es auch wiederrum nicht funktioniert.

mfg Andi

Offline Sumale.my

  • Addicted member
  • ******
  • Posts: 1.773
  • Neverdie
    • View Profile
Re: [Mod] Background Image
« Reply #5 on: October 04, 2009, 01:42:27 PM »
Saubere Arbeit, wie immer!!
Hamme Feature!

Offline bergblume

  • Sr. Member
  • ****
  • Posts: 463
  • on to the top!
    • View Profile
Re: [Mod] Background Image
« Reply #6 on: October 05, 2009, 11:28:48 AM »
servus andi,

heute schaue ich - nach meinem "urlaubswochenende" - mal wieder ins forum und entdecke hocherfreut, deinen antwort-post!! schaut ja hammergeil bei dir aus...

ich bekomme es leider mit dem von dir oben geposteten code nicht zum laufen... => kannst du mal schauen was evtl. falsch ist... www.tourendatenbank.com
ich habe die neue html-datei so übernommen und in meinen templates ordner kopiert und auch die index.php entsprechend abgeändert...

gruss und danke dir!
bergblume

edit:_ ich sehe gerade, dass das hier in meinem quellcode auf der home-seite ausgegeben wird:
Code: [Select]
<div style="z-index:1;"><div style="border:0px;position:relative;z-index:2;width:0; height:0;"><img src="SCRIPT_URL/data/media/123/CIMG2548.JPG" style="border:0px;width:0; height:0;"><br><div style="position:absolute;z-index:3;top:1px;">


da scheint was nicht zu passen...

Rembrandt

  • Guest
Re: [Mod] Background Image
« Reply #7 on: October 05, 2009, 12:36:12 PM »
Hi!
....
da scheint was nicht zu passen...
hm.. ich jetzt nochmal den original code im eingangspost hinnein kopiert, kannst es bitte nochmal versuchen.

mfg Andi

Edit: soda.. läuft alles  :D im eingangspost habe ich ein fallback eingebaut falls keine exifdaten vorhanden sind.
« Last Edit: October 05, 2009, 02:22:40 PM by Rembrandt »

Offline bergblume

  • Sr. Member
  • ****
  • Posts: 463
  • on to the top!
    • View Profile
Re: [Mod] Background Image
« Reply #8 on: October 05, 2009, 04:01:52 PM »
hallo andi,

habe mir deinen code nochmals selbst genauer angeschaut...

muss es in dem code, der in die index.php eingefügt wird, in zeile 12 nicht wie folgt ausschauen:

Quote
$file_src = "".$script_url."/".MEDIA_DIR."/".$back_row2['cat_id']."/".$back_row2['image_media_file']."";

und ein problem besteht.... es werden z.T. beschreibungen über das bild geblendet, die überhaupt nicht zu dem bild gehören.

aber ansonsten ne tolle sache!
danke, bergblume

Rembrandt

  • Guest
Re: [Mod] Background Image
« Reply #9 on: October 05, 2009, 04:15:33 PM »
...
und ein problem besteht.... es werden z.T. beschreibungen über das bild geblendet, die überhaupt nicht zu dem bild gehören....
das war ja nie vorgesehen, die beschreibung die du auf meiner demo seite siehst gehört ja auch zu den eingeblendeten thumbnail.

aber wie gesagt ich sehe mir das an, im moment habe ich da irgendwo einen denkfehler.
 wenn ich die beschreibung zu den hintergrundbild registriere,

$site_template
->register_vars(array(
  
"bg_description" => $back_row2['image_description'],

kann ich es nicht in der "image_background_bit.html " verwenden, .. da gehören gescheitere her.  :( <--- bin i söba  :mrgreen:

mfg Andi
« Last Edit: October 05, 2009, 04:51:09 PM by Rembrandt »

Offline bergblume

  • Sr. Member
  • ****
  • Posts: 463
  • on to the top!
    • View Profile
Re: [Mod] Background Image
« Reply #10 on: October 05, 2009, 04:21:47 PM »
ahhh ok, verstehe... ich dachte, dass das bei dir schon läuft... aber wenn das "nur" zum thumbnail gehört ist allles klar...
wie kann man den Titel (Überschrift mit der Detailseite des Bildes) verlinken?

Rembrandt

  • Guest
Re: [Mod] Background Image
« Reply #11 on: October 05, 2009, 04:27:47 PM »
so habs schon...
im eingangspost habe ich die vars {bg_image_name} und {bg_description} hinzugefügt.

damit könnt ihr den namen und die bescheibung des hg bildes einblenden.

mfg Andi ...

... und aus

EDIT: {bg_link} hinzugefügt
« Last Edit: October 05, 2009, 05:32:06 PM by Rembrandt »

Offline bergblume

  • Sr. Member
  • ****
  • Posts: 463
  • on to the top!
    • View Profile
Re: [Mod] Background Image
« Reply #12 on: October 05, 2009, 07:29:19 PM »
prima.... klappt nun wunderbar...
noch folgende frage bzw. "zusatzaufgabe" ... wenn ich ein zusätzliches image-feld erstellt habe, das z.B. image_region heißt... wie kann ich dieses neben der description angezeigt bekommen?

Rembrandt

  • Guest
Re: [Mod] Background Image
« Reply #13 on: October 05, 2009, 07:47:30 PM »
...
 wenn ich ein zusätzliches image-feld erstellt habe, das z.B. image_region heißt... wie kann ich dieses neben der description angezeigt bekommen?
{bg_description}<img src"pfad zum bild" width="wasweisich" height="keineahnung" alt="denbildnamen">

mfg Andi

Offline bergblume

  • Sr. Member
  • ****
  • Posts: 463
  • on to the top!
    • View Profile
Re: [Mod] Background Image
« Reply #14 on: October 05, 2009, 07:54:39 PM »
hi andi,

ich glaube du hast mich falsch verstanden...

ich habe mit diesem mod ein neues image-feld, das auch text in der detailansicht ausgibt...
diesen text möchte ich jetzt genuaso wie es bei der description schon der fall vor  dem bild ausgegeben haben.

gruss, bergblume