I have the following code in my Wordpress site
HTML
<div class="test">
<?php if(has_category( 'update' ) || has_category( 'uncategorized' )) { ?>
<img alt="icn" src="<?php bloginfo('template_directory'); ?>/img/logo.png">
<?php } elseif(has_category( 'event' )) { ?>
<img alt="icn" src="<?php bloginfo('template_directory'); ?>/img/logo.png">
<?php } ?>
</div>
This puts an image in the place of the category name. (category name 'update' = logo.png)
My issue is that I want their sizes responsive since they are going to be put overtop a responsive height div. My idea is to turn them into the background image of the 'test' div. I can't seem to rewrite the img tag code to put them as background images of a div instead of just putting the image itself.
EDIT ex.
<?php if(has_category( 'update' ) || has_category( 'uncategorized' )) { ?>
<div style="background-image:url('...');">
...
Have you tried something like this:
<div class="test">
<?php if(has_category( 'update' ) || has_category( 'uncategorized' )) { ?>
<div class="bg-image" style="background-image:url('<?php bloginfo('template_directory'); ?>/img/logo.png');">
<?php } elseif(has_category( 'event' )) { ?>
<div class="bg-image" style="background-image:url('<?php bloginfo('template_directory'); ?>/img/logo.png');">
<?php } else { ?>
<div class="bg-image">
<?php } ?>
... Content in div, if necessary ...
</div>
</div>
Or, to make it a little cleaner:
<?php
$testStyle = "";
if(has_category( 'update' ) || has_category( 'uncategorized' )) {
$testStyle = "style=\"background-image:url('".get_bloginfo('template_directory')."/img/logo.png')\"";
} elseif(has_category( 'event' )) {
$testStyle = "style=\"background-image:url('".get_bloginfo('template_directory')."/img/logo.png')\"";
}
?>
<div class="test">
<div class="bg-image" <?php echo $testStyle; ?>></div>
</div>
<style type="text/css">
.bg-image {
width:100%;
min-width:300px;
height:100px;
background-size:cover;
}
</style>
Realize that if there is nothing inside of the .bg-image div, you'll need to add some CSS to make it "visible": a height and width at minimum.
Also, instead of get_bloginfo('template_directory'), consider using get_template_directory_uri().
Related
I need to link some gallery images to different external webistes. After some research I'm not able to found a solution that isn't using a plugin. Is this possible in wordpress without using plugins? I can't install plugins for this project so any suggestion will be appreciated thanks.
Here is my code:
$args = array(
'post_type' => 'post',
'name' => 'partners'
);
$logo_img = new WP_Query( $args );
?>
<div class="container-fluid" id="">
<div class="row" style="margin-top:1em;margin-bottom:1em;">
<?php if( $logo_img->have_posts() ): while( $logo_img->have_posts() ): $logo_img->the_post();
$logo_gallery = get_post_gallery_images( $post->ID );
if( $logo_gallery ): ?>
<div class="col-sm-12 col-md-12 col-lg-12 text-center">
<?php foreach($logo_gallery as $logo ): ?>
<img class="img-fluid" src="<?php echo $logo; ?>" alt="" width="60" id="partner-logo" style="margin:0 .5em 0 .5em;"/>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
</div>
</div>
Depending on how many images we are talking about, if these images are named you could use some logic to create a URL based on the name, if they are not named and there aren't that many, you could rename them.
Here's an example;
<?php
// If there is a matching string, set a specific URL
if (preg_match('/site1/',$logo)) { $set = "yes"; $link = "https://website1.com"; }
if (preg_match('/site2/',$logo)) { $set = "yes"; $link = "https://website2.com"; }
if (preg_match('/site3/',$logo)) { $set = "yes"; $link = "https://website3.com"; }
// If there is no matching string, set a default URL
if ($set !== "yes") { $link = "https://default.com"; }
// Now encase your image in a URL
echo "<a href='$link'>
<img class='img-fluid' src='$logo' alt='' width='60' id='partner-logo' style='margin:0 .5em 0 .5em;'/>
</a>";
?>
By the way, id='partner-logo' - the id should be unique.
I currently have a carousel on my page inside a Wordpress loop. So as it loops through it changes the background image according to which post I am currently on in the loop. However, I want to use media queries to load smaller images if for instance I the screen size is smaller.
This is what I currently have:
while( $loop->have_posts() ) : $loop->the_post();
$class = '';
// Custom Posts
$carousel_image_1 = get_field('carousel_image_1');
$image_1_title = get_field('image_1_title');
if( $slide_counter == 0 ) { $class .= ' active'; }
?>
<div class="item <?php echo $class ?> <?php echo "slide_" . $slide_counter ?>">
<!-- Set the first background image using inline CSS below. -->
<a href="<?php echo get_post_permalink(); ?>" target="_blank">
<div class="fill" style="background-image:url(<?php echo $carousel_image_1['url']; ?>); background-size:cover;" alt="<?php echo $carousel_image_1['alt']; ?>"> </div>
<div class="carousel-caption">
<h2><?php echo $image_1_title; ?></h2>
<img width="80" class="book" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/book.png" alt="">
</div>
</a>
</div>
<?php $slide_counter++; ?>
<?php endwhile; wp_reset_query(); ?>
You can't use media queries inline, and you won't be able to have the dynamic flexibility of your variables in CSS, because PHP is server-side.
But, you could do this with JavaScript as long as the JS is able to get the PHP variables (my example uses jQuery):
<?php
while( $loop->have_posts() ) : $loop->the_post();
$class = '';
// Custom Posts
$carousel_image_1 = get_field('carousel_image_1');
$carousel_image_2 = get_field('carousel_image_2'); // added this, for different size image
$image_1_title = get_field('image_1_title');
if( $slide_counter == 0 ) { $class .= ' active'; }
?>
<div class="item <?php echo $class ?> <?php echo "slide_" . $slide_counter ?>">
<a href="<?php echo get_post_permalink(); ?>" target="_blank">
<div class="fill" style="background-size:cover;" alt="<?php echo $carousel_image_1['alt']; ?>"> </div>
<div class="carousel-caption">
<h2><?php echo $image_1_title; ?></h2>
<img width="80" class="book" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/book.png" alt="">
</div>
</a>
</div>
<script>
var resizeTimer;
function resizer() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
var windowWidth = $(window).width();
if (windowWidth >= 992) { // for width 992 pixels and up
$('.fill').css({
'background-image': 'url(<?php echo $carousel_image_1["url"]; ?>)';
});
} else { // smaller sizes
$('.fill').css({
'background-image': 'url(<?php echo $carousel_image_2["url"]; ?>)';
});
}
}, 200);
}
resizer();
$(window).on('resize', resizer);
</script>
<?php $slide_counter++; ?>
<?php endwhile; wp_reset_query(); ?>
I haven't tested it but I think it should work. You can also adjust the timeout to your preference (right now it's 200ms).
Or if you wanted to not make it truly responsive, and just set the background on page load, you could just write:
<script>
if (windowWidth >= 992) { // for medium size width and up
$('.fill').css({
'background-image': 'url(<?php echo $carousel_image_1["url"]; ?>)';
});
} else { // smaller sizes
$('.fill').css({
'background-image': 'url(<?php echo $carousel_image_2["url"]; ?>)';
});
}
</script>
The following Html CSS will show image in mobile view only
Html:
foreach($data as $item):
echo "
<div class='col-lg-4'>
<div class='panel panel-primary backImg' style='background-image:url({$item['imageLink']}); background-size:100% 100%;'>
Some Text
</div>
</div>";
endforeach;
Css:
#media(min-width: 480px){
.backImg{
background-image:none !important;
}
}
I am trying to retrieve data through my template in wordpress using get_post_meta() function. This works fine if I put the code above the div which is using a javascript, but it doesnt work if I put this function after the java script.
My php template file is as follows.
Here is the div using the javascript file ( lets call it div 1)`
<div style="width: 100%;margin: 0 auto; clear: both; ">
<div style="width: 800px">
<ul class='tabs'>
<?php $the_query = new WP_Query( 'showposts=3' ); ?>
<?php
$i=1;
while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<li><a href='#tab<?php echo $i; ?>'><?php the_title(); ?></a></li>
<?php $i++; endwhile;?>
</ul>
</div>
<div class="clear"></div>
<div style="background:#d0d8e0; position:relative; width: 96%; margin: -1% 4% 4% 2%; padding: 40px 0 20px 0; ">
<?php $the_query = new WP_Query( 'showposts=3' ); ?>
<?php
$i=1;
while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<div id='tab<?php echo $i; ?>'>
<div class="tab" >
<h4><?php the_title(); ?></h4>
<?php the_content(); ?>
</div>
</div>
<?php $i++; endwhile;?>
</div>
<div class="clear"></div>
`</div></div>
And the code I am putting after this div to retrieve values from data base is( lets call it div 2)
<div class="group group-custom" >
<?php $url = get_post_meta($post->ID,'wpcf-youtube-url', true); ?>
<div style="float: left">
<iframe type="text/html" width="480" height="315" <?php echo wp_oembed_get( 'http://www.youtube.com/watch?v=' . $url ); ?></iframe>
</div>
<div class="video-area">
<h2><?php echo "" .get_post_meta($post->ID,'wpcf-video-line',TRUE)?></h2>
<br/>
<p><?php echo "" .get_post_meta($post->ID,'wpcf-video-text',TRUE)?></p>
<a class="button" href=""></a></div></div>
If I put the div 2 after div 1 in my php template, it doesn't work but if I switch the divs, it works normally. Here is my javascript file ( which I dont see a problem)
<script language="JavaScript">
$(function() {
$('ul.tabs').each(function(){
// For each set of tabs, we want to keep track of
// which tab is active and it's associated content
var $active, $content, $links = $(this).find('a');
// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active.attr('href'));
// Hide the remaining content
$links.not($active).each(function () {
$($(this).attr('href')).hide();
});
// Bind the click event handler
$(this).on('click', 'a', function(e){
// Make the old tab inactive.
$active.removeClass('active');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $($(this).attr('href'));
// Make the tab active.
$active.addClass('active');
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});
});
});
The live version of this work is http://cmi.pixstreammedia.com.s177734.gridserver.com/
I found the problem. I have to use <?php wp_reset_query() ?> after the new wp_query function is over to restores the $wp_query and global post data to the original main query.
http://codex.wordpress.org/Function_Reference/wp_reset_query
Live site.
My site is set up so that an image or gallery is displayed over a wooden background(#above), with the rest of the content below on a linen background(#below). This works well on every page but the portfolio page- the wooden space has no content until a specific gallery is selected.
Is there a way to have the linen background & content(#below) show instead of the plain wooden background(#above), until the gallery has been selected? (And if so, is it possible to have it appear to be sliding down from the top of the screen?)
header.php
<body>
<div class="above">
<div id="header">
<div class="logo">
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Urban Palate logo" id="logo" />
</div><!-- end logo -->
<nav>
<ul>
<li><img src="<?php echo get_template_directory_uri(); ?>/img/about.png" alt="Urban Palate intro" /></li>
<li><img src="<?php echo get_template_directory_uri(); ?>/img/portfolio.png" alt="Urban Palate portfolio" /></li>
<li><img src="<?php echo get_template_directory_uri(); ?>/img/blog.png" alt="Urban Palate blog" /></li>
<li><img src="<?php echo get_template_directory_uri(); ?>/img/contact.png" alt="Urban Palate contact" /></li>
</ul>
</nav>
</div><!-- end header -->
portfolio.php
<?php
/*
Template Name: Portfolio
*/
?>
<?php get_header(); ?>
<div class="gallery">
<?php
if( is_page( 24 ) ) {
// make your stuff here
echo do_shortcode('[rev_slider slider1]');
} else {
// output standard content here
}
?>
<?php
if( is_page( 26 ) ) {
// make your stuff here
echo do_shortcode('[rev_slider slider2]');
} else {
// output standard content here
}
?>
<?php
if( is_page( 28 ) ) {
// make your stuff here
echo do_shortcode('[rev_slider slider3]');
} else {
// output standard content here
}
?>
<?php
if( is_page( 30 ) ) {
// make your stuff here
echo do_shortcode('[rev_slider slider4]');
} else {
// output standard content here
}
?>
<?php
if( is_page( 32 ) ) {
// make your stuff here
echo do_shortcode('[rev_slider slider5]');
} else {
// output standard content here
}
?>
<?php
if( is_page( 34 ) ) {
// make your stuff here
echo do_shortcode('[rev_slider slider6]');
} else {
// output standard content here
}
?>
<?php
if( is_page( 36 ) ) {
// make your stuff here
echo do_shortcode('[rev_slider slider7]');
} else {
// output standard content here
}
?>
<?php
if( is_page( 42 ) ) {
// make your stuff here
echo do_shortcode('[rev_slider slider8]');
} else {
// output standard content here
}
?>
</div><!-- end gallery -->
</div><!-- end above -->
<div class="below">
<div class="blurb">
<img src="<?php echo get_template_directory_uri(); ?>/img/portfolio_blurb.png" alt="see who has experienced our fabulous + creative and beautiful + cutting edge decor firsthand" />
</div><!-- end blurb -->
<div id="client-list">
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>
</div><!-- end client-list -->
<?php get_footer(); ?>
There are a lot of improvements that could be made to the code above. Investigate the switch statement, or at least ditch all the else blocks. Anyway,
In your header.php, try
<body>
<div class="above <?php if (is_page(1)) echo 'short'; ?>">
<div id="header">
<div class="logo">
// etc...
You will need to change the is_page(1) part to have the correct page number. I don't know how you figure this out with WordPress, but if you can do it for each gallery, you can do it for the empty portfolio page.
Then, in your site css:
.above.short {
height: 200px;
}
My solution is ugly, but it will fit in with the rest of the PHP you've got there. If you paid developers for that work, get new developers.
Somebody who knows WP may be able to tell you how to give div.above an additional class without resorting to inline code like I've done. This would be a better solution.
You can do this with jQuery.
For example:
// check if the gallery is empty and hide if it is.
if ($('.above .gallery').contents().length == 0){
$('.above').hide();
}
or use css instead of .hide and display:none or set the height to 0.
$('.above').css('height', '0');
My homepage has a vertical slider that displays the titles of 5 posts at the top of my homepage. Each post that displays has a background image that is shown behind it. It is currently working well, although I would to display a different background image behind each post display. I have no clue as to how to do this using PHP code. I have posted the code below that shows the file that contains the JCarousel functionality. I'm guessing I need to setup some type of condition that allows a new background image to display with each 'list' item?
Here's the code:
<div id="home-gallery-wrapper">
<ul id="home-gallery" class="jcarousel-skin-home clearfix">
<?php
global $post;
if ( get_option('minimax_hl_show') == '1' ) {
$my_query = get_pages('include='.get_option('minimax_hl_ID').'');
} else {
$my_query = get_posts('include='.get_option('minimax_hl_ID').'');
}
foreach($my_query as $post) :
setup_postdata($post);
?>
<li style="width:910px"><div style="
background:url('<?php bloginfo('template_directory'); ?>/images/banner3.png')
center top no-repeat;">
<table align="center" style="width:910px;
height:200px">
<tr>
<td style="vertical-align:top">
<div style="width:90%; display:block; margin-left:auto; margin-right:auto">
<h2 style="text-align:center; border:none; text-decoration:none; font-family:calligraffiti;
margin-top:15px; font-size:1.8em; line-height:35px; color:#fff; position:relative; z-index:10">
<a style="color:#fff; border:none; text-decoration:none"
title="Permanent Link to <?php the_title(); ?>" href="<?php the_permalink(); ?>"
rel="bookmark"><?php the_title(); ?></a></h2>
</div>
</td></tr>
</table></div>
<?php
$key="show-video";
if ( get_post_meta($post->ID, $key, true) != '' ) {
?>
<div class="video"><?php echo get_post_meta($post->ID, $key, true); ?></div>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("embed").attr("wmode", "transparent");
});
</script>
<?php
} else if ( has_post_thumbnail() ) {
?>
<a title="Permanent Link to <?php the_title(); ?>"
href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a>
<?php } ?>
</li>
<?php
endforeach;
?>
</ul>
</div><!-- end home-gallery-wrapper -->
<script type="text/javascript">
function mycarousel_initCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
jQuery(document).ready(function() {
jQuery('#home-gallery').jcarousel({
vertical: true,
scroll: 1,
easing: 'easeInOutBack',
auto: 2,
wrap: 'last',
initCallback: mycarousel_initCallback,
animation: 800
});
});
</script>
Create 5 different banners with the colours of your choice and call them banner1.png, banner2.png, banner3.png etc.
Then replace
foreach($my_query as $post) :
setup_postdata($post);
?>
<li style="width:910px"><div style="
background:url('<?php bloginfo('template_directory'); ?>/images/banner3.png')
center top no-repeat;">
With this
$i = 0;
foreach($my_query as $post) :
setup_postdata($post);
?>
<li style="width:910px"><div style="
background:url('<?php bloginfo('template_directory'); ?>/images/banner<?php $i++; ?>.png')
center top no-repeat;">