Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>First of all you can make your images a basic circle I said by following <a href="http://bavotasan.com/2011/circular-images-with-css3/" rel="nofollow noreferrer">this tutorial</a></p> <pre><code>.circular { width: 300px; height: 300px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; background: url(http://link-to-your/image.jpg) no-repeat; } </code></pre> <p>But for your use, make a foreach loop in your PHP <a href="https://stackoverflow.com/questions/6504101/php-html-css-styling-an-array-of-data">like this</a> to be able to apply CSS directly to it (given the images in the array are stored like <code>&lt;img src="www.mysrc.com/kittens.jpg" /&gt;</code>. If they are just the URL you have to change the echo line in the foreach loop a little)</p> <pre><code>&lt;?php $cont=0; echo '&lt;ul&gt;'; foreach($array as $arrval){ echo '&lt;li class="circular"&gt;'.$arrval.'&lt;/li&gt;'; $cont++; } echo "&lt;/ul&gt;"; ?&gt; </code></pre> <p>And then you can apply the CSS with </p> <pre><code>li.circular{ width: 300px; height: 300px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; } </code></pre> <p><strong>Edit</strong> based on my chat with you. Set up the PHP this way first (has to be outside of <code>&lt;script&gt;</code> tags)</p> <pre><code>&lt;?php $array1 = array('img' =&gt; "http://izview.com/wordpress/wp-content/uploads/2008/07/the-chandelier.jpg", 'title' =&gt; 'article', 'content' =&gt; 'This is the content coming from PHP', 'date' =&gt; "6/27/2013"); ?&gt; </code></pre> <p>And call it by converting it to json and putting it in <code>&lt;script&gt;</code> tags to be applied to the element. </p> <p><strong>Javascript fix</strong> (no PHP) <a href="http://jsfiddle.net/Zeaklous/YW2QG/2/" rel="nofollow noreferrer">jsFiddle</a></p> <pre><code>var articleArray = [{img: "http://izview.com/wordpress/wp-content/uploads/2008/07/the-chandelier.jpg", title: "Article Name", content: "This is the content coming from PHP", date: "6/27/2013"}, {} ]; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POImages placed within responsive circles
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USZach Saucier
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POImages placed within responsive circles
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThank you. I guess my main issue is getting this all to work responsively with my border effect....with images of differing aspect ratios :) [link](http://www.universalphysique.co.uk/responsive-image-wrapper-test.html) This is what I'd like to do for each news story that has a different image url.
      singulars
      1. PO
      1. USSam Holguin
    2. COwould using 'background-image:url('<?php echo $url ?>');' work if i included it in the foreach loop?
      singulars
      1. PO
      1. USSam Holguin
    3. COI don't understand what the aspect ratios of the images have to do with calling an image from a PHP array... And no, you would have to have `echo 'background-image:url("'.$arrval.'");'` in the PHP foreach loop.
      singulars
      1. PO
      1. USZach Saucier
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload