Displaying variable output in table

Hi,

I’m fairly new to PHP, and have been asked to create an output from an array which displays a set of images which are linked to other pages. The array works well, looking up the page title, and finding connections in the SQL, before returning the thumbnails for the connected pages, which are linked to the page the thumbnail is from.

When I run an echo to show the results, I get a single column of all the thumbnails. I need to create a table style instead, with a grid 4 columns wide, and as many rows as required by the number of images in the output.

I’ve tried to explore loops to create this table, but seem to be getting stuck.

The code used to create the thumbnails is:

function countryCompanies(){

global $post;

$country_logo = f_print(array(
	'data' => 'p2p',
	'type' => 'mainlogo',
	'args' => array(
		'connection_type' => 'client'.$_set['lang_postfix'].'_to_location'.$_set['lang_postfix'].'',
		'post_type' => 'client',
		'connection_id' => $post->ID,
		'alternative' => "",
	), ));
	echo $country_logo;
	}

the f_print function finds the thumbnails and their connected url link and combines them to create the linked thumbnails.

Does anyone have any guidance on creating a table layout of the output variable $country_logo?

I really appreciate any insight, I’m getting a little stuck with exactly how to format the output

Do you always want to show four columns next to eachother? Also on a smartphone?

You should examine an HTML/CSS grid as explained here. If you want a grid system with a amount of columns depending on the screen width (what we call responsive) you could take a closer look to the Bootstrap grid system. Instead using Bootstrap (which is complete toolkit for building responsive web pages) you could also make your own responsive grid system by using mediaqueries. Silent hint: Take a look to Bootstrap’s screensizes (extra small, small, medium, large and extra large)

Thanks for the suggestion. I’d be happy to follow these tutorials and create a CSS for the grid and make it responsive.

I suppose this might be a very obvious question, but what I see in most of these tutorials is static data added to the CSS tables via the code, but how can I get the variable $country_logo, to populate the CSS as a dynamic grid?

well you could just echo your php variables between the html but if you want us to help you with a working example you could place an example of the content of $country_logo

Hi,

echoing in the html worked very well, thank you!

Sponsor our Newsletter | Privacy Policy | Terms of Service