I am using Advanced Custom Fields to display a background image in my header. Now I want to display a default image if there is no ACF-image defined. I tried this code, but it didn't work (image only shows if it is set):
<?php wp_head(); ?>
<?php if(get_field('header')) {
$image = get_field('header');
} else {
$image = '<img src="#absolute-path-to-my-image">';
}
?>
<style type="text/css">
#inner-header{
background-image: url('<?php echo $image['url']; ?>');
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
</style>
thanks for any help.
I'd change things up a bit. You're experiencing problems because you're passing an image element in if there's no 'header' present (you should only be passing the src):
<?php
// Get the field
$image = get_field('header');
// Does the field exist ? src : default
$image_src = $image ? $image['url'] : 'http://example.com/default/src.jpg';
?>
<style>
#inner-header {
background: url(<?php echo $image_src; ?>) center / cover no-repeat;
}
</style>
Related
I am trying to replace the text on my WordPress site page titles with an image. I am working locally with a child theme. I need to also be able to target each page separately as the images will be different.
It currently looks like:
I want to design some custom titles in Photoshop and save them as Jpg/Png and then replace the text.
I think i have identified the right part of the CSS
.hestia-title{
}
I have tried
.hestia-title{
font-size: 0px;
background-image:url(assets/img/quick_test.jpg);
}
This makes it look like this:
Could anyone point me in the right direction with this please? Thanks
I have now been able to get it looking like this:
Using this code:
.page-id-88 .page-header .hestia-title{
color:transparent;
background-image: url(assets/img/title_mock.png);
}
.page-header.header-small .hestia-title{
background-size:contain;
background-repeat: no-repeat;
}
.home .hestia-title{
display:none;
}
This is the page.php content
<?php
/**
* The template for displaying all single posts and attachments.
*
* #package Hestia
* #since Hestia 1.0
*/
get_header();
do_action( 'hestia_before_single_page_wrapper' );
?>
<div class="<?php echo hestia_layout(); ?>">
<?php
$class_to_add = '';
if ( class_exists( 'WooCommerce' ) && ! is_cart() ) {
$class_to_add = 'blog-post-wrapper';
}
?>
<div class="blog-post <?php esc_attr( $class_to_add ); ?>">
<div class="container">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', 'page' );
endwhile;
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</div>
</div>
<?php get_footer(); ?>
You can go to the page.php file of your active child theme find out <? the_title(); ?> function. You can commnet this code then page title will not come.
For the image, you can use the featured image, set featured image on each page. Now you can use this code to display image
if (has_post_thumbnail()) {
the_post_thumbnail('full'); // just the image
}
To hide page title from CSS use this code
.page h1.hestia-title {
font-size: 0;
}
I combined a slider with the repeater fields.
under the repeater I have 2 subfields. one called “image” and the other “title”
this slider has a class called “selected-item” that dynamically appear when an image is selected. (when this class is on an image the image change it’s size).
How can I define that when the class “selected-item” is on some image also the “title” form the same row of the image will appear?
this is the code the displays the images:
<?php
// check if the repeater field has rows of data
$i = 1;
if( have_rows('carousel_images') ):
// loop through the rows use_cases_fields data
while ( have_rows('carousel_images') ) : the_row();
$title=get_sub_field('image_carousel_discription');
$image = get_sub_field('image_carousel1');
if( !empty($image) ):
// vars
// thumbnail
$thumb = $image;
$i++;
?>
<h1 data-row="< echo $i; >"> <?php echo $title ?> </h1>
<li> <img data-row="< echo $i; >" src="<?php echo $thumb ?>"/> </li>
<?php endif; ?>
<?php
endwhile;
endif;
?>
?>
Keep the title hidden in the beginning and then show the title when selected-item class is applied. If h1 is going to be always next to the image tag then use the + selector.
h1 { display: none; }
.selected-item + h1 { display: block; }
Or you can detect a class change event using jquery.
function checkForChanges()
{
if ($('img').hasClass('selected-item'))
$('h1').css('display','block');
else
setTimeout(checkForChanges, 500);
}
checkForChanges();
$("#click").on('click', function(){
$('img').addClass("selected-item");
});
h1 { display: none; } /* Keep the title hidden in the beginning */
/* Show the title when selected-item class is applied */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://via.placeholder.com/100x100" width="100" height="100">
<h1>title</h1>
<div id="click">click me</div>
I am building an ecommerce site using this theme http://goo.gl/3BwG7R
I have changed the header to black and and have a light logo. When viewed on mobile and tablet I need the header to be white (native) and the logo to be dark.
I have failed to utilize the media queries to make this happen.
The theme has 2 header files, the main file calls the other files to display stuff.
*** MAIN HEADER ------------------
<div id="logo" class="positionleft"><?php if_logo(); // print the logo html ?></div>
--------------------------------------------
*** SECOND HEADER (called header-functions) -----------------
// print the logo html
if(!function_exists("if_logo")){
function if_logo(){
$logotype = if_get_option( THE_SHORTNAME . '_logo_type');
$logoimage = if_get_option( THE_SHORTNAME . '_logo_image');
$sitename = if_get_option( THE_SHORTNAME . '_site_name');
$tagline = if_get_option( THE_SHORTNAME . '_tagline');
if($sitename=="") $sitename = get_bloginfo('name');
if($tagline=="") $tagline = get_bloginfo('description');
if($logoimage == "") $logoimage = get_stylesheet_directory_uri() . "/images/logo.png";
?>
<?php if($logotype == 'textlogo'){ ?>
<h1><?php echo $sitename; ?></h1><span class="desc"><?php echo $tagline; ?></span>
<?php } else { ?>
<div id="logoimg">
<a href="<?php echo home_url( '/' ) ; ?>" title="<?php echo $sitename; ?>" >
<img src="<?php echo $logoimage ; ?>" alt="<?php echo $sitename; ?>" />
</a>
</div>
<?php } ?>
<?php
}
}
*** MAIN CSS --------------------------
#logo{margin-right:7px;padding:14px 10px ;}
#logo img{height:43px;}
#logo h1{margin-bottom:0px; letter-spacing:-1px;}
/* Menu */
#navigation{text-align:left;}
#topnav{
margin:0;
padding:0px 0 0 0px;
list-style-type:none;
overflow:visible;
position:relative;
float:right;
}
*** LAYOUT CSS ---------------------
#logo{text-align:center;margin:0px;}
#logoimg img{text-align:center;margin:0px auto; max-width:100%;}
Here is a quick mark up of what it would look like to use media queries with img rather than using a background image. I used divs instead of images, but it's the same concept. If you minimize the browser you will see the text change.
Use logo as a background with media query.
#media (min-width:769px){
#logo{
background-image: url(link/to/main/logo.png);
}
}
#media (max-width:768px){
#logo{
background-image: url(link/to/tablet/logo.png);
}
}
#media (max-width:480px){
#logo{
background-image: url(link/to/mobile/logo.png);
}
}
I have this function, it is supposed to handle icons for CPT in wordpress , but Somehow it is not working ..
add_action('admin_head', 'fbdf_cpt_icons_add');
function fbdf_cpt_icons_add() {
?>
<style>
<?php if (($_GET['post_type'] == 'my_cpt') || ($post_type == 'my_cpt')) : ?>
#icon-edit { background:transparent url('<?php echo plugin_dir_url(__FILE__) .'/img/cpt.32.png';?>') no-repeat; }
<?php endif; ?>
</style>
<?php }
Any ideas why ?
yes, I have an idea..
you need to make $post type global..
Add global $post_type; to the beginning of your function like so ..
add_action('admin_head', 'fbdf_cpt_icons_add');
function fbdf_cpt_icons_add() {
global $post_type; // here
?>
<style>
<?php if (($_GET['post_type'] == 'my_cpt') || ($post_type == 'my_cpt')) : ?>
#icon-edit { background:transparent url('<?php echo plugin_dir_url(__FILE__) .'/img/cpt.32.png';?>') no-repeat; }
<?php endif; ?>
</style>
<?php }
I'm using a lightbox plugin the uses rel="lightbox" to fire the lightbox in a gallery I'm creating using the Advanced Custom Fields pluin. All works great until I want to add a child div that is absolutely positioned in the box div. It's supposed to change opacity on hover and still have the lightbox fire.
My markup
<?php if(get_field('image')):
$attachment_id = get_field('image');
$size = "full";
$image = wp_get_attachment_image_src( $attachment_id, $size );
$alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
$image_title = $attachment->post_title;
$caption = $attachment->post_excerpt;
?>
<?php echo wp_get_attachment_image( $attachment_id, medium); ?>
<div class="hover-title">
<?php the_field('hover_title');?>
</div><!-- hover title -->
<?php endif; ?>
</div><!-- box -->
If I simply remove the "hover-title" lightbox works. But I want to use that :)
my css:
.box a {
margin:5px;
float:left;
position: relative;
overflow: hidden;
opacity: 1;
display: block;
}
is that the full code. if so then you are missing an opening <div>.
fyi your first two lines should read
$attachment_id = get_field('image');
if ( $attachment_id ) {
}
no need to call get_field() twice, it is a database call after all.
Good Luck