Dateiwähler für Bilder, Flash und Videos

Gesperrt
chobbert
Beiträge: 371
Registriert: Mo 14. Jul 2003, 10:14
Wohnort: Frankfurt am Main
Kontaktdaten:

Dateiwähler für Bilder, Flash und Videos

Beitrag von chobbert » Do 14. Aug 2003, 21:27

Hallo zusammen,

für ein Projekt habe ich eine Art Dateiwähler gebraucht. Es sollte möglich sein, die URL eines Bildes oder eines Videos aus den Upload-Ordnern von Contenido in das Text-Eingabefeld eines Moduls zu schreiben.

Vielleicht hat der eine oder andere ja Verwendung dafür...


Folgende Datei wird unter /contenido/choose_pics.php abgespeichert:

Code: Alles auswählen

<?
/* choose_pics.php
*  zum Auswählen von Bild-, Flash- und Quicktime-Dateien und der Übertragung des Wertes in ein Textfeld
*  benötigt Internet Explorer ab Version 5.0
*
* Autor:      Robert Strouhal
* Version:    0.8
* Datum:      14.08.2003
*
*****************
*
* Verwendung:
* übeträgt den Namen der ausgewählten Datei in ein Textfeld innerhalb der Datei,
* die das PopUP mit dem Datei-Auswähler geöffnet hat.
*
* im Input-Bereich des betreffenden Contenido-Moduls wird folgendes JavaScript benötigt:
*
****
* <script language="JavaScript">
*
* function openPicSelector(form, getwidth, filetype){
*   var url = "choose_pics.php?&client=<? echo $client; ?>&form="+form+"&getwidth="+getwidth+"&type="+filetype;
*   window.open(url,"","height=450,width=700,scrollbars=yes,status=yes");
* }
*
* </script> 
****
*
* innerhalb des Input-Bereichs können dann folgende Input-Felder eingesetzt werden:
*
* <input type="text" name="CMS_VAR[1]" value="CMS_VALUE[1]" onClick="openPicSelector(this.name, 0, 'mov')">
*
* die drei Parameter der Funktion openPicSelector bedeuten:
*
* 1. this.name  -> darf nicht verändert werden, beinhaltet den Namen des Eingabefeldes
* 2. 0          -> die Breite der gesuchten Bilder, bei 0 werden Bilder unabhängig von Ihrer Breite angezeigt
* 3. 'mov'      -> beschränkt die Suche auf bestimmte Dateitypen; möglich sind: 'jpg', 'gif', 'png', swf', 'mov'; bei 0 werden alle Dateitypen angezeigt
*
****
*/


include_once ('./includes/config.php');
include_once ($cfg["path"]["classes"] . 'class.plugin.php');
include_once ($cfg["path"]["classes"] . 'class.xml.php');
include_once ($cfg["path"]["classes"] . 'class.navigation.php');
include_once ($cfg["path"]["classes"] . 'class.template.php');
include_once ($cfg["path"]["classes"] . 'class.backend.php');
include_once ('./includes/functions.upl.php');

?>
<html>
<head>
<title>Bild ausw&auml;hlen</title>
<link rel="stylesheet" type="text/css" href="<? print $cfg["path"]["contenido_fullhtml"] . $cfg["path"]["styles"] ?>contenido.css">
</HEAD>
<BODY MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>

<table cellspacing="0" cellpadding="0" border="0" width="100%">

    <tr style="background-color: #C6C6D5; height: 18px">
        <td style="font-family: Arial; font-size: 10pt; color: #FFFFFF; font-weight: bold;"><span style="margin: 10px;">Bild ausw&auml;hlen</span></td>
    </tr>

    <tr style="background-color: #747488; height: 1px">
        <td><img src="images/spacer.gif" width="1" height="1"></td>
    </tr>
</table>
<?


// Create Contenido classes
$db  = new DB_Contenido;

