Background Image in HTMLBox

Ich möchte gerne ein Background Image per CSS einer HTMLBox zuweisen, das Image liegt im Media Ordner von IP-Symcon.
Kann ich eine Image, dass unter dem Ordner media liegt, per HTTP aufrufen, wenn ja was muss ich dazu angeben: Beziehungsweise gibt es noch eine andere Möglichkeit direkt auf das Bild zuzugreifen, wenn ja was muss ich dann als Pfad eintragen?

Wie immer… Webhook und das Bild mit IPS_GetMediaContent holen und ausgeben… Hätten wir doch schon öfter.
Oder das hier benutzen und das MediaFile verlinken (geht nur bei ausgeschalten Cache).
IPSNetwork/HookReverseProxy at master · Nall-chan/IPSNetwork · GitHub
Michael

Ich will das Bild aber nicht Base64 codiert auslesen sondern gerne das File, das so oder so auf der Festplatte liegt verlinken. Ich möchte als Slideshow CSS Fadeshow nutzten, das bekomme ich aber mit Base64 kodierten Daten irgendwie nicht ans laufen.

Ich habe das so probiert um das dann im den HTML Code zu ergänzen, aber da wird bei mir nichts angezeigt


function WriteSlidesSection()
{
    $category_id        = 22686;
    $media_objects = GetMediaIDs($category_id);
    $html = '';
    foreach($media_objects as $key => $media_object)
    {
        $img_base64 = @IPS_GetMediaContent($media_object);  // jpeg
        $html .= '<div class="fs-slide">'.PHP_EOL;
        $html .= '<div class="fs-slide-bg" style="background-image: url(data:image/jpeg;base64,'.$img_base64.');"></div>'.PHP_EOL;
        $html .= '<!-- Other content goes here... -->'.PHP_EOL;
        $html .= '</div>'.PHP_EOL;        
    } 
    return $html; 
}

Welchem Cache? Warum kann ich eigentlich nicht irgendwie direkt auf die Bilder unter Media zugreifen, ich finde das dämlich wenn ich die für so was in den user Ordner kopieren muss, nur damit ich da per HTTP direkt drauf zugreifen kann.

Oh man…
Zuerst, ist habe nicht gesagt du sollst das Bild direkt base64encodet in die HTMLBox schreiben (Achtung 1MB Grenze der String Variable!!!)

Sondern einen Webhook benutzen.
Damit kannst du im HTML ganz normal die URL zum Bild angeben.

Das Script für den Webhook darf aber nicht direkt das File vom Mediaobjekt lesen; das Objekt könnte einen aktiven Mediacache haben dann liest du den falschen Inhalt.

Darum der Hinweis, dass mein WebhookReverseProxy das aktuell nicht unterstützt und immer das File liest.

Michael

Das ganze Webhook Zeug kostet mich nur den letzten Nerv und Zeit, weil es dazu keine saubere einfache Dokumantion bzw. ein Beispiel gibt, und das mit einer normalen Ordnerstruktur im User Ordner ganz simpel ist. Das zu versuchen jetzt irgendwie anders ans laufen zu bekommen, hat mich unendlich viel Nerven und auch Zeit gekostet, bisher ohne Erfolg.

Daher wäre ich Dir unendlich dankbar Du würdest mich mit einem einfachen Beispiel mal auf den richtigen Weg schubsen, damit ich nicht noch mehr Zeit mit dem Thema vergeude.

Ich habe also nun mal testweise ein Skript angelegt für den Webhook und ein Webhook der auf das Skript verweist. In dem eigentlichen Inhalt der HTMLBox würde ich also jetzt auf den Link des Webhooks verweisen.

Wie muss jetzt der Inhalt dieses Webhook Skripts exemplarisch aussehen, der dann das Bild an die HTMLBox durchreicht?

Da kann ich Dir jetzt nicht ganz folgen, Du sagtest doch ich soll das mit IPS_GetMediaContent auslesen, lese ich da nicht automatisch immer den Cache aus, also das aktuelle Bild aus dem Mediaobjekt?

Ich habe mir jetzt etwas zurecht gebastelt, simpel ist anders, und den ganzen Aufwand nur, weil man das nicht direkt als Link angeben kann.


// /hook/mediaimage

$script_name = substr($_SERVER['SCRIPT_NAME'], strlen("/hook/mediaimage/"));
$picture = explode(".", $script_name);
$picture_name = $picture[0];
$picture_type = $picture[1];

if($picture_type == "jpg" || $picture_type == "jpeg" )
{
     $category_id        = 22686;
        $media_objects = GetMediaIDs($category_id);
	
        foreach($media_objects as $key => $media_object)
        {
            if($key == $picture_number)
            {
                $media_id = $media_object;
                $mediaimage = MediaImage($media_id);
        	    $headhtml = $mediaimage["headhtml"];
				$imgdata = $mediaimage["imgdata"];
				header($headhtml);
				echo $imgdata;
            }     
        }  
}

function GetMediaIDs($category_id)
{
    $objects = IPS_GetChildrenIDs($category_id);
    $media_objects = [];
    foreach($objects as $key => $object)
    {
        $object_type = IPS_GetObject($object)['ObjectType'];
        $position = IPS_GetObject($object)['ObjectPosition'];
        if($object_type == 5)
        {
            if($position > 0)
            {
                $media_objects[$position] = $object;
            }
            else{
                $media_objects[$key] = $object;
            }
        }
        ksort($media_objects);
    }
    return $media_objects;
}

function MediaImage($imageid)
	{
		if (!IPS_MediaExists($imageid)) {
			die("Media Image with ID (" . $imageid . ") does not exists");
		}


		$media = IPS_GetMedia($imageid);

		if ($media['MediaType'] != 1) {
			die("ID #" . $imageid . " is not an image");
		}


		$imgbase64 = IPS_GetMediaContent($imageid); //liefert den Base64 kodierten Inhalt für das Medienobjekt
		$imgdata = base64_decode($imgbase64);
		$mimetype = getImageMimeType($imgdata);
		$headhtml = getimgheader($mimetype);
		$mediaimage = array("headhtml" => $headhtml, "imgdata" => $imgdata, "mimetype" => $mimetype);
		return $mediaimage;
	}

    function getimgheader($mimetype)
	{
		if ($mimetype == "jpeg") {
			$header = 'Content-Type: image/jpeg';
		} elseif ($mimetype == "png") {
			$header = 'Content-Type: image/png';
		} elseif ($mimetype == "gif") {
			$header = 'Content-Type: image/gif';
		} elseif ($mimetype == "bmp") {
			$header = 'Content-Type: image/bmp';
		} elseif ($mimetype == "tiff") {
			$header = 'Content-Type: image/tiff';
		}
		return $header;
	}

	function getBytesFromHexString($hexdata)
	{
		for ($count = 0; $count < strlen($hexdata); $count += 2)
			$bytes[] = chr(hexdec(substr($hexdata, $count, 2)));

		return implode($bytes);
	}

	function getImageMimeType($imagedata)
	{
		$imagemimetypes = array(
			"jpeg" => "FFD8",
			"png" => "89504E470D0A1A0A",
			"gif" => "474946",
			"bmp" => "424D",
			"tiff" => "4949",
			"tiff" => "4D4D"
		);

		foreach ($imagemimetypes as $mime => $hexbytes) {
			$bytes = getBytesFromHexString($hexbytes);
			if (substr($imagedata, 0, strlen($bytes)) == $bytes)
				return $mime;
		}

		return NULL;
	}