How Do You Display Images In A Horizontal Row? - php

Here is my code that returns a list of pictures, depending on how many of clients are connected to my server.
<div>
<?php
$Query = new MinecraftQuery( );
try
{
$Query->Connect( '64.31.40.146', 25575 );
if(($Players = $Query->GetPlayers()) !== false) {
foreach($Players as $Player) {
echo "<img title=".$Player." src=https://minotar.net/avatar/".$Player."/32.png>
<p>"."</p>";
}
}
}
catch( MinecraftQueryException $e )
{
echo $e->getMessage( );
}
?>
</div>
Though, when I do this. It displays the images stacked vertically.
http://i.imgur.com/FwvNAlB.png
What would be the best way to force the images to go horizontally?

It is due to you have <p> tag. Change your echo for this:
echo "<img title=".$Player." src=https://minotar.net/avatar/".$Player."/32.png>";
By default <p> tag change line.

Just remove the
<p>"."</p>
I don't know why you are adding it, but that is causing the problem.
Also add quotes and and a final "/" to the img tag.
So that line would be:
echo "<img title='".$Player."' src='https://minotar.net/avatar/".$Player."/32.png' />";

Related

PHP (WP) - Ignoring HTML markup

Why does the br html tag is ignored in the browser?
<p>
<?php
$footer_1 = the_field('footer_1');
$footer_2 = the_field('footer_2');
$footer_3 = the_field('footer_3');
if (!empty($footer_1)) {
the_field('footer_1');
echo "<br />";
}
if (!empty($footer_2)) {
the_field('footer_2');
echo "<br />";
}
if (!empty($footer_3)) {
the_field('footer_3');
}
?>
</p>
Edit: The browser code outputs the p element as one piece of text. No br tag displayed there either. The three variables are text fields from Advanced Custom Fields.
the_field is used to actually echo out the custom field data, so you cannot assign it to a variable. Use get_field instead, like so:
<p>
<?php
$footer_1 = get_field('footer_1');
$footer_2 = get_field('footer_2');
$footer_3 = get_field('footer_3');
if (!empty($footer_1)) {
echo $footer_1 . '<br>';
}
if (!empty($footer_2)) {
echo $footer_2 . '<br>';
}
if (!empty($footer_3)) {
echo $footer_3;
}
?>
</p>

Show url only if value is present

Goal:
Instead of showing simple YES or NO.
If value is found in record, show hyperlink with that value or else show text "No"
How to modify below code for this purpose:
<?php echo $row_RecordsetContacts['propertyFile'] ? '<strong>Yes</strong></br>' : 'No</br>'; ?>
View
</td>
<?php
$file = $row_RecordsetContacts['propertyFile']; # for readability only
if ($file)
{
?>View<?php
}
else
{
?>No<?php
}
I also suggest to avoid mixing echo and HTML markup. In 99% cases it makes the code better for understanding.
Try the following code:
<?php
$prop = $row_RecordsetContacts['propertyFile'];
if(empty($prop)) {
echo "No";
} else {
echo "<a href='propfiles/$prop'>View</a>";
}
?>

make an image (background-image CSS) into PHP variable value

I want to make a product gallery like 5 products, each has their own background-image attribute
I use loop to insert the product image, so I want to make it each loop will have different background-image
I'm thinking of using IF statement like so
<?php
$bg = 0;
$bg1 = "url('img1.jpg')";
$bg2 = "url('img2.jpg')";
$bg3 = "url('img3.jpg')";
$bg4 = "url('img4.jpg')";
$bg5 = "url('img5.jpg')";
if ($bg = 0){
echo " <div style='background-image :$bg1 ;'>" ;
$bg = 1;
} else if ($bg= 1) {
echo " <div style='background-image :$bg2 ;'>" ;
$bg = 2;
} else if ($bg= 2 ) {
echo " <div style='background-image :$bg3 ;'>" ;
$bg = 3;
} else if ($bg= 3 ) {
echo " <div style='background-image :$bg4 ;'>" ;
$bg = 4;
} else if ($bg= 4 ) {
echo " <div style='background-image :$bg5 ;'>" ;
$bg = 0;
}
echo " </div> " ;
code for product images
?>
above is the simplified code I wrote, it doesn't work.
if anyone has a different but much simpler solution it will be appreciated
note : the image files are in the same directory with this php file
thank you
Would you be open to using img tags? This, in my opinion, would be a better solution:
Code:
<?php
$images=Array(
"img1.jpg",
"img2.jpg",
"img3.jpg",
"img4.jpg",
"img5.jpg"
);
//
print "\n<br> Code: \n<pre>\n".RenderThoseImages($images)."\n</pre>";
//
function RenderThoseImages($images)
{
//
$s="";
//
foreach($images as $image){
$s.="\n<div><img src=\"{$image}\"></div>";
}
return $s;
}
?>
Outputs:
<br> Code:
<pre>
<div><img src="img1.jpg"></div>
<div><img src="img2.jpg"></div>
<div><img src="img3.jpg"></div>
<div><img src="img4.jpg"></div>
<div><img src="img5.jpg"></div>
</pre>
The main reason being that when you use the background-image CSS, you're also responsible for grabbing the image dimensions in PHP and rendering height/width into the div CSS as well, or possibly creating some javascript to fix it after loading, creating unneeded headache.

