Afbeelding vanuit de database laden

[Nanno]

Hoi Pablo,

Het is even stoeien met de mogelijkheden en opties in WB17.
Ik probeer een tabel te maken m.b.v. de Layout mogelijkheden en dan zodanig dat het mobiel ook goed te gebruiken is. Mijn data wordt uit de database gehaald, dus ik gebruik een while loop met php code. Met de Flexgrid kom ik hier aardig uit, behalve de link naar de afbeelding krijg ik niet voor elkaar omdat deze in een class wordt verwerkt en dus niet in mijn html als url wordt weergegeven. Dan werkt mijn while loop dus niet meer.
Via mijn toegevoegde php code aan het begin van de flexgrid (via html) krijg ik het wel voor elkaar om de loop in werking te zetten en zie dus telkens een nieuw artikel onder elkaar staan in het venster met de diverse verschillende teksten etc.

Kan je mij helpen met een oplossing? Is het anders een idee om bij de achtergrond optie een html code toe te voegen? Of de zelf toegevoegde externe url uit de class te verwijderen zodat hij in de div komt te staan?

Ik wacht je reactie af.

Groet,

Nanno

[Pablo]

Helaas kan ik je niet helpen met programmeren, ook voor mij gaat daar veel tijd inzitten.
Maar waarom gebruik je geen <img> tag?

[Nanno]

Hoi Pablo,

ik vraag je ook niet om me te helpen met programmeren in php.
Wat ik probeer te vragen is of jij het mogelijk kan maken in de software om de link die ik invoer bij afbeelding in wwb17, uit de css class kan laten en dat hij in mijn html veld blijft staan.

Dit is de html code die nu wordt gegenereerd door wb17. Omdat de afbeelding in de class wordt gezet werkt mijn while loop niet meer.

Code: Select all

<div id="FlexGrid1">
<div id="FlexGrid1-grid">
<div class="header">
<div id="wb_Datum">
<span style="color:#FFFFFF;font-family:Courier;font-size:21px;">'.$datum_weergave.'</span>
</div>
</div>
<div class="foto">
</div>
<div class="text">
<div id="wb_content">
<p style="font-size:11px;font-weight:bold;"><span style="font-size:29px;">'.$row['Artiest'].'</span></p>
<p style="font-size:11px;font-weight:bold;"><span style="font-size:19px;">'.$row['Titel'].'</span></p>
<p style="font-family:Courier New;font-size:13px;">&nbsp;</p>
<p style="font-family:Arial;font-size:11px;"><span style="font-family:Courier New;font-size:13px;">'.$row['Omschrijving'].'</span></p>
</div>
</div>
<div class="aanvang-prijs">
<div id="wb_Text5">
<span style="color:#DCDCDC;"><strong>Prijs: € '.$prijs_komma.', Aanvang: '.$tijd_aanvang.' u.</strong></span>
</div>
</div>
<div class="footer">
<div id="wb_Text4">
<span style="color:#FFFFFF;">'.$weergave_kaarten.'</span>
</div>
</div>
<div class="button">
<select name="Combobox1" size="1" id="Aantal" style="display:inline-block;width:51px;height:30px;z-index:5;">
<option selected value="1">1</option>
</select>
<input type="submit" id="Bestelknop" name="" value="Bestel" style="display:inline-block;width:77px;height:33px;z-index:6;">
</div>
<div class="buttons">
<div id="wb_IconFont1" style="display:inline-block;width:38px;height:35px;text-align:center;z-index:7;">
<a href="'.$url_actief.'" target="_blank"><div id="IconFont1"><i class="fa fa-internet-explorer"></i></div></a>
</div>
</div>
<div class="genre">
<div id="wb_Text2">
<span style="color:#DCDCDC;"><strong><em>'.$genre.'</em></strong></span>
</div>
</div>
</div>
</div>

[Nanno]

Misschien is het flexgrid niet de juiste methode, misschien heb je een betere tip voor me om te gebruiken.
De oude website is totaal niet mobiel vriendelijk en dat is de reden waarom ik hem wil vernieuwen.

[Pablo]

Ok, dus gebruik een achtergrond afbeelding om de foto weer te geven?
Waarom gebruik je geen normale afbeelding?

[Nanno]

Omdat ik dat in de layout mooier vind. Nu heb ik in de gsm mode een kleine afbeelding en heel veel lege ruimte onder de afbeelding. Zie de link.
Ik heb ook al zitten denken aan de samenstelling van een layoutgrid met daarbij een header, content en footer, maar die krijg ik niet samengevoegd in mijn toegevoegde code in een while loop. Heb jij misschien een suggestie wat ik hierbij kan gebruiken?
Het mooiste zou zijn als ik een card kan gebruiken die op mobiel verticaal getoond wordt en op de pc horizontaal. En ik zag dat jij dit gedaan had met de layoutgrid, maar dat krijg ik niet voor elkaar met toevoegen van de php code en de while loop.

[Pablo]

Je kunt de achtergrond van een layout cell niet aanpassen via PHP omdat de code altijd in de style sheet wordt geplaatst via een class.
Maar je kunt bijvoorbeeld wel zelf een <div> invoegen die de volledige achtergrond van de grid cell vult en dan via inline CSS de afbeelingen van zetten.