if (!$folder){
	$folder = "bilder/";
	}

echo "<div style=\"margin: 10px;\">";



if ($type == 0){
$sql="SELECT DISTINCT dirname FROM ".$cfg["tab"]["upl"]." WHERE idclient='$client' AND (filetype='jpg' OR filetype='gif' OR filetype='png' OR filetype='$type')";
}else{
$sql="SELECT DISTINCT dirname FROM ".$cfg["tab"]["upl"]." WHERE idclient='$client' AND (filetype='$type')";
}




$db->query($sql);

echo "<table width=\"400\" cellspacing=\"0\" cellpadding=\"3\" border=\"0\" style=\"border:0px; border-left:1px; border-top: 1px;border-color: #747488; border-style: solid;\">\n";

echo "<tr style=\"background-color: #a9aec2\">\n";
echo "<td style=\"font-family: Arial; font-size: 10pt; border: 0px; border-bottom:1px; border-right:1px; border-color: #747488; border-style: solid\">";
echo "Ordner auswählen:\n";
echo "</td>\n";
echo "<td style=\"font-family: Arial; font-size: 10pt; border: 0px; border-bottom:1px; border-right:1px; border-color: #747488; border-style: solid\">";

echo "<select style=\"font-size: 9pt;\" name=\"folders\" onChange=\"document.location.search = document.location.search+'&folder='+this.value\">";
while($db->next_record()){
	echo "<option value=\"".$db->f("dirname")."\" ";
	if ($folder == $db->f("dirname")){
		echo " selected ";
		}
	echo ">".$db->f("dirname")."</option>\n";
	}
echo "</select></td>\n";
echo "<td style=\"font-family: Arial; font-size: 10pt; border: 0px; border-bottom:1px; border-right:1px; border-color: #747488; border-style: solid\">&nbsp;</td>\n";
echo "</tr>\n";


$sql = "SELECT * FROM ".$cfg["tab"]["upl"]." WHERE idclient='$client' AND dirname='".$folder."'";

if ($type === 0){
$sql .= " AND (filetype='jpg' OR filetype='gif' OR filetype='png' OR filetype='$type')";
}else{
$sql .= " AND (filetype='$type')";
}


    $db->query($sql);
    while($db->next_record()){


switch ($type){
	case "jpg": $type=1; break;
	case "gif": $type=2; break;
	case "png": $type=3; break;
	case "swf": $type=4; break;
	case "mov": $type=5; break;
	case "0": $type = 0;
}


if ($type != 5){
    $imgsize = getimagesize("../cms/upload/".$folder.$db->f("filename"));
    $width  = $imgsize[0];
    $height = $imgsize[1];
    $filetype = $imgsize[2];
    }
elseif ($type == 5){
	require_once "includes/getid3/getid3.php";
	$imgSize = GetAllFileInfo("../cms/upload/".$folder.$db->f("filename"));
    $width  = $imgSize["video"]["resolution_x"];
    $height = $imgSize["video"]["resolution_y"];
    $filetype = 5;
    }


    if ((($width == $getwidth) || ($getwidth == 0)) && (($filetype==$type) || ($type==0))){

        if ($width > 100){
            $ratio = (100/$width);
            $width = 100;
            $height = $ratio*$height;
            }

        if ($height > 60){
            $ratio = (60/$height);
            $width = $ratio*$width;
            $height = 60;
            }


           echo "<tr style=\"background-color: #F4F4F7\">\n";
           echo "<td style=\"border: 0px; border-bottom:1px; border-right:1px; border-color: #747488; border-style: solid\" >";

           if ($filetype < 4){
           echo "<img src=\"../cms/upload/".$folder.$db->f("filename")."\" width=".$width." height=".$height.">";
           }
           elseif ($filetype == 4){
           echo "<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0\" width=\"$width\" height=\"$height\"><param name=\"movie\" value=\"../cms/upload/".$folder.$db->f("filename")."\"><param name=\"quality\" value=\"high\"><param name=\"bgcolor\" value=\"#DBE3EF\"><embed src=\"../cms/upload/".$folder.$db->f("filename")."\" quality=\"high\" bgcolor=\"#DBE3EF\" width=\"$width\" height=\"$height\" type=\"application/x-shockwave-flash\" pluginspace=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\"></embed></object>";
           }
           elseif ($filetype == 5){
           echo "<embed src=\"../cms/upload/".$folder.$db->f("filename")."\" type=\"video/quicktime\" pluginspage=\"http://www.apple.com/quicktime/download/\" width=\"".$width."\"  height=\"".$height."\" volume=0>";
           }


           echo "</td>\n";
           echo "<td style=\"font-family: Arial; font-size: 10pt; border: 0px; border-bottom:1px; border-right:1px; border-color: #747488; border-style: solid\">".$db->f("filename");
           echo "<br>\n";
           echo "<table style=\"font-family: Arial; font-size: 8pt;\">\n";
           echo "<tr><td>Beschreibung:</td><td>".$db->f("description")."</td></tr>\n";
           echo "<tr><td>Breite:</td><td>".$width." px</td></tr>\n";
           echo "<tr><td>Höhe:</td><td>".$height." px</td></tr>\n";
           echo "</table>\n";

           echo "</td>\n";
           echo "<td style=\"font-family: Arial; font-size: 10pt; border: 0px; border-bottom:1px; border-right:1px; border-color: #747488; border-style: solid\"><a href=\"#\"   onClick=\"opener.tplcfgform.elements['".$form."'].value='".$folder.$db->f("filename")."'; window.close()\"><img src=\"images/but_ok.gif\" alt=\"Bild ausw&auml;hlen\" border=0></a></td>\n";
           echo "</tr>\n";


           echo "</tr>\n";
        }

    }
echo "</table>";

echo "<br><a href=\"#\" onClick=\"opener.forms[0].elements['".$form."'].value=''; window.close()\"><img src=\"images/but_cancel.gif\" alt=\"Kein Bild ausw&auml;hlen\" border=0></a>\n";
echo "</div>\n";
?>

Um die Breite von Videos zu erkennen, wird die getid3-Library von http://getid3.sourceforge.net in den Ordner /contenido/includes/getid3/ abgelegt.


Wenn man den Datei-Wähler in seinen Modulen einsetzen will, schreibt man folgendes JavaScript in den Anfang des Input-Bereichs:

Code: Alles auswählen

<script language="JavaScript">

function openPicSelector(form, getwidth, filetype){
   var url = "choose_pics.php?&client=<? echo $client; ?>&form="+form+"&getwidth="+getwidth+"&type="+filetype;
   window.open(url,"","height=450,width=700,scrollbars=yes,status=yes");
}

</script>
Anschließend können dann Textfelder wie folgt eingesetzt werden:

Code: Alles auswählen

<input type="text" name="CMS_VAR[1]" value="CMS_VALUE[1]" onClick="openPicSelector(this.name, 0, 'mov')">
Die drei Parameter der Funktion openPicSelector bedeuten:
  • 1. this.name -> darf nicht verändert werden, beinhaltet den Namen des Eingabefeldes
    2. 0 -> die Breite der gesuchten Bilder, bei 0 werden Bilder unabhängig von Ihrer Breite angezeigt
    3. 'mov' -> beschränkt die Suche auf bestimmte Dateitypen; möglich sind: 'jpg', 'gif', 'png', swf', 'mov'; bei 0 werden alle Dateitypen angezeigt

Natürlich alles ohne Gewähr...


Schöne Grüße

Chobbert

htw
Beiträge: 490
Registriert: Sa 5. Okt 2002, 03:09
Wohnort: Hessen
Kontaktdaten:

Nettes Ding

Beitrag von htw » So 17. Aug 2003, 00:04

