It should be like this:
<div> code here </div>
<div> code here </div>
<div> code here </div>
Each div looping right after the other. Instead, it is executing like this:
<div> code here </div>
<div> code here </div>
<div> code here </div>
Page I am working on: http://www.equitasmg.com/who-we-are-2/
The images are not aligned (should be in a row).
Here's the PHP:
<center><h2>Our Leadership</h2></center>
<?php
$people= get_field('people');
$a=0;
foreach ($people as $r) {
$a++;
?>
<div style="float:left;width:30%;padding:30px;">
<img src="<?php echo $r['image']['sizes']['team'];?>" style="max-width:750px !important;width:250px;">
<h3>
<?php echo $r['name'];?>
</h3>
<div class="position">
<?php echo $r['position'];?>
</div>
<?php echo $r['intro_text'];?>
<?php if ($r[ 'learn_more_text']) { ?>
Learn More
<?php } ?>
<?php if ($r[ 'learn_more_text']) { ?>
<div id="<?php echo sanitize_title($r['name'] );?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h3><?php echo $r['name'];?></h3>
<div class="position">
<?php echo $r['position'];?>
</div>
<div class="content">
<?php echo $r['learn_more_text'];?>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
</div>
<?php } ?>
<?php } ?>
Here is the problem one div should between closing php tag
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<?php } ?>
</div>
<?php } ?>
You don't need to float every div in loop just add a div before loop and float that div to left.
remove floating Style within loop.. here is your clean code.
JS BIN
<div style="float:left;width:30%;padding:30px;">
<?php
$people= get_field('people');
$a=0;
foreach ($people as $r) {
$a++;
?>
<div style="">
<img src="<?php echo $r['image']['sizes']['team'];?>" style="max-width:750px !important;width:250px;">
<h3>
<?php echo $r['name'];?>
</h3>
<div class="position">
<?php echo $r['position'];?>
</div>
<?php echo $r['intro_text'];?>
<?php if ($r[ 'learn_more_text']) { ?>
Learn More
<?php } ?>
<?php if ($r[ 'learn_more_text']) { ?>
<div id="<?php echo sanitize_title($r['name'] );?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h3><?php echo $r['name'];?></h3>
<div class="position">
<?php echo $r['position'];?>
</div>
<div class="content">
<?php echo $r['learn_more_text'];?>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
</div>
<?php } ?>
<?php } ?>
<div style="clear:both;"></div>
</div>
Related
I'd like to include an IF statement into my highlights.phtml file where I can check if my custom attribute (named preorder) has been selected or not. As the name indicates, this custom attribute can be set on a product to signify if it can be pre-ordered. How can I access this variable/attribute in the highlights slider code, below? It doesn't seem to be part of the $products array?
<?php $products = $this->getHighlightedProducts() ?>
<?php if (is_array($products) && count($products)): ?>
<div class="block block-related">
<div class="block-title">
<h2><?php echo $this->__('Highlighted Products') ?></h2>
</div>
<div class="block-content">
<div class="product-carousel">
<div class="product-carousel">
<ul class="highlighted-products-slider slider">
<?php $limit = 6; ?>
<?php foreach ($products as $product): ?>
<li class="item">
<div class="product" >
<a class="product-image" href="<?php echo $this->escapeHtml($product['url']) ?>">
<img src="<?php echo $this->escapeHtml($product['image']) ?>">
</a>
<div class="product-details">
<p class="product-name">
<?php echo $this->escapeHtml($product['name']) ?>
</p>
<?php echo $product['price'] ?>
</div>
<div class="actions">
<a href="<?php echo $this->escapeHtml($product['add_to_cart_url']) ?>">
<button class="button btn-cart"><?php echo $this->__('Add to Cart') ?></button>
</a>
</div>
</div>
</li>
<?php
if(++$ct >= $limit)
break;
?>
<?php endforeach ?>
<?php endif ?>
</ul>
</div>
</div>
</div>
</div>
Get the attribute with the code i added, then use it for your logic. What you want to do with the attribute, you can do now. But $product['id'] has to exist!
You need the product id for this to work, else maybe the SKU.
Hope to help.
<?php $products = $this->getHighlightedProducts() ?>
<?php if (is_array($products) && count($products)): ?>
<div class="block block-related">
<div class="block-title">
<h2><?php echo $this->__('Highlighted Products') ?></h2>
</div>
<div class="block-content">
<div class="product-carousel">
<div class="product-carousel">
<ul class="highlighted-products-slider slider">
<?php $limit = 6; ?>
<?php foreach ($products as $product): ?>
<?php
$productToCheck= Mage::getModel('catalog/product')->load($product['id']);
//use this variable
$variable = $productToCheck->getData('preorder');
//use this variable when attribute is a dropdown
$variableIfItsADropdown = $product->getAttributeText('preorder');
?>
<li class="item">
<div class="product" >
<a class="product-image" href="<?php echo $this->escapeHtml($product['url']) ?>">
<img src="<?php echo $this->escapeHtml($product['image']) ?>">
</a>
<div class="product-details">
<p class="product-name">
<?php echo $this->escapeHtml($product['name']) ?>
</p>
<?php echo $product['price'] ?>
</div>
<div class="actions">
<a href="<?php echo $this->escapeHtml($product['add_to_cart_url']) ?>">
<button class="button btn-cart"><?php echo $this->__('Add to Cart') ?></button>
</a>
</div>
</div>
</li>
<?php
if(++$ct >= $limit)
break;
?>
<?php endforeach ?>
<?php endif ?>
</ul>
</div>
</div>
</div>
</div>
Here's the div that manages the look of each item in the loop:
<div style="float:left;width:30%;padding:30px;height:auto;">
<img src="<?php echo $r['image']['sizes']['team']; ?>" style="max-width:750px !important;width:100%;">
<h3>
<?php echo $r['name']; ?>
</h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<?php echo $r['intro_text']; ?>
<?php if ($r['learn_more_text']) { ?>
Learn More
<?php } ?>
<?php if ($r['learn_more_text']) { ?>
<div id="<?php echo sanitize_title($r['name']); ?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h3><?php echo $r['name']; ?></h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<div class="content">
<?php echo $r['learn_more_text']; ?>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
</div>
If I set the height to a fixed number (eg: 450x), the images are aligned in a row. But that will make the page non mobile responsive. If I set the height to auto or to a percentage like 30%, the images become mobile responsive but they don't align. I get 2 images that separate into different rows.
Also, I got 2 sections of image. One is called Our Leadership and the other is called Our Team. The section at the bottom is aligned correctly and is contained in a div. The div above it refuses to be contained in a div. If I wrap it in a div, Only the first item wraps itself in the div. I've no idea why.
eg:
<center>
<div>
<div>first item here</div>
</div>
<div>second item here</div>
<div>third item here</div>
<div>fourth item here</div>
Here's the complete code for both sections:
<center><h2>Our Leadership</h2></center>
<center><div>
<?php
$people = get_field('people');
$a = 0;
foreach ($people as $r) {
$a++;
?>
<div style="float:left;width:30%;padding:30px;height:auto;">
<img src="<?php echo $r['image']['sizes']['team']; ?>" style="max-width:750px !important;width:100%;">
<h3>
<?php echo $r['name']; ?>
</h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<?php echo $r['intro_text']; ?>
<?php if ($r['learn_more_text']) { ?>
Learn More
<?php } ?>
<?php if ($r['learn_more_text']) { ?>
<div id="<?php echo sanitize_title($r['name']); ?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h3><?php echo $r['name']; ?></h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<div class="content">
<?php echo $r['learn_more_text']; ?>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
</div></center>
<div style="clear:both;"></div>
<center><h2>Our Team</h2></center>
<center><div>
<?php
$people2 = get_field('people_bottomsection');
$a = 0;
foreach ($people2 as $r) {
$a++;
?>
<div style="float:left;width:30%;padding:30px;height:auto;">
<img src="<?php echo $r['image']['sizes']['team']; ?>" style="max-width:750px !important;width:100%;">
<h3>
<?php echo $r['name']; ?>
</h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<?php echo $r['intro_text']; ?>
<?php if ($r['learn_more_text']) { ?>
Learn More
<?php } ?>
<?php if ($r['learn_more_text']) { ?>
<div id="<?php echo sanitize_title($r['name']); ?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h3><?php echo $r['name']; ?></h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<div class="content">
<?php echo $r['learn_more_text']; ?>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
</div></center>
<div style="clear:both;"></div>
Check out the source code at: http://www.equitasmg.com/who-we-are-2/
it's because the items in the loop are having different height. So, try adding a constant height to each item in the loop.
Eg:
<div style="float:left;width:30%;padding:30px;min-height:550px;"></div>
I got 2 sections on a page. You can see it here: http://www.equitasmg.com/who-we-are-2/
Both sections have a <div> wrapped around them, but the first section "Our Leadership" seems to not like the <div>. The <div> wraps around the first item in the section but does not wrap around all the items.
Here is the PHP for both sections.
First section
<center><h2>Our Leadership</h2></center>
<center><div>
<?php
$people= get_field('people');
$a=0;
foreach ($people as $r) {
$a++;
?>
<div class="people">
<img src="<?php echo $r['image']['sizes']['team'];?>" style="max-width:750px !important;width:100%;">
<h3>
<?php echo $r['name'];?>
</h3>
<div class="position">
<h4><?php echo $r['position'];?></h4>
</div>
<?php echo $r['intro_text'];?>
<?php if ($r[ 'learn_more_text']) { ?>
Learn More
<?php } ?>
<?php if ($r[ 'learn_more_text']) { ?>
<div id="<?php echo sanitize_title($r['name'] );?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h3><?php echo $r['name'];?></h3>
<div class="position">
<?php echo $r['position'];?>
</div>
<div class="content">
<?php echo $r['learn_more_text'];?>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
</div></center>
<div style="clear:both;"></div>
Second section
<center><h2>Our Team</h2></center>
<center><div>
<?php
$people2= get_field('people_bottomsection');
$a=0;
foreach ($people2 as $r) {
$a++;
?>
<div class="people">
<img src="<?php echo $r['image']['sizes']['team'];?>" style="max-width:750px !important;width:100%;">
<h3>
<?php echo $r['name'];?>
</h3>
<div class="position">
<h4><?php echo $r['position'];?></h4>
</div>
<?php echo $r['intro_text'];?>
<?php if ($r[ 'learn_more_text']) { ?>
Learn More
<?php } ?>
<?php if ($r[ 'learn_more_text']) { ?>
<div id="<?php echo sanitize_title($r['name'] );?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h3><?php echo $r['name'];?></h3>
<div class="position">
<?php echo $r['position'];?>
</div>
<div class="content">
<?php echo $r['learn_more_text'];?>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
</div></center>
<div style="clear:both;"></div>
You just got extra div.
First section you got extra div here
<center><h2>Our Leadership</h2></center>
<center>
<div>
<?php
$people= get_field('people');
$a=0;
foreach ($people as $r) {
$a++;
?>
<div class="people">
<img src="<?php echo $r['image']['sizes']['team'];?>" style="max-width:750px !important;width:100%;">
<h3>
<?php echo $r['name'];?>
</h3>
<div class="position">
<h4><?php echo $r['position'];?></h4>
</div>
<?php echo $r['intro_text'];?>
<?php if ($r[ 'learn_more_text']) { ?>
Learn More
<?php } ?>
<?php if ($r[ 'learn_more_text']) { ?>
<div id="<?php echo sanitize_title($r['name'] );?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h3><?php echo $r['name'];?></h3>
<div class="position">
<?php echo $r['position'];?>
</div>
<div class="content">
<?php echo $r['learn_more_text'];?>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<!-- </div> --> //extra div here
<?php } ?>
</div>
<?php } ?> //end of foreach
</div>
</center>
<div style="clear:both;"></div>
second section
<center><h2>Our Team</h2></center>
<center>
<div>
<?php
$people2= get_field('people_bottomsection');
$a=0;
foreach ($people2 as $r) {
$a++;
?>
<div class="people">
<img src="<?php echo $r['image']['sizes']['team'];?>" style="max-width:750px !important;width:100%;">
<h3>
<?php echo $r['name'];?>
</h3>
<div class="position">
<h4><?php echo $r['position'];?></h4>
</div>
<?php echo $r['intro_text'];?>
<?php if ($r[ 'learn_more_text']) { ?>
Learn More
<?php } ?>
<?php if ($r[ 'learn_more_text']) { ?>
<div id="<?php echo sanitize_title($r['name'] );?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h3><?php echo $r['name'];?></h3>
<div class="position">
<?php echo $r['position'];?>
</div>
<div class="content">
<?php echo $r['learn_more_text'];?>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<!-- </div> --> //extra div
<?php } ?>
</div>
<?php } ?>
</div>
</center>
I am using a Vebra plugin on Wordpress, they use shortcodes to show a search area and a shortcode to show the results.
I have my homepage (http://lytham.voodoodev4.co.uk/) using the "search" shortcode, my "properties" shortcode is on http://lytham.voodoodev4.co.uk/?page_id=33
When I search on the page it just refreshes the page, how do I push the search results to that page?
Search php:
<div id="propertyFilter" class="vp_search">
<form action="<?php echo vp_get_search_link()?>" method="GET">
<?php vp_hidden_fields(); ?>
<div class="property_refine">Refine your search:</div>
<div class="property_type">
<?php vp_get_areas(); ?>
</div>
<div class="property_search_group">
<p>Minimum number of bedrooms</p>
<?php vp_get_bedrooms(); ?>
</div>
<div class="property_search_group vp_price">
<p>Minimum price of property</p>
<?php vp_get_minprice(); ?>
</div>
<div class="property_search_group vp_price">
<p>Maximum price of property</p>
<?php vp_get_maxprice(); ?>
</div>
<div class="property_search_group vp_rent">
<p>Minimum rent for property</p>
<?php vp_get_minrent(); ?>
</div>
<div class="property_search_group vp_rent">
<p>Maximum rent for property</p>
<?php vp_get_maxrent(); ?>
</div>
<div class="property_search_group vp_commercial">
<p>Min Area (sqft)</p>
<?php vp_get_minarea(); ?>
</div>
<div class="property_search_group vp_commercial">
<p>Max Area (sqft)</p>
<?php vp_get_maxarea(); ?>
</div>
<div class="property_search_group">
<p>Type of property</p>
<?php vp_get_property_types(); ?>
</div>
<div class="property_search_group">
<p>Location</p>
<input type="text" id="vp_location" name="vp_location" placeholder="Enter postcode or place name" value="<?php vp_get_location(); ?>" />
</div>
<div class="property_search_group">
<p>Search</p>
<?php vp_get_radius(); ?>
</div>
<input class="submit" type="submit" value="Search" />
</form>
</div>
Properties results PHP:
<div id="propertyResults">
<?php echo vp_list_head();
if ($properties=vp_theproperties()) {
switch (vp_get_view()) {
case "list": ?>
<div id="propertyListView">
<div id="propertyOrdering" class="clearfix">
<div id="orderBy">
<span id="vp_order_message">Order by:</span>
<?php vp_get_orderby(); ?>
View Map
</div>
</div>
<div class="clearfix">
<?php foreach ($properties as $property) { ?>
<div class="property">
<div class="left_column">
<div class="property_image">
<a class="property_overview_thumb" href="<?php echo vp_propertyurl($property->vebraid); ?>" title="<?php echo $property->address_custom; ?>">
<?php echo vp_propertyimage($property->vebraid,0,"property_image"); ?>
</a>
<div class="property_tagline"><?php echo $property->web_status; ?></div>
</div>
</div>
<div class="right_column">
<div class="property_summary">
<h3 class="property_title">
<span><?php echo $property->address_custom; ?> <?php echo $property->property_type; ?></span>
</h3>
<h4 class="property_address"><?php echo $property->address_display; ?></h4>
<div class="property_excerpt"><?php echo $property->excerpt; ?></div>
</div>
</div>
<div class="property_features clearfix">
<?php if ($property->area == "Commercial") {
if (!empty($property->propertyarea_sqft)) {?>
<span class="property_area"><?php echo $property->propertyarea_sqft; ?> sqft</span>
<?php } ?>
<?php } else {?>
<span class="property_beds"><?php echo $property->bedrooms; ?> Bedrooms</span>
<span class="property_baths"><?php echo $property->bathrooms; ?> Bathrooms</span>
<?php } ?>
<div class="property_price">£<?php echo number_format($property->price,0,"",","); ?> <?php echo $property->price_postfix; ?>View Details<?php do_action('vp_other_action_buttons',$property->vebraid,'button property_button') ?></div>
</div>
</div>
<?php } ?>
</div>
<div class="properties-paging">
<ul>
<?php if (vp_current_page() > 1) { ?>
<li>< Previous</li>
<?php } ?>
<li>Page <?php echo vp_current_page(); ?> of <?php echo vp_page_count(); ?></li>
<?php if (vp_current_page() < vp_page_count()) { ?>
<li>> Next</li>
<?php } ?>
</ul>
</div>
</div>
<?php
break;
case "map":?>
<div id="propertyMapView">
<div id="propertyOrdering" class="clearfix">
<div id="orderBy">
View List
</div>
</div>
<?php vp_map_markers($properties); ?>
<div id="vp-map" style="width: 100%; height: 550px;"></div>
</div>
<?php
break;
case "featured": ?>
<?php foreach ($properties as $property) { ?>
<div class="property">
<div class="left_column">
<div class="property_tagline badge_<?php echo str_replace(" ","_",$property->web_status); ?>"></div>
<div class="property_image">
<a class="property_overview_thumb" href="<?php echo vp_propertyurl($property->vebraid); ?>" title="<?php echo $property->address_name; ?>">
<?php echo vp_propertyimage($property->vebraid,0,"property_image"); ?>
</a>
</div>
</div>
<div class="right_column">
<ul class="property_summary">
<li class="property_title">
<?php echo $property->address_custom; ?><span><?php echo $property->property_type; ?></span>
</li>
<li class="property_address"><?php echo $property->address_display; ?></li>
<li class="property_price">£<?php echo number_format($property->price,0,"",","); ?> <?php echo $property->price_postfix; ?></li>
</ul>
<div class="buttons clearfix">
View Details
</div>
</div>
</div>
<?php } ?>
<?php
break;
}
} else { ?>
<p>No matching properties found. Please try alternative search criteria.</p>
<?php } ?>
<?php echo vp_list_footer();?>
</div>
SOLVED:
In the vp-search.php I changed:
<form action="<?php echo vp_get_search_link()?>" method="GET">
to
<form action="<?php echo vp_get_search_link()?>/property-results/" method="GET">
Obviously replace /property-results/ for the page that has the properties shortcode in it :)
What plugin should I use to paginate the output of the below PHP foreach (around 400 <articles>):
<div id="hotel-list" class="hotel-list listing-style3 hotel">
<?php foreach ($hotelName as $index => $name):?>
<article class="box" data-board="<?php echo $board[$index];?>" data-stars="<?php echo $StarRating[$index];?>" name="<?php echo $hotelName[$index];?>" data-price="<?php $pret1 =$hotelPrices[$index];echo round($pret1 + ($pret1 * 0.20));?>">
<figure class="col-sm-5 col-md-4">
<a title=""><img width="270" height="160" alt="" src="<?php echo $img[$index][0];?>"></a>
</figure>
<div class="details col-sm-7 col-md-8">
<div>
<div>
<h3 class="box-title"><?php echo $name;?><small><i class="soap-icon-departure yellow-color"></i> <?php echo $hotelAddress[$index];?>, <?php echo $hotelDestination[$index];?></small></h3>
</div>
<div>
<div class="stars-<?php echo $StarRating[$index];?>-container">
<span class="stars-<?php echo $StarRating[$index];?>" style="width: 80%;"></span>
</div>
</div>
</div>
<div>
<div>
<p class="article-text"><label>Perioada: </label> <?php echo $In;?> - <?php echo $Out;?> <?php echo $adults;?> adulti / <?php echo $kids;?> copii; </p>
<p class="article-text"><label>Tip Masa: </label><?php echo $boardType[$index];?></p>
<p class="article-text"><label>Camera(e): </label><?php echo $availHotelss[$index]->rooms[0]->roomCategory;?> <?php echo $availHotelss[$index]->rooms[1]->roomCategory;?> <?php echo $availHotelss[$index]->rooms[2]->roomCategory;?> <?php echo $availHotelss[$index]->rooms[3]->roomCategory;?></p>
</div>
<div>
<span class="price"><small>De la</small>€<?php $pret1 =$hotelPrices[$index];echo round($pret1 + ($pret1 * 0.2)); ?></span>
<a class="button btn-small full-width text-center" title="" href="Hotel-Detalii.php?hotel=<?php echo $hotelCodes[$index];?>">DETALII</a>
</div>
</div>
</div>
</article>
<?php endforeach?>
</div>
I found only pagination plugin for MYSQL records.