I want to do something not very hard but I don't know how to do.
Now here I have the version for mobile how it looks now.
Mobile version it looks like this:
And here it's how I want to looks:
Here I have the code.
$query = "SELECT * FROM my_table";
$res = mysqli_query($con, $query);
$i = 0;
while ($row = mysqli_fetch_assoc($res))
{
if($i%2==0)
{
echo "<div class='row' style='margin-right:0; margin-left:0'>
<div class='col-md-6' style='padding:0;''>
<img class='image-width img-responsive' src='images/my_img/".$row['primary_img']."' />
</div><!--/span-->
<div class='col-md-6 find-content' style='margin-top:8%;'>
<img src='images/my_img/".$row['icon']."'/>
<p style='font-family:GothamBold;color:#ec1940;font-size:1.5em; margin-top:5%;'>".$row['title']."</p>
<p style='width:50%;margin-left:25%;' class='text'>".$row['text']."</p>
<a class='a-button' href='atractions.php?id=".$row['id']."'>Hi</a>
</div><!--/span-->
</div><!--/row -->";
}
else
{
echo " <div class='row' style='margin-right:0; margin-left:0'>
<div class='col-md-6 find-content' style='margin-top:10%;'>
<img src='img/descopera/icons/".$row['icon']."'/>
<p style='font-family:GothamBold;color:#ec1940;font-size:1.5em; margin-top:5%;'>".$row['title']."</p>
<p style='width:50%;margin-left:25%;' class='text-descopera'>".$row['text']."</p>
<a class='a-button' href='atractions.php?id=".$row['id']."'>Hi</a>
</div><!--/span-->
<div class='col-md-6' style='padding:0;'>
<img class='image-width img-responsive' src='images/my_img/".$row['primary_img']."' />
</div><!--/span-->
</div><!--/row--> ";
}
$i++;
}
I copied again the code and I used class of bootstrap named 'visible'
I don't believe there is a simple CSS solution for changing the order of DOM elements. You need Javascript for that.
Revising my answer.. I would do it by writing out element 3 two times - before and after element 2. And then toggle display of the duplicate elements depending on breakpoint. (this answer only applies if the elements are fairly simple as duplicate markup is less than desirable).
(A side note: I would really recommend that you look in to some templating instead of echoing out the markup like that, Twig for instance)
Related
I have over 100 items in a list each manually coded into a Wordpress file. The problem is that its not DRY and the guy who wrote the code no longer works here. I've been asked to make some changes but to do so, I'd have to manually go through each section/item and make the changes myself. Ideally, I'd like to somehow output these sections in a loop.
I don't really know where to start for something like this. I was wondering if someone might be able to point me in the right direction. Do I need to use JS in script tags and output the HTML there?
here is an example of the sections
<hr class='uk-grid-divider'>
<div class='uk-grid'>
<div class="uk-width-1-3"><p>2.60mm / .102″</p></div>
<div class='uk-width-1-3'><p>300mm / 12"</p></div>
<div class='uk-width-1-3'><p>10 Pieces</p></div>
</div>
<hr class='uk-grid-divider'>
<div class='uk-grid'>
<div class="uk-width-1-3"><p>2.61mm / .103″</p></div>
<div class='uk-width-1-3'><p>300mm / 12"</p></div>
<div class='uk-width-1-3'><p>10 Pieces</p></div>
</div>
<hr class='uk-grid-divider'>
<div class='uk-grid'>
<div class="uk-width-1-3"><p>2.62mm / .103″</p></div>
<div class='uk-width-1-3'><p>300mm / 12"</p></div>
<div class='uk-width-1-3'><p>10 Pieces</p></div>
</div>
Thank you for your time.
Try to use PHP code in your template or page because it's wordpress language.
<?php for($i = 0; $i < 100; $i++) :
$varFirst = 2.60 + 0.01 * $i;
$varSecond = 102 + $i;
?>
<hr class='uk-grid-divider'>
<div class='uk-grid'>
<div class="uk-width-1-3"><p><?=$varFirst;?>mm / .<?=$varSecond;?>″</p></div>
<div class='uk-width-1-3'><p>300mm / 12"</p></div>
<div class='uk-width-1-3'><p>10 Pieces</p></div>
</div>
<?php endfor;?>
There are variables $varFirst and $varSecond. I adapted them for your dynamic values in the example.
You can use it only in .php files
Sorry for the question title. I really didn't know how to describe it best in a short sentence.
Basically I want to loop through each of my images and display them. However when doing the front end I did this:
<div class="row">
<div class="col-sm-4">
<img .../>
</div>
<div class="col-sm-4">
<img .../>
</div>
<div class="col-sm-4">
<img .../>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img .../>
</div>
<div class="col-sm-4">
<img .../>
</div>
<div class="col-sm-4">
<img .../>
</div>
</div>
Because there can only be 3 columns in a row for my design this worked fine. However now if i want to do this in php i have to kind of check the $count of the loop. If its a multiple of 3 display
<div class="row">
and if its a multiple of 3 + 1 then show
</div>
to close the row.
IS there any way I can make the mark up look the same as the example above but using this html below:
<div class="row">
<div class="col-sm-4">
<img .../>
</div>
<div class="col-sm-4">
<img .../>
</div>
<div class="col-sm-4">
<img .../>
</div>
<div class="col-sm-4">
<img .../>
</div>
<div class="col-sm-4">
<img .../>
</div>
<div class="col-sm-4">
<img .../>
</div>
</div>
Its just making my mark up look very messy. Is there a better way in bootstrap to do this without using php at all?
Thanks
You'll want to include conditions in your PHP loop so that PHP knows when to add in the row.
Below, I've laid out an untested set of PHP code that will hopefully explain where you're going wrong.
<?php
$images = array(...);
$images_per_row = 3;
// Here is where we determine how the images
// should be divided into the rows.
$total_images = count($images);
$total_rows = ceil($total_images / $images_per_row);
// Loop through each `row`
for ($row=0; $row<$total_rows; $row++)
{
// Open the `row`
echo '<div class="row">';
// We have an `offset` to avoid displaying the same image
// multiple times in the loop.
$offset = $row * $images_per_row;
// Loop through each `col-sm-4` and `img`
for ($i=0; $i<$images_per_row; $i++)
{
echo '<div class="col-sm-4">';
echo "<img src='{$images[$offset + $i]}' />";
echo '</div>';
}
// Closing the `row`
echo '</div>';
}
There are countless ways to do this. You can even do it all within a single loop if you use proper conditions within the loop.
The point is, you need a way of telling PHP "Hey, we need to divide all of this into thirds or we're never going to get anywhere with this."
Side note, PHP + HTML is a very ugly marriage. Please avoid it at all costs (unless you only have 10 minutes and you're trying to help someone on Stack Overflow).
I am creating a site where the user can post their advertisement and the user can upload a photo... I am posting the four latest ads pics in the top of my site... so everytime I navigate through my site those latest 4 ads pics will be displayed but the problem is it renders too long.. makes my site slowdown...
how can I optimize it? I need advice guys..
and btw, I'm saving those images in my database as blob.. and selecting the 4 latest ads in my database.
<?php if($latest_upload_count > 0){ ?>
<div class = "collapse navbar-collapse">
<div class = "container">
<div class = "row">
<?php while($get_lastest_pics = mysql_fetch_assoc($get_5_latest_ads_query_string_execute)){ ?>
<div class = "col-xs-3">
<img img src="data:image/jpeg;base64,<?php echo base64_encode($get_lastest_pics['img']); ?>" style = "height: 180px; width: 270px;" class="img-responsive img-thumbnail" alt="Cinque Terre" >
</div>
<?php } ?>
</div>
</div>
<br />
</div>
<?php } ?>
I tried omitting that and my site runs faster...
Save your images as files and only save paths to them in the database. Then generate thumbnails of smaller size to display them on the homepage (e.g. with ability to zoom-in those images by clicking on them) or just scale-down and optimize those images. You can save paths to thumbnails in the database too, or you can generate them on-fly (using some prefixes/subfixes in file names for different sizes).
Use some of well-known PHP libraries for images manipulations (like Imagick, Intervention Image or similar).
How about your code it self :
How about you write it like this :
if($latest_upload_count > 0){
echo "<div class = 'collapse navbar-collapse'><div class = 'container'><div class = 'row'>";
while($get_lastest_pics = mysql_fetch_assoc($get_5_latest_ads_query_string_execute)){
echo "<div class = 'col-xs-3'>
<img img src='data:image/jpeg;base64,".base64_encode($get_lastest_pics['img'])."' style = 'height: 180px; width: 270px;' class='img-responsive img-thumbnail' alt='Cinque Terre' >
</div>";
}
echo "</div></div><br /></div>";
}
I'm trying to do something with my Bootstrap .post-title class.
I want to put an element.style background on my post titles, which calls as a background, to the post featured image, for each post. I've already achieve this, but something went wrong and now isnt working. the only thing i know is must look something like this.
<div class="post-featured" style="background-image:url('upload/<?php the_post_thumbnail( 'wpbs-featured' ); ?>')">
but something in the syntax there is wrong, because it render this characters on HTML. whats going on?
')">
live example: WP Featured post image, as a div background
the_post_thumbnail returns an IMG html tag. So the generated code is
<div class="post-featured" style="background-image:url('upload/<img src="path/to/file.png">')">
Definitely not something that could work... You want the url only, so you should do this:
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id,'wpbs-featured', true);
<div class="post-featured" style="background-image:url('<?= $thumb_url[0] ?>')">
this is the actual html snippet working.
<?php
$img = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "full");
$img = $img[0];
?>
<div class="postfeatured" style="<?php if($img){echo 'background:url('.$img.');';} ?>">
<div class="page-header"><h1 class="single-title" itemprop="headline"><?php the_title(); ?></h1>
<h4>
<?php $mykey_values = get_post_custom_values('_aioseop_description');
foreach ( $mykey_values as $key => $value ) {
echo substr("$value",0 ,300); //This will display the first 150 symbols
}?>
</h4>
<hr>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_native_toolbox"></div>
<hr>
</div>
</div>
live example: Design Thinking. Blog de Diseño Gráfico. Picoboero
I think my question is the simplest question on this site. Nevertheless i couldn't solve it.
Now, i have a html like bottom. Elements have to be shown side by side. However output is like in picture below. Also, I did not get where the underscore come up from.
How can i do what i want?
<div class="ilgiliclass">
<?php
echo '<ul>';
if(...)
{
foreach(...)
{
if(...)
{
?>
<li>
<img src="img/arrow.gif">
<div class="si">
...
</div>
-
<div class="so">
...
</div>
<br />
</li>
<?php
}
}
}
?>
</ul>
You have a dash in your markup between the si and so elements. I imagine that's the 'underscore' you are talking about. Both .si and .so could be set to display:inline;, which should put everything on one line.
JS Fiddle Example: http://jsfiddle.net/TYsN6/