4images Forum & Community
Welcome, Guest. Please login or register.
Did you miss your activation email?
November 25, 2017, 04:47:27 AM

Login with username, password and session length
Search:     Advanced search
Togle to toolbar
Translate this page with =>
Translate this page >
* Home Help Search Login Register
 
+  4images Forum & Community
|-+  4images Modifications / Modifikationen
| |-+  Mods & Plugins (Releases & Support) (Moderators: mawenzi, Rembrandt)
| | |-+  [Mod] Background Image
0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] 2 » »» Print
Current Topic Rating: *****
Author Topic: [Mod] Background Image  (Read 31997 times)
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 896

Vienna


View Profile WWW
« 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{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:
1
2
3
//-----------------------------------------------------
//--- Print Out ---------------------------------------
//-----------------------------------------------------

und fügt darüber ein:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//######################################## 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 ! Smile

mfg Andi

Edit: so ich habe jetzt noch auf "Kundenwunsch"  Mr. Green 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 » Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
mawenzi
Moderator
4images Guru
*****
Offline Offline

Posts: 4500

Thank You
-Given: 36
-Receive: 121


View Profile
« 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 ...
Logged

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
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 896

Vienna


View Profile WWW
« 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 Smile
auf meiner demoseite scheint es jetzt zu funktionieren.
Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
mawenzi
Moderator
4images Guru
*****
Offline Offline

Posts: 4500

Thank You
-Given: 36
-Receive: 121


View Profile
« 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 ... Wink
Logged

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
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 896

Vienna


View Profile WWW
« 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
Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Sumale.my
Addicted member
******
Offline Offline

Posts: 1768

Thank You
-Given: 167
-Receive: 83

Neverdie


View Profile
« Reply #5 on: October 04, 2009, 01:42:27 PM »

Saubere Arbeit, wie immer!!
Hamme Feature!
Logged
bergblume
Sr. Member
****
Offline Offline

Posts: 463

Thank You
-Given: 37
-Receive: 11

on to the top!


View Profile
« 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:
1
2
<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...
Logged
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 896

Vienna


View Profile WWW
« 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  Very Happy im eingangspost habe ich ein fallback eingebaut falls keine exifdaten vorhanden sind.
« Last Edit: October 05, 2009, 02:22:40 PM by Rembrandt » Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
bergblume
Sr. Member
****
Offline Offline

Posts: 463

Thank You
-Given: 37
-Receive: 11

on to the top!


View Profile
« 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  [Expand]
$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
Logged
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 896

Vienna


View Profile WWW
« 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,
1
2
$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.  Sad <--- bin i söba  Mr. Green

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

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
bergblume
Sr. Member
****
Offline Offline

Posts: 463

Thank You
-Given: 37
-Receive: 11

on to the top!


View Profile
« 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?
Logged
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 896

Vienna


View Profile WWW
« 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 » Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
bergblume
Sr. Member
****
Offline Offline

Posts: 463

Thank You
-Given: 37
-Receive: 11

on to the top!


View Profile
« 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?
Logged
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 896

Vienna


View Profile WWW
« 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
Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
bergblume
Sr. Member
****
Offline Offline

Posts: 463

Thank You
-Given: 37
-Receive: 11

on to the top!


View Profile
« 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
Logged
Pages: [1] 2 » »» Print 
« previous next »
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2015, Simple Machines Valid XHTML 1.0! Valid CSS!
Page created in 0.07 seconds with 20 queries.
Post your comments here