ipv. rood kruisje een default image tonen?

[Stalkert]

Ik heb een cms wat soms denkt een foto te bevatten bij een bepaald artikel maar dit kan wel eens niet het geval zijn (bug). In dit geval wordt er aan de frontend (website) ipv. de foto een rood kruisje getoond.

Nu mijn vraag: Hoe kan ik aan de client kant dit afvangen en ipv. het rood kruisje een default plaatje laden?

[Verwijderd]

doe op je backend een is_file() check, is het geen file, dan print je je default image.

[Stalkert]

bedankt voor je reactie.
Echter zoek ik naar een oplossing in de client.Tevens gebruik ik geen php.

[--MeAngry--]

Is het uberhaupt wel een CMS dan? Waar is het in geschreven?
Misschien dat je met een Javascript loopje over alle images in de pagina wat kunt bereiken, maar ik zou het ten zeerste afraden.

[Cartman!]

Zoiets wil je toch echt serverside checken, in andere talen (ASP.NET?) zitten neem ik aan ook dergelijke functies. Ik ga helemaal mee met Smoerf zn reactie.

[Dutch_guy]

Als het dan echt moet dan kan je het als volgt 'oplossen':

Voeg dit toe aan je img: onError="ImageLoadFailed()"

En deze in de head:

code:

  <script language="JavaScript">
    function ImageLoadFailed() {
    window.event.srcElement.style.display = "None";
    }
</script>

Dan zie je in ieder geval geen rood kruisje meer.

[BradJohnson]

Oplossing van Dutch_guy haalt heel je afbeelding weg. Volgende doet wat jij wilt:

HTML:

<img src="http://server.dom/custompic.jpg" onerror="this.src='http://server.dom/default.jpg'" />

[ Voor 4% gewijzigd door BradJohnson op 20-09-2007 13:51 ]

[Verwijderd]

Waarom wil je dit überhaupt client side afhandelen?

Je hebt een cms, dus je frontend haalt de data (dynamisch) uit je cms toch?
In welke taal is je cms geschreven?

Of heb je gewoon een html file met daarin images die niet gevonden worden? In dat geval kan ik je redenering volgen wat betreft client side. Dan zijn bovenstaande javascript oplossingen ideaal.

[BradJohnson]

Ook al is je website dynamisch zijn er situaties waarin dit soort functies wenselijk kunnen zijn, bijvoorbeeld wanneer je de afbeeldingen van een andere server afhaalt.

[Verwijderd]

met remote bestanden is is_file() (mocht het php zijn) niet de aangewezen functie, maar remote files kan je toch ook controleren?

[RM-rf]

Verwijderd schreef op donderdag 20 september 2007 @ 14:19:
Waarom wil je dit überhaupt client side afhandelen?

waarschijnlijk omdat dat CMS niet bij elke request zin heeft om bv alle afbeeldingen te checken...
zéker als het gaat om extern geplaatste afbeeldingen...

In dat geval is het stukken efficienter én netter om dat clientside af te vangen...
serverside scripting voldoet écht niet goed voor dat soort zaken, juist omdat de belasting veel groter is (helaas begrijpen dat veel php-adepten niet altijd)

[Verwijderd]

No offence, maar mijns inziens beter om dit serverside op te vangen, dan wel om volgende reden:

Als je checkt of de lokale/remote file bestaat, kan je indien de image niet bestaat de data aanpassen in je cms en bijgevolg de image 'leeg' laten en diegene die wel gevonden worden kan je kopiëren naar de eigen server. Bijgevolg heb je een cms dat zijn eigen data opruimt en aanpast.

Dit lijkt me minder belastend dan telkens client side alle images te checken.

Ik ben een grote voorstander van javascript, maar in dit geval vindt ik het server side afhandelen van de images beter gepast.

[Blue-eagle]

Ten eerste: fix die bug.
Ten tweede: doe het gewoon client side.

Server-side zou ik niet eens aan -denken-... dat is een pure performance killer. Als je nou 100 sites met dat CMS op een server plaatst, en je hebt ~200 pageviews per seconde..

Iedere milliseconde performance winst per site betekent dat je meer klanten op de server kwijt kan

[ Voor 7% gewijzigd door Blue-eagle op 20-09-2007 21:03 ]

[benoni]

Heb je niet toevallig in je webhosting pakket een custom error document, dus dat Apache in plaats van de gewone '404' melding een bepaalde pagina opent? Zoniet, dan kun je dit bij Apache vaak nog instellen door een ErrorDocument directive op te nemen in een .htaccess of in je configuratie bestand, zoiets:

code:

ErrorDocument 404 /error/404.php

