I'm trying to hide a div when the custom field is empty. When I don't use an image in the "palette" custom field I want it to hide <div class="small-12 large-12 columns center">. Thanks in advance.
<div class="small-12 large-12 columns center">
<?php
$image = get_field('palette');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
The classes on the div have padding and margins assigned to them which is creating the spacing. Removing the div all together when will remove the classes solving the issue.
You could move the if statement around the whole div, like this:
<?php
$image = get_field('palette');
if( !empty($image) ):
?>
<div class="small-12 large-12 columns center">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<?php endif; ?>
if you want to hide the div you should do this :
<div class="small-12 large-12 columns center"
<?php
$image = get_field('palette');
if (empty($image)){?>style="display:none"<?php } ?>
>
<?php
$image = get_field('palette');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
Related
I am looking to have background color exactly like
Here is my code:
<div class="col-md-4">
<div>
<?php if (!empty($lot_image)): ?>
<img src="<?php echo $lot_image['url']; ?>" alt="<?php echo $lot_image['alt']; ?>">
<?php endif; ?>
<div class="caption checkout-caption">
<h3 id="newpro"><?php echo "$monte_text"; ?></h3>
<p class="details"><?php echo "$displaycenter6";?></p>
</div>
How can I cover complete image and the text so they both will have same color without white space between them?
I have 9 posts showing up on a page. I'm only showing the featured images from the post and the images are set to a background image. I want to be able to click the images and have the image show up in a new window. I'm having a little trouble figuring this out. I want to wrap the div in an link.
This is the code I have:
<article <?php post_class('col-md-4 site-content'); ?>>
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id(
$post->ID ), 'large' );
$image = $image[0]; ?>
<?php endif; ?>
<div class="coupons-post" style="background-image: url('<?php echo
$image; ?>')">
<?php /*?><div class="entry-thumbnail">
<a href="<?php the_permalink(); ?>"><?php
the_post_thumbnail('large' , array( 'class' => 'img-responsive') ); ?></a>
</div><?php */?>
<!-- <div class="post-content">
<div class="entry-meta">
<p class="date">News / <?php the_time('n.j.Y') ?></p>
</div>
<h2 class="entry-title">
<?php the_title(); ?>
</h2>
<div class="entry-summary">
<p></p><p><?php $excerpt = get_the_excerpt(); ?>
<?php echo substr($excerpt, 0, 100); ?>...</p>
<p></p>
<a class="read-more" href="<?php the_permalink(); ?>">Read More</a>
</div>
</div>-->
</div>
</article>
I want to wrap the div "coupons-post" with the link.
Like this?
<article <?php post_class('col-md-4 site-content'); ?>>
<?php
if (has_post_thumbnail( $post->ID ) ) {
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );
$image = $image[0];
}
?>
<a href="<?= $image; ?>" target="_blank">
<div class="coupons-post" style="background-image: url('<?php echo $image; ?>')">
</div>
</a>
</article>
With the code below now working can anyone suggest how I pull out the image from the collection at a larger size, this is only working for thumbnails at the moment.
<?php
if(!hook("EditorsPick")):
/* ------------ Collections promoted to the home page ------------------- */
$home_collectionsx=get_home_page_promoted_collectionsx(16);
foreach ($home_collectionsx as $home_collectionx)
{
?>
<div class="EditorsPick">
<div class="HomePanel"><div class="HomePanelINtopEditors">
<div class="HomePanelINtopHeader">Editors Pick</div>
<div class="HomePanelINtopText">This is the editors pick of Asset Space...</div>
<div class="EditorsPicImage"><div style="padding-top:<?php echo floor((155-$home_collectionx["thumb_height"])/2) ?>px; margin-top: -24px; margin-bottom: -15px;">
<a href="<?php echo $baseurl_short?>pages/search.php?search=!collection<?php echo $home_collectionx["ref"] ?>" onClick="return CentralSpaceLoad(this,true);"><img class="ImageBorder" src="<?php echo get_resource_path($home_collectionx["home_page_image"],false,"thm",false) ?>" width="<?php echo $home_collectionx["thumb_width"] ?>" height="<?php echo $home_collectionx["thumb_height"] ?>" /></div>
</div></div>
</div>
</div>
</div>
<?php
}
endif; # end hook homefeaturedcol
?>
function get_home_page_promoted_collectionsx($id=null)
{
$filterClause = '';
if(!is_null($id))
{
$filterClause = ' AND collection.ref = '.intval($id);
}
return sql_query("select collection.ref,collection.home_page_publish,collection.home_page_text,collection.home_page_image,resource.thumb_height,resource.thumb_width from collection left outer join resource on collection.home_page_image=resource.ref where collection.public=1 and collection.home_page_publish=1".$filterClause." order by collection.ref desc");
}
<img class="ImageBorder" src="<?php echo get_resource_path($home_collectionx["home_page_image"],false,"thm",false) ?>" width="<?php echo $home_collectionx["thumb_width"] ?>" height="<?php echo $home_collectionx["thumb_height"] ?>" />
Why not edit this to set your desired size in pixels, like
<img class="ImageBorder" src="<?php echo get_resource_path($home_collectionx["home_page_image"],false,"thm",false) ?>" width="1000" height="800" />
I'm working on a new webpage for my blog # http://bornsquishy.ca
I'm also trying to use a grid system by http://gridiculo.us/
The problem that I'm having is the div class "grid" is being closed off at the end of the header without a closing div tag, and I can't seem to figure out why this is happening.
Here is the code from the header.php after the closing head tag:
<body <?php body_class(); ?>>
<div id="main"><!-- this encompasses the entire Web site -->
<header id="header">
<div class="grid">
<div class="row">
<div class="c3">
<div class="logo">
<?php if(of_get_option('logo_type') == 'text_logo'){?>
<?php if( is_front_page() || is_home() || is_404() ) { ?>
<h1><?php bloginfo('name'); ?></h1>
<?php } else { ?>
<h2><?php bloginfo('name'); ?></h2>
<?php } ?>
<?php } else { ?>
<?php if(of_get_option('logo_url') != ''){ ?>
<img src="<?php echo of_get_option('logo_url', "" ); ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('description'); ?>">
<?php } else { ?>
<img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('description'); ?>">
<?php } ?>
<?php } ?>
</div><!-- .logo -->
</div><!-- .c3 -->
<div class="c8">
<nav class="primary">
<div class="menu-holder">
<div class="menu-left">
<div class="menu-right">
<?php wp_nav_menu( array(
'container' => 'ul',
'menu_class' => 'sf-menu',
'menu_id' => 'topnav',
'depth' => 0,
'theme_location' => 'header_menu'
));
?>
</div><!--.menu-right-->
</div><!--.menu-left-->
</div><!--.menu-holder-->
</nav><!--.primary-->
</div><!--.c8-->
<div class="c1 end">
<div id="rss-feed">
<img src="/images/rss-logo.png">
</div><!--.rss-feed-->
</div><!-- .c1 end-->
</div><!-- .row -->
<div class="row">
<div class="c8">
<div class="title">
<img src="/images/title.png">
</div><!--.title-->
</div><!--.c8-->
<div class="c4 end">
<div id="widget-header">
<?php if ( ! dynamic_sidebar( 'Header' ) ) : ?>
<!-- Widgetized Header -->
<?php endif ?>
</div><!--#widget-header-->
</div><!-- .c4 end -->
</div><!-- .row -->
<!--.grid left open-->
</header>
<!--#main left open-->
Let me know if more code/info is needed to answer this question.
Your comments say <!--.grid left open-->, does this mean you want to close the div.grid element after the closing </header>? If so, you can't do that because the div was opened inside the header, so it must be closed before the header is closed. HTML elements can't "overlap" each other.
If you're using Chrome developer tools or similar to inspect the markup, the browser will have seen the error and "fixed" your HTML structure in order to display it.
You either need to put the opening div before or after the header, or close the div before the end of the header.
First of all, my question may be unclear. I will try to explain it.
this is my html
<div class="left"><?php print $search_box; ?><?php if (!empty($logo)): ?><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" id="logo" width="243" height="62" /><?php endif; ?><?php if (!empty($site_name)): ?><div id='site-name'><strong><?php print $site_name; ?></strong></div><?php endif; ?><?php if (!empty($site_slogan)): ?><div id='site-slogan'><?php print $site_slogan; ?></div><?php endif; ?></div>
looks ugly and difficult to debug, right?
so i try to indent and add newline. However, it will fails on some browser, may be IE6. The result is changed. So, What should i go, should i use another doctype?
Currently, i am using
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
You can write it this way too:
<div class="left">
<?php print $search_box; ?>
<?php if (!empty($logo)) { ?>
<a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home">
<img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" id="logo" width="243" height="62" />
</a>
<?php } ?>
<?php if (!empty($site_name)) { ?>
<div id='site-name'>
<strong>
<?php print $site_name; ?>
</strong>
</div>
<?php } ?>
<?php if (!empty($site_slogan)) { ?>
<div id='site-slogan'><?php print $site_slogan; ?></div>
<?php } ?>
</div>
This should work in most cases, or you can use the php heredoc syntax to echo out the html stuff normally.