Hi Robert,

soll das Wähler noch in den Downloadbereich zu den Modulen?

Gruss
Harald

chobbert
Beiträge: 371
Registriert: Mo 14. Jul 2003, 10:14
Wohnort: Frankfurt am Main
Kontaktdaten:

Dateiwähler in den Download-Bereich

Beitrag von chobbert » So 17. Aug 2003, 10:39

Hallo Harald,

klar, gerne.


Schöne Grüße
Robert

htw
Beiträge: 490
Registriert: Sa 5. Okt 2002, 03:09
Wohnort: Hessen
Kontaktdaten:

Beitrag von htw » Mo 18. Aug 2003, 09:09

Danke.

Gruss
Harald

jumar
Beiträge: 25
Registriert: Fr 24. Okt 2003, 00:38
Kontaktdaten:

Beitrag von jumar » Fr 24. Okt 2003, 22:54

Hi!

Das habe ich noch nicht ganz verstanden (wo wird das abgespeichert?):
Wenn man den Datei-Wähler in seinen Modulen einsetzen will, schreibt man folgendes JavaScript in den Anfang des Input-Bereichs...
Genauso geht es mir mit:
Anschließend können dann Textfelder wie folgt eingesetzt werden...
Bye,
Jumar

chobbert
Beiträge: 371
Registriert: Mo 14. Jul 2003, 10:14
Wohnort: Frankfurt am Main
Kontaktdaten:

Beitrag von chobbert » Sa 25. Okt 2003, 10:36

Hallo,
jumar hat geschrieben: Das habe ich noch nicht ganz verstanden (wo wird das abgespeichert?):
Wenn man den Datei-Wähler in seinen Modulen einsetzen will, schreibt man folgendes JavaScript in den Anfang des Input-Bereichs...
Also, Du weiß ja sicherlich, daß Contenido-Module einen Input- und einen Output-Teil haben. Beides gibt man unter Style->Module ein und speichert es dort in die Datenbank.

Der PicSelector ist kein Modul, aber eine Möglichkeit die Bedienung eines Moduls zu erleichern. "Die Bedienung erleichern" bedeutet, daß es die Konfiguration eines Moduls vereinfacht. Daher wendet man es im Input-Teil an. Wenn Du den PicSelector verwenden willst, mußt Du in jedem Fall das genannte JavaScript an den Anfang des Input-Codes setzen (im betreffenden Formular unter Style->Module).
jumar hat geschrieben: Genauso geht es mir mit:
Anschließend können dann Textfelder wie folgt eingesetzt werden...
Der Sinn des PicSelectors ist es, Pfade für Bildangaben zu ermitteln, die dann in ein Textfeld geschrieben werden, so daß sie wie eine manuelle Eingabe in die Modul-Konfiguration ausgewertet werden können. Wie Du ein Textfeld in einem Modul verwendest, weißt Du ja sicherlich.

Wenn man z.B. eine Variable CMS_VAR[1] bearbeiten möchte, daß die Pfadangabe zu einem Bild enthält, legt man ein entsprechendes Input-Feld an. Wenn man es dann um den genannten onFocus-Handle erweitert, muß man den Inhalt nicht manuell eintragen, sondern kann ihn mit dem PicSelector auswählen.

Damit Du Dir keine falschen Vorstellungen über diese Funktion machst, hab' ich mal einen Screenshot beigefügt.

Wenn Du Dein Textfeld mit dem onFocus-Teil ergänzt und in das Feld reinklickst, erscheint folgendes PopUp:

Bild

Mit einem Klick auf den grünen Button wird der Pfad des Bildes in das vorher ausgewählte Textfeld übertragen und das PopUp geschlossen. Wie das Textfeld aussieht, in den Du den Pfad kopierst, ist dann Dir überlassen.


Ich hoffe, ich konnte Dir mit diesen Ausführungen weiterhelfen.



Schönes Wochenende

Robert

jumar
Beiträge: 25
Registriert: Fr 24. Okt 2003, 00:38
Kontaktdaten:

Beitrag von jumar » So 26. Okt 2003, 18:31

Hi!

Soweit habe ich das jetzt hinbekommen.

Doch wenn das Fenster aufgeht... werden überhaupt keine (ja, sind welche vorhanden) Bilder angezeigt....
Mein Quelltext im Input-Bereich:

Code: Alles auswählen

?>
<script language="JavaScript"> 

function openPicSelector(form, getwidth, filetype){ 
   var url = "choose_pics.php?client=<?=$client;?>&form="+form+"&getwidth="+getwidth+"&type="+filetype; 
   window.open(url,"","height=450,width=700,scrollbars=yes,status=yes"); 
} 

</script>

<input type="text" name="CMS_VAR[1]" value="CMS_VALUE[1]" onClick="openPicSelector(this.name, 0, 0)">
<?
Liegt der Fehler evtl. an Zeile 117?

Code: Alles auswählen

if ($type === 0){ 
JO! Genau DAS war der Fehler!!!

Darüberhinaus bekomme ich auch nen Script-Fehler, wenn ich auf das rote X drücke:

Code: Alles auswählen

Zeile: 30
Zeichen: 1
Fehler: 'opener.forms.0' ist Null oder kein Objekt
Fehler behoben...
es muß folgendes:

Code: Alles auswählen

<a href=\"#\" onClick=\"opener.forms[0].elements['".$form."'].value=''; window.close()\">
durch dieses ersetzt werden:

Code: Alles auswählen

<a href=\"#\" onClick=\"opener.tplcfgform.elements['".$form."'].value=''; window.close()\">
allerdings habe ich nun das Problem, daß nicht alle Grafiken eines Ordners angezeigt werden....

Liegt daran, daß dieser Aufruf bei jedem Bild aufgerufen wird, aber ab dem 2. teilweise zu unsinnigen Änderungen der Variable $type führt.
Besser: 2 verschiedene Variablen nehmen!!

Darüberhinaus ist gif Typ 1 und jpg Typ2!!!

Code: Alles auswählen

switch ($type){ 
   case "gif": $type=1; break; 
   case "jpg": $type=2; break; 
   case "png": $type=3; break; 
   case "swf": $type=4; break; 
   case "mov": $type=5; break; 
   case "0": $type = 0; break;
} 

jumar
Beiträge: 25
Registriert: Fr 24. Okt 2003, 00:38
Kontaktdaten:

Beitrag von jumar » Mo 27. Okt 2003, 00:01

Hi!

Summa summarum habe ich das Ganze jetzt soweit umgeschrieben, daß es für contenido 4.40 funtkioniert.

Ich werde es gleich dort als Erweiterung ins Forum schreiben....

Bye,
Jumar

Snoopy
Beiträge: 239
Registriert: Mo 15. Sep 2003, 18:45
Kontaktdaten:

Beitrag von Snoopy » Mo 27. Okt 2003, 19:44

Super Teil, hab es gleich in mehrere Module eingebaut, :D
Nur ein Schönheitsfehler ?? die Bildgrössen werden bei mir teilweise mit 10 stellen hinterm komma dargestellt also 12x16,33333377px z.B.

jumar
Beiträge: 25
Registriert: Fr 24. Okt 2003, 00:38
Kontaktdaten:

Beitrag von jumar » Di 28. Okt 2003, 21:04

Hi!

Dann hol Dir die von mir abgeänderte Version...

DAS habe ich auch gefixt (es wurden die Dateigrössen der anzeigten Vorschaubilder angezeigt).

Ich muß nur noch die Korrektur der Bildpfade einbringen, da im Textfeld am Anfang "upload/" stehen sollte *g*

http://contenido.de/forum/viewtopic.php?t=2115

Bye,
Jumar

Gesperrt