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
Related
CK editor data displaying with html tags in php
please help me...
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header text-uppercase">Product Description</div>
<?php echo $result['description'];?>
</div>
</div>
</div>
it's displaying like this
but should displaying like this
Please use this "html_entity_decode"
Example:
$str = '<a href="https://www.w3schools.com">w3schools.com</a>'; echo html_entity_decode($str);
I have a template for the details view of a single product. In this template it lists the "tags" and "categories" with links to view products of the same tag or category.
I define the links for the tags and categories in the same way but they are rendered differently.
here is my template:
<link rel="stylesheet" href="#App.Path/assets/portfolio.css" data-enableoptimizations="bottom"/>
<div class="sc-element">
<div class="ks-portfolio-detail">
<div class="row">
<div class="col-sm-12 col-md-6">#Edit.Toolbar(Content)
<img src="#Content.Image" alt="#Content.UrlKey" class="img-responsive" />
</div>
<div class="col-sm-12 col-md-6">
<div class="ks-title"><h1>#Content.Title</h1></div>
...
<div class="ks-lable">Categories:</div>
#{ int count=0; }
#foreach(var item in AsDynamic(Content.Categories)){
count++;
#item.Title
#(count < Content.Categories.Count?" | ":"")
}
<br/><br/>
<div class="ks-lable">Tags:</div>
#{ int counter=0; }
#foreach(var item in AsDynamic(Content.Tags)){
counter++;
#item.Name
#(counter < Content.Tags.Count?" | ":"")
}
</div>
</div>
</div>
</div>
Please note the lines where the category and tag links are created:
#item.Title
...
#item.Name
PROBLEM
The tags Link.To renders the link with "slashes" like:
http://dnn804/portfolio/tag/Demo2
but the category renders the link like:
http://dnn804/portfolio?category=Flowers
QUESTION
Can someone help me figure out why these links are rendered differently when using the same function? I want them both to appear like the "tags" link.
Thanks in advance.
The Link.To uses the DNN-internal link resolution. I'm just going to guess that there are some terms that DNN maybe treats differently, causing special links. DNN does sometimes do strange things with links, just like on the home page, which is why we are using it.
That's just a guess though.
You could run some experiments like "cat=" instead of category, to validate this.
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)
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 have a function
myfunc(){
?>
<h1>Title</h1>
<div class="container">
<?php if (condition): ?>
<div class="something">more data</div>
<?php endif; ?>
</div>
<?php
}
this function has way more HTML content combined with php if statements inside
Now, i want to store that html content into a variable so i can use it later... now it will simply display the content of the function right away which is not what i want
have a look into php heredoc and nowdoc
it may help
http://php.net/manual/en/language.types.string.php#language.types.string.syntax.nowdoc