If image exists show else hide it

I have the following situation.
If there isn't an image in the DB, the page it's on shows a big image placeholder. What is the best way to hide the image placeholder if an image doesn't exist?
<img src="<?php echo '../img/artists/' . $row_rsAccents['artistPhoto']; ?>" width="100%"/>
http://westerndesignconference.com/intheloop/
You can do this with a simple if/else statement like so:
//I prefer to set things with variables
$placeholder_img = "../img/artists/placeholder.jpg";
$db_img = $row_rsAccents['artistPhoto'];
if($db_img){
$img_src = $db_img;
} else {
$img_src = $placeholder_img;
}
echo "<img src='$img_src' alt='' width='100%' />";
If there is a value returned - show an image. If the condition fails, no <img> will be displayed, preventing the blank gap
if (isset($row_rsAccents['artistPhoto'])) {
echo '<img src="../img/artists/' . $row_rsAccents['artistPhoto'] . '" width="100%"/>'
}
if (file_exists('artist.jpg') {
echo "<img src='artist.jpg'>";
}
else {
echo "<img src='default.jpg'>";
}

SlickGrid error: Slick.Editors.Text is not a constructor

I'm trying to implement SlickGrid on the edit page of a CakePHP project, and when the page loads I get this error in the javascript console:
slick.grid.js:2173TypeError:'Slick.Editors.Text is not a constructor' (evaluating 'new (editor || getEditor(activeRow, activeCell))')
The data renders correctly in the grid on my page, but when I click on a cell to edit it, it just turns white and I can't type anything. If I click on another cell, that cell will turn white and the first one will stay white.
Here is my php/jQuery code:
<?php echo $this->Html->script("/js/slickgrid/lib/jquery-1.7.min.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/lib/jquery.event.drag-2.0.min.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/lib/jquery-ui-1.8.16.custom.min.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/slick.core.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/slick.grid.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/slick.editors.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/slick.formatters.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/slick.dataview.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/plugins/slick.cellselectionmodel.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/plugins/slick.cellrangedecorator.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/plugins/slick.cellrangeselector.js"); ?>
<?php echo $this->Html->script("/js/slickgrid/plugins/slick.rowselectionmodel.js"); ?>
<?php // Setup rows and cols array for grid
$columns = array();
foreach($route['Stop'] as $stop) {
$columns[] = array( "name" => $stop['name'],
"field" => $stop['id'],
"id" => $stop['id'],
"editor" => "Slick.Editors.Text");
}
$tripId = 1;
$thisTrip['id'] = $tripId;
foreach($route['RouteTrip'] as $routeTrip) {
if($routeTrip['trip_id'] != $tripId) {
$rows[] = $thisTrip;
$tripId = $routeTrip['trip_id'];
$thisTrip['id'] = $tripId;
}
else {
$thisTrip[$routeTrip['stop_id']] = $routeTrip['time'];
}
}
?>
<?php
echo $this->Html->scriptBlock('
var rows = '.json_encode($rows).';
var columns = '.json_encode($columns).';
var options = { rowHeight:21,
defaultColumnWidth:100,
editable:true,
enableAddRow:true,
enableCellNavigation:true,
asyncEditorLoading:false,
autoHeight:true,
autoEdit:true
};
slickgrid = new Slick.Grid($("#scheduleTable"), rows, columns, options);
slickgrid.setSelectionModel(new Slick.CellSelectionModel());
slickgrid.updateRowCount();
slickgrid.render();
');
?>
The $rows and $columns are correctly formatted, and each column has an "editor" attribute with "Slick.Editors.Text" as its value.
Help?
I have also got this error initially when i started working with slickgrid.
The error is because you have specified the editor as string and not as a class.
So, remove the double quotes in "editor" => "Slick.Editors.Text" and give as "editor" => Slick.Editors.Text
This solved the error for me. Hope this solution will solve yours too.
Include the slick.editors.js file.
Also, make sure that the editor is being specified as a class, not as a string (I'm not familiar with PHP, so it's not obvious to me from the source code, but I suspect that's the case).

Categories