In die PHP pagina kun je vervolgens checken of je een aanvraag binnenkrijgt voor een html-pagina of voor een afbeelding. In het geval dat een afbeelding wordt gevraagd, kun je een hiervoor een header terugsturen die verwijst naar een algemeen 'Niet gevonden' plaatje.

Eventjes opgezocht op onze server:

PHP:

<?php
$baseurl = $_SERVER['SERVER_NAME'];
$request = $_SERVER['REQUEST_URI'];
if (preg_match("/\.jpg$|\.jpeg$/i", "$request")) {
    $new_search_link = "/error/404.jpg";
    header ("Location: $new_search_link");
}
else {
    $new_search_link = "/index.php/articles/items/search?fields[title]=1&fields[body]=1&fields[notes]=1&q=" . preg_replace("/^\+|\+$/i","",str_replace("/", "+", $request));
}
?>
<!-- hieronder een HTML pagina die $new_search_link als zoekopdracht-link aanbiedt -->

[ Voor 30% gewijzigd door benoni op 21-09-2007 00:22 ]

[Toolskyn]

Je zou eventueel ook zoals ze dat bijvoorbeeld bij deviantart doen een achtergrond achter je plaatje kunnen zetten met daarin een plaatje dat wel altijd werkt, je kruisje is dan in IE nog wel zichtbaar, maar je kan er in ieder geval voor de gebruiker wat extra bijzetten. Je achtergrond is dan al wel zichtbaar als je afbeelding nog geladen moet worden en daarbij moet je dan ook wel een width en een height van afbeeldingen opgeven, anders weet de browser niet hoe groot hij het vakje moet maken.

[SchizoDuckie]

JavaScript:

(vlak voor je </body>)
<script type="text/javascript">
var images = document.getElementsByTagName('IMG');
for(var i=0; i<images.length; i++)
{
  images[i].onError=function(){this.src ='/jeplaatjes/diejewelzekerweetdatzebestaan.jpg'; }
}
</script>

Loop gewoon zo alle images af die op je site staan en geef je die allemaal een onerror mee. klaar toch?

[Cartman!]

Of je zorgt dat bestanden die een user kiest worden gedownload naar de server (ze werken immers op dat moment)? Kost misschien wat ruimte maar dan is je site wel altijd goed.

[Blackbird-ce]

Kan dit niet via htaccess? Ben er zelf geen expert in, maar er is vast wel een constructie te bedenken waarbij een 404 op een jpg|gif|png doorverwezen wordt naar default.jpg.

[benoni]

Blackbird-ce schreef op vrijdag 21 september 2007 @ 12:04:
Kan dit niet via htaccess? Ben er zelf geen expert in, maar er is vast wel een constructie te bedenken waarbij een 404 op een jpg|gif|png doorverwezen wordt naar default.jpg.

Die is zelfs makkelijk te vinden, bijvoorbeeld in dit topic

[IEF]

Ik denk dat het tijd wordt dat de TS eerst eens reageert voordat er duizend-en-een oplossingen worden gegeven in serverside oplossingen en/of clientside.

Blijkbaar neemt de TS niet eens de moeite om zijn probleem duidelijk te beschrijven, maar wil gewoon een kant-en-klare oplossing.

- Serverside taal ?
- Welk CMS ?
- Waarom clientside ?
- Wat is de bug ?

[hing]

Vraagje: wat is er mis met het rode kruisje?
Voor de gebruiker is het een herkenbaar symbool dat een afbeelding niet gevonden kan worden. Als je een default plaatje laadt, dan weet de gebruiker misschien niet meer wat er aan de hand is?

[RobIII]

hing schreef op vrijdag 21 september 2007 @ 13:09:
Vraagje: wat is er mis met het rode kruisje?
Voor de gebruiker is het een herkenbaar symbool dat een afbeelding niet gevonden kan worden. Als je een default plaatje laadt, dan weet de gebruiker misschien niet meer wat er aan de hand is?

Dat is natuurlijk prima op te lossen door in het default image iets te gebruiken als ofzo. Als dat beter in je design past dan dan is er IMHO niets mis mee behalve idd de herkenbaarheid

[ Voor 17% gewijzigd door RobIII op 21-09-2007 13:19 ]

[Gomez12]

Wat ik doe is gewoon met JS client side checken of het image bestaat, zonee dan image vervangen door ander plaatje ( zoals hierboven gezegd ) en met AJAX een reply naar de server terugsturen dat het plaatje niet bestaat.

