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;
}
Related
I'm trying to create a template based on the theme settings which call on the main-content class.
My template.php file is:
`<?php /** * Template Name: Post Half Width Column
* Template Post Type: post
*/ ?>
<?php
wp_enqueue_style( 'main-template', get_template_directory_uri() . '/css/half-width.css' );
get_header();
?>
<?php
get_header(); ?>
<div id="main-content" class="post-main-content">
<?php
while ( have_posts() ) : the_post();
get_template_part( 'content', 'page' );
endwhile;
?>
</div><!-- #main-content -->
<?php
get_footer();
?>`
The original theme template specified class="main-content" instead of class="post-main-content"
I could not find where the .main-content was in .css checking the standard places so I thought I could just create my own .css in the child theme that includes:
`#post-main-content {
padding: 28px 28px 10px;
width: 50%;
margin: 0 auto;
float: none;
}`
And then copy the rest from the themes style.css
What am I doing wrong here?
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>
When you open www.nomadicmatt.com on mobile devices the first image you see is his big bold background image. I am trying to replicate the same thing on my site www.rosstheexplorer.com. The header image looks too small on mobile devices hence why I am exploring having a background image.
To achieve this I was told the following
You must change your markup. Change your
<img class="custom-header">
to
<div class="custom-header">
and set container background property:
.custom-header {
background: url(path_to_image) no-repeat;
background-size: cover;
}
I was also told, you can set style on div like this
<div style="background: url(<?php header_image(); ?>); background-size: cover;">
I tried inserting the following code into additional CSS
<div style="background: url(<?php header_image(); ?>); background-size: cover;"> </div> And
.custom-header { background: url("rosstheexplorer.com/cover-photo-1/") no-repeat; background-size: cover; }
I got the error message
Markup is not allowed in CSS.
I tried each line individually and there was an issue with both lines
Where do you alter the markup? Or is there another solution?
I have now been told I may have to make the changes in the index.php file, this is the code for my index.php file
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'content', get_post_format() );
?>
<?php endwhile; ?>
<?php penscratch_paging_nav(); ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
If I understand correctly you have tried putting html code in css file. That is you inserted
<div style="background: url(<?php header_image(); ?>); background-size: cover;"> </div>
in your css file. This is not going to work. You need to change the markup in html file that might be generated using php so you actually might need to put this markup in index.php or something.
Your have given padding and margin that is creating issue. Please look into attached image
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>
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