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');
Related
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 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().
am using Advanced Custom Fields for many things on my site. One thing in particular is for a staff profile page. I have a select field where the staff can add social icons or an email icon. The repeater field is 'social' and if they choose to 'add a row' there is 'social channel' select field and a 'social_link' test field. My current code is this:
<?php if ( have_rows('social')): ?>
<div class="staff-social">
<?php while ( have_rows('social')) : the_row() ?>
<li><img src="<?= get_template_directory_uri(); ?>/img/footer-<?php the_sub_field('social_channel') ?>.svg" alt="social icon" /></li>
<?php endwhile; ?>
</div><!--end staff-social-->
<?php endif; ?>
I need to prepend a 'mailto:' to my anchor tag if the user selects 'mail' from the 'social_channel' dropdown in the backend. I have tried doing:
<?php while ( have_rows('social')) : the_row() ?>
<li>
<?php $select = get_sub_field_object('social_channel');
$choices = $select['choices'];
foreach ($choices as $choice) {
if ($choice == 'mail') {
echo '<a href="mailto:'.the_sub_field('link').'">';
} else echo '<a href="'.the_sub_field('link').'">';
} ?>
<img src="<?= get_template_directory_uri(); ?>/img/footer-<?php the_sub_field('social_channel') ?>.svg" alt="social icon" />
</a>
</li>
<?php endwhile; ?>
But this of course spits something out for all choices, whether or not they are selected by the user in the backend. Can anyone help me with this? I think this is pretty basic PHP but I'm not sure how to do it. Any help will be much appreciated!
Your Select field should return just a single string, not an array, (make sure you set the 'social_channel' field to NOT allow multiple values) so change your code to this:
<?php while ( have_rows('social')) : the_row() ?>
<li>
<?php $select = get_sub_field('social_channel');
if($select == 'mail'){
$linkURL = 'mailto:'.get_sub_field('link');
}else{
$linkURL = get_sub_field('link');
} ?>
<img src="<?= get_template_directory_uri(); ?>/img/footer-<?php the_sub_field('social_channel') ?>.svg" alt="social icon" />
</li>
<?php endwhile; ?>
I'm trying to change the header logo on my site, depending on the page the person is on. I don't know PHP, but I've found where the Logo is defined in header.php, and am trying to rewrite it to be dynamic. When I use my code, the site breaks, so obviously I'm doing something wrong.
The original code is:
<!-- Logo -->
<?php
// Get the logo
if ($ti_option['site_logo'] != '') {
$site_logo = $ti_option['site_logo'];
}
else {
$site_logo = get_template_directory_uri() . '/images/logo.png';
}
?>
<a class="logo" href="<?php echo home_url('/'); ?>">
<img src="<?php echo $site_logo; ?>" alt="<?php bloginfo('name'); ?>
-
<?php bloginfo('description'); ?>" title="<?php bloginfo('name'); ?>
-
<?php bloginfo('description'); ?>" />
</a>
<!-- End Logo -->
What I'm trying to do is display a different logo based on which page the visitor is on. There are three:
- if the page is one of these: (1168, 1433, 1428), display /path/logo1.jpg
- if the page is one of these: (1369, 1361, 1365), display /path/logo2.jpg
- otherwise, just show /path/logo3.jpg
Here's what I've been able to manage so far:
<!-- Logo -->
<?php
// Get the logo
< ? php
if ($ti_option['site_logo'] != '') {
if (is_page(array(
1168,
1433,
1428
))) :
// '$site_logo' => 'FILELOCATION.jpg',
$site_logo = $ti_option['site_logo'];));
elseif (is_page(array(
1369,
1361,
1365
))):
$site_logo = $ti_option['site_logo'];));
else:
$site_logo = $ti_option['site_logo'];
endif;
?>
} else {
$site_logo = get_template_directory_uri() . '/images/logo.png';
}
?>
<a class="logo" href="<?php echo home_url('/'); ?>">
<img src="<?php echo $site_logo; ?>" alt="<?php bloginfo('name'); ?>
-
<?php bloginfo('description'); ?>" title="<?php bloginfo('name'); ?>
-
<?php bloginfo('description'); ?>" />
</a>
<!-- End Logo -->
I don't think I can nest PHP opening and closing tags, so there's that. But, I feel like I need to... my code doesn't work. Can anyone point me in direction of what to try?
I'm not 100% sure on wordpress standards, but here's a way to do it.
$logo1 = "logo1.jpg";
$logo2 = "logo2.jpg";
if ($ti_option['site_logo'] != '') {
if (is_page(array( 1168, 1433, 1428))){
$site_logo = $logo1;
}else if (is_page(array( 1369, 1361, 1365))){
$site_logo = $logo2;
}else{
$site_logo = $ti_option['site_logo'];
}
?>
} else {
I see 2 issues with your code :
1- No matter the outcome, you end up doing this : $site_logo = $ti_option['site_logo'];
In other words, you never actually change the logo.
2- Might be due to the fact you're using the dots if(cond): instead of if(cond){} which I'm not used to work with but imo it's much clearer when you have a good indentation.
error that is probably making your code crash :
$site_logo = $ti_option['site_logo'];));
should be
$site_logo = $ti_option['site_logo'];
Basically, I need for the image at the bottom of the page with no text wrapped around it to be in the place of test post 4 (it's going to be a Google Adsense block but I am using images as a placeholder for now). I'm not sure how to do this, right now the code is the following:
<div class="google_ad_post">
<?php if ($count == 3) { ?>
<br /><img src="****" alt="post ad">
<?php } ?>
<?php $count++; ?>
</div>
Yet, the image is still at the bottom of the page. How can I fix this?
Here is the image:
I can't post pictures just yet so the URL to the image is http://i.imgur.com/7rw5B.jpg
I have to see your code to help you better with the Scripting Part, but something logical like this should work:
<?php
$count = 0;
foreach( $posts as $post ) : ?>
<?php if ($count == 3) { ?>
<div class="google_ad_post">
<img src="****" alt="post ad">
</div>
<?php } else { ?>
<div class="post" id="post-<?php the_ID(); ?>><div class="content"><?php the_content(); ?></div>
<?php } ?>
<?php $count++; ?>
<?php endforeach; ?>