Deze reply komt in een queue terecht die 1x per dag ( om 4 uur 's ochtends ) via een batch serverside gecontroleerd wordt. Krijgt de server dan ook een 404 error terug dan wordt het server-sided aangepast.

IMHO een nette manier om het op te lossen..

[RM-rf]

Gomez12 schreef op vrijdag 21 september 2007 @ 13:48:
Wat ik doe is gewoon met JS client side checken of het image bestaat, zonee dan image vervangen door ander plaatje ( zoals hierboven gezegd ) en met AJAX een reply naar de server terugsturen dat het plaatje niet bestaat.

Deze reply komt in een queue terecht die 1x per dag ( om 4 uur 's ochtends ) via een batch serverside gecontroleerd wordt. Krijgt de server dan ook een 404 error terug dan wordt het server-sided aangepast.

IMHO een nette manier om het op te lossen..

in vroeger tijden kon je daarvoor de error-log van je webserver gebruiken, maar toen gebruikten we ook nog stenen vuistbijlen en aten we ons mammoet-vlees rauw.... het zal wel vooruitgang zijn om zoiets zo ingewikkeld via 'ajax' te gaan doen

[Verwijderd]

Cartman! schreef op vrijdag 21 september 2007 @ 11:11:
Of je zorgt dat bestanden die een user kiest worden gedownload naar de server (ze werken immers op dat moment)? Kost misschien wat ruimte maar dan is je site wel altijd goed.

En dan bij iedere request checken of de afbeelding al op het file system staat? Leuk als je een site hebt met 100 bezoekers per dag, maar anders kun je de performance wel op je buik schrijven. De ruimte is dan wel je minste probleem.

[Gomez12]

RM-rf schreef op vrijdag 21 september 2007 @ 13:55:
[...]


in vroeger tijden kon je daarvoor de error-log van je webserver gebruiken, maar toen gebruikten we ook nog stenen vuistbijlen en aten we ons mammoet-vlees rauw.... het zal wel vooruitgang zijn om zoiets zo ingewikkeld via 'ajax' te gaan doen

Hmmm, dus blijkbaar kan jij aan de errorlogs van elke website komen??? Ik houd er gewoon rekening mee dat er een x percentage van de foto's extern gehost gaat worden.

Als het echt alleen maar over interne bestanden gaat, dan zou ik gewoon de 404-pagina veranderen, minste werk en blijft bijna altijd werken...

Verwijderd schreef op vrijdag 21 september 2007 @ 13:59:
[...]

En dan bij iedere request checken of de afbeelding al op het file system staat? Leuk als je een site hebt met 100 bezoekers per dag, maar anders kun je de performance wel op je buik schrijven. De ruimte is dan wel je minste probleem.

Als je het goed implementeert hoeft het helemaal geen performance probleem te zijn, het lijkt me trouwens sterk dat je het zo slecht kan implementeren dat het ook echt een probleem gaat zijn omdat apache/iis etc ook eerst checken of een file bestaat, bestaat deze niet dan 404 pagina openen...

[ Voor 32% gewijzigd door Gomez12 op 21-09-2007 14:24 ]

[SchizoDuckie]

Verwijderd schreef op vrijdag 21 september 2007 @ 13:59:
[...]

En dan bij iedere request checken of de afbeelding al op het file system staat? Leuk als je een site hebt met 100 bezoekers per dag, maar anders kun je de performance wel op je buik schrijven. De ruimte is dan wel je minste probleem.

Het lijkt me dat je zo'n check uitvoert op het moment dat de gebruiker zijn afbeelding aanpast vanaf dat moment is ie óf goed, óf toon je de gebruiker dan zijn foutmelding.

Overigens zou ik nog steeds dit lekker af laten handelen door de clients die de paginas bezoeken en vertrouwen op onError

[mjax]

Als je Apache gebruikt en de afbeeldingen ergens vanuit de webroot geserved worden, dan is het vrij eenvoudig op te lossen met een .htaccess bestand in de /images map.

Maak een .htaccess bestand aan met de volgende inhoud:

code:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)$ /images/default.gif [QSA,L]
</IfModule>

Nu wordt de afbeelding /images/default.gif gebruikt voor alle plaatjes die niet bestaan.

[Stalkert]

Ik sta versteld van jullie creativiteit. Er zitten een aantal goede oplossingen tussen. Bedankt!

[SchizoDuckie]

mjax schreef op zaterdag 22 september 2007 @ 06:02:
Als je Apache gebruikt en de afbeeldingen ergens vanuit de webroot geserved worden, dan is het vrij eenvoudig op te lossen met een .htaccess bestand in de /images map.

Maak een .htaccess bestand aan met de volgende inhoud:

code:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)$ /images/default.gif [QSA,L]
</IfModule>

Nu wordt de afbeelding /images/default.gif gebruikt voor alle plaatjes die niet bestaan.

Het punt van de TS gaat toch juist erover dat een user bijv. zelf een url naar een plaatje mag neerkwakken welke dan ingeladen wordt? Dan heeft jouw rewriterule erg weinig effect vrees ik...