I am trying to have multiple lines of pictures with 6 pics in each line. Currently there are 4 pics on each line and I am not sure how to make it so I have 6. Any help would be very appreciated!
Here is my code:
<?php
$pageTitle = "Bright Punch Love";
$section = "home";
include('inc/products.php');
?>
<?php include('inc/header.php'); ?>
<div id="top"><img src="top.png" width="1337"></div>
<div class="shirts">
<ul class= "shirts-section">
<?php
foreach($products as $product_id => $product) {
echo "<li>";
echo '<a href="shirt.php?id=' . $product_id . '">';
echo '<img src="' . $product["img"] . '" width= 200 alt="' . $product["name"] . '">';
echo '<p id="details">$30 View Details</p>';
echo "</a>";
echo "</li>";
}
?>
</ul>
</div>
<?php include('inc/footer.php'); ?>
<div id="bottom-index"><img src="bottom-index.png" width="1337"></div>
I would suggest to use % instead of px. Also you use the width tag. Try to avoid using css in your html code. Use class="..." instead and include your css file in the head tag. I make the file now in the head, because it is easier for you. But I would recommend to make an file just for the css.
<head>
<style type="text/css">
.picture{
width : 15%;
}
</style>
</head>
echo '<img src="' . $product["img"] . '" class=\"picture\" alt="' . $product["name"] . '">';
Use PHP's array_chunk function to short your answer. Just Try.
$products_new = array_chunk($products, 6);
foreach($products_new as $product_id => $product) {
//Your code
}
Related
I have a website where users may upload images...
I need to add my logo (watermark) to the images every single time to uploaded.
How can I do so?
Anybody have a good tutorial, article or example for this? Or know of any function in php which I would need to find the position of the watermark?
<?php
if(houzez_edit_property()) {
$property_images = get_post_meta( $property_data->ID, 'fave_property_images', false );
$featured_image_id = get_post_thumbnail_id( $property_data->ID );
$property_images[] = $featured_image_id;
$property_images = array_unique($property_images);
if (!empty($property_images[0])) {
foreach ($property_images as $prop_image_id) {
$is_featured_image = ($featured_image_id == $prop_image_id);
$featured_icon = ($is_featured_image) ? 'text-success' : '';
$img_available = wp_get_attachment_image($prop_image_id, 'thumbnail');
if (!empty($img_available)) {
echo '<div class="col-md-3 col-sm-4 col-6 property-thumb">';
echo wp_get_attachment_image($prop_image_id, 'houzez-item-image-1', false, array('class' => 'img-fluid'));
echo '<div class="upload-gallery-thumb-buttons">';
echo '<button class="icon icon-fav icon-featured" data-property-id="' . intval($property_data->ID) . '" data-attachment-id="' . intval($prop_image_id) . '"><i class="houzez-icon icon-rating-star full-star '.esc_attr($featured_icon).'"></i></button>';
echo '<button class="icon icon-delete" data-property-id="' . intval($property_data->ID) . '" data-attachment-id="' . intval($prop_image_id) . '"><span class="btn-loader houzez-loader-js"></span><i class="houzez-icon icon-remove-circle"></i></button>';
echo '</div>';
echo '<input type="hidden" class="propperty-image-id" name="propperty_image_ids[]" value="' . intval($prop_image_id) . '"/>';
if ($is_featured_image) {
echo '<input type="hidden" class="featured_image_id" name="featured_image_id" value="' . intval($prop_image_id) . '">';
}
echo '</div>';
}
}
}
}
?>
Use PHP GD Library. You can open saved image file, write text or overlay watermark image and save image again.
Here is the problem that while looping the php in while loop in w3-row-padding of w3 responsive layout . The layout breaks
Here is the source code
<?php
$r=0;
while($r<ceil($fetch_row_count/4))
{ ?>
<div class="w3-row-padding w3-padding-16 w3-center" style="clear:both" id="food">
<?php
while($row=mysqli_fetch_array($res))
{
?>
<div class="w3-quarter">
<img src="admin/uploads/<?php echo $row['image']; ?>" alt="noodles" style="width:50%">
<h3><?php echo $row['title']; ?></h3>
<p><?php echo $row['description']; ?> </p>
</div>
<?php
}
$r++;
}
?>
</div>
Thanks for reply and comments in advance
That bottom div was not being added for each of your padded containers.
The way the code is written you are adding a padded container and then adding your w3-quarter div for each of your result sets and then repeating that a bunch of times with what looks like to me the same set of data in each one.
What you are probably trying to accomplish is just making one padded div and then echo out your result set with the w3-quarter divs inside of it.
Here is your original way with the bottom div corrected:
<?php
$r=0;
while($r<ceil($fetch_row_count/4)) {
echo
'<div class="w3-row-padding w3-padding-16 w3-center" style="clear:both" id="food">';
while($row=mysqli_fetch_array($res)){
echo
'<div class="w3-quarter">' .
'<img src="admin/uploads/' . $row['image'] . '" alt="noodles" style="width:50%">' .
'<h3>' . $row['title'] . '</h3>' .
'<p>' . $row['description'] . '</p>' .
'</div>';
}
$r++;
echo
'</div>';
}
?>
Here is the way I think you are trying to do it: (Just guessing)
<?php
echo
'<div class="w3-row-padding w3-padding-16 w3-center" style="clear:both" id="food">';
$r = 0;
while($row=mysqli_fetch_array($res)){
echo
'<div class="w3-quarter">' .
'<img src="admin/uploads/' . $row['image'] . '" alt="noodles" style="width:50%">' .
'<h3>' . $row['title'] . '</h3>' .
'<p>' . $row['description'] . '</p>' .
'</div>';
$r++;
//I would not actually try to control how many results you add like this.
//I would get the results from a better formatted query.
if($r < ceil($fetch_row_count/4)){
break;
}
}
echo
'</div>';
?>
I'm using a PHP code on my wesbiste to get thumbnails of vimeo videos.
here is the code :
<?php
echo '<img src="' . get_vimeo_thumb('43096888', 'thumbnail_large') . '" class="image_page_texte_et_medias" style="cursor:pointer" >';
?>
I'm using a ACF custom field with the video ID
<?php the_sub_field('vimeo'); ?>
What I'm trying to do is to replace the ID in my first php code ('43096888') by :
<?php the_sub_field('vimeo'); ?>
can anybody help me with this,
thanks a lot,
aren't you allowed to use variables as arguments? something like:
<?php
$foo = the_sub_field('vimeo');
echo '<img src="' . get_vimeo_thumb($foo, 'thumbnail_large') . '" class="image_page_texte_et_medias" style="cursor:pointer" >';
?>
<?php
echo '<img src="' . get_vimeo_thumb(the_sub_field('vimeo'), 'thumbnail_large') . '" class="image_page_texte_et_medias" style="cursor:pointer" >';
?>
<?php
echo '<img src="' . get_vimeo_thumb(the_sub_field('vimeo'), 'thumbnail_large') . '" class="image_page_texte_et_medias" style="cursor:pointer" >';
?>
You can simply replace the string '43096888' with your function the_sub_field('vimeo') if that's something what you want.
So I am using Wordpress and I have to have a specific logo on a specific page. From research I have to use conditional logic to swap the existing logo with another depending on the current page. Everything I have tried seems to just break the theme.. Any help on guiding me in the correct direction? So basically every page except page_id=79 would have the same logo in the header.
<a id="logo" href="<?php echo home_url(); ?>">
<?php
if(!empty($options['use-logo'])) {
$default_logo_id = (!empty($options['retina-logo'])) ? 'id="default-logo"' : null;
echo '<img '.$default_logo_id.' alt="'. get_bloginfo('name') .'" src="' . $options['logo'] . '" />';
if(!empty($options['retina-logo'])) echo '<img id="retina-logo" alt="'. get_bloginfo('name') .'" src="' . $options['retina-logo'] . '" />';
} else { echo get_bloginfo('name'); }
?>
</a>
<?php if ( is_page(79) ) { ?>
What to displayed on page 79.
<?php } else { ?>
What will be displayed everywhere else.
<?php } ?>
This should work.
Try using get_queried_object_id();
<a id="logo" href="<?php echo home_url(); ?>">
<?php
if(!empty($options['use-logo']) && get_queried_object_id() != 79) {
$default_logo_id = (!empty($options['retina-logo'])) ? 'id="default-logo"' : null;
echo '<img '.$default_logo_id.' alt="'. get_bloginfo('name') .'" src="' . $options['logo'] . '" />';
if(!empty($options['retina-logo'])) echo '<img id="retina-logo" alt="'. get_bloginfo('name') .'" src="' . $options['retina-logo'] . '" />';
} else { echo get_bloginfo('name'); }
?>
</a>
The url of your logo image is contained within $options['logo']. You should be able to modify this in the admin section of your WordPress installation (try looking in "Appearance -> Header").
I am attempting to style a list of results from a foreach into two columns, however I'm not too sure how to go about it without throwing off the PHP.
Currently, everything looks like below:
and I would like it to look so:
Currently, my foreach and CSS looks thus:
<p class="title">Reviews</p>
<section id="reviews">
<ul class="section_body">
<?php
foreach($reviews['reviews'] as $rv){
if ($rtmp++ < 10);
if ($rv['freshness'] == 'fresh') {
$image = "fresh";
}
else {
$image = "rotten";
}
echo '<img src="assets/images/' . $image . '.png" class="rating" title="Rotten" alt="Rotten" />';
echo '<li>' . $rv['quote'] . '</li>';
}
?>
</ul>
</section>
Thank you in advance to anyone who may be able to help! It will be very gratefully received.
I normally use css to do this kind of task to let the browser take care of stuffs
#reviews li
{
float:left;
width: 45%;
...
}
add those 2 lines to your css and let browser takes care of the arrangement. The idea is having each li take half of the container (50%). I made it 45% to take care of extra padding, margin and border
Also, your quote and image should be in the li
<li> <img src="..." /> <span>my quote here</span> </li>
Try below code
<section id="reviews">
<?php
$i=0;
foreach($reviews['reviews'] as $rv)
{
if($i++%2 == 0)
{
echo '<ul class="section_body">';
}
if ($rtmp++ < 10);
if ($rv['freshness'] == 'fresh') {
$image = "fresh";
}
else {
$image = "rotten";
}
$img = '<div><img src="assets/images/' . $image . '.png" class="rating" title="Rotten" alt="Rotten" /></div>';
echo '<li>' .$img . $rv['quote'] . '</li>';
if($i%2 == 0 || $i== count($reviews['reviews']))
{
echo '</ul>'
}
}
?>
</section>
You should put image and review text inside the li element.