I have the following ACF-Block (Akkordeon).
<?php
...
$anchor = '';
if (!empty($block['anchor'])) {
$anchor = 'id="' . esc_attr($block['anchor']) . '" ';
}
$class_name = 'accordion-block';
if (!empty($block['className'])) {
$class_name .= ' ' . $block['className'];
}
?>
<div class="<?php echo esc_attr($class_name); ?>">
<h3 <?php echo $anchor; ?> class="accordion-element accordion">
<?php the_field('accordion-title'); ?>
</h3>
<div class="accordion-panel">
<InnerBlocks />
</div>
</div>
I use the InnerBlocks element within the content area of the accordion, there I can insert any Gutenberg block. If I insert a Gutenberg heading within this area, it is displayed in the structure, but not the h3 from the accordion title.
I want to add the h3 (accordion title) to the Gutenberg Detail Site-Structure. (picture)
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'm trying to hide the parent element in Wordpress if the child has no tags.
Тhis is the code:
<div id="tags">
<h4 class="tag-title">Tags</h4>
<?php the_tags( '', ' ', '<br />' ); ?>
</div>
I want to hide all div #tags if php string is empty.
You can use the function has_tag() to check if there is a tags.
<?php if(has_tag()) { ?>
<div id="tags">
<h4 class="tag-title">Tags</h4>
<?php the_tags( '', ' ', '<br />' ); ?>
</div>
<?php } ?>
If you use html elements as the $before, $sep, and $after parameters for the_tags, you can hide #tags when there's only one child (the ).
Looking at this post: Selector for when only one child exists in parent I came up with the below example.
<style>
.tags h4:nth-child(1):last-child{
display: none;
}
</style>
<div class='tags' id='tags1'>
<h4>Some nonsense</h4>
</div>
<div class='tags' id='tags2'>
<h4>Some nonsense</h4>
<ul><li>Some</li><li>other</li></ul>
</div>
I'm using the Sparkling theme on a Wordpress site. The theme uses Flexslider within a div at the top of the page. Each slide contains an image along with a div containing a post title and excerpt.
The slider is built within header.php like in this function:
function sparkling_featured_slider() {
if ( is_front_page() && of_get_option( 'sparkling_slider_checkbox' ) == 1 ) {
echo '<div class="flexslider">';
echo '<ul class="slides">';
$count = of_get_option( 'sparkling_slide_number' );
$slidecat =of_get_option( 'sparkling_slide_categories' );
$query = new WP_Query( array( 'cat' =>$slidecat,'posts_per_page' =>$count ) );
if ($query->have_posts()) :
while ($query->have_posts()) : $query->the_post();
echo '<li>';
if ( (function_exists( 'has_post_thumbnail' )) && ( has_post_thumbnail() ) ) :
echo get_the_post_thumbnail();
endif;
echo '<div class="flex-caption">';
if ( get_the_title() != '' ) echo '<h2 class="entry-title">'. get_the_title().'</h2>';
if ( get_the_excerpt() != '' ) echo '<div class="excerpt">' . get_the_excerpt() .'</div>';
echo '</div>';
echo '</li>';
endwhile;
endif;
echo '</ul>';
echo ' </div>';
}
}
endif;
And the resulting HTML looks like this:
<div class="top-section">
<div class="flexslider">
<ul class="slides">
<li>
<img width="1920" height="512" src="http://pathtoslider.jpeg"
class="attachment-post-thumbnail size-post-thumbnail wp-post-image"
alt="slide1"
srcset="pathstodifferentresolutions.jpg"
sizes="(max-width: 1920px) 100vw, 1920px" />
<div class="flex-caption">
<h2 class="entry-title">Tomatoes</h2>
<div class="excerpt">Knowledge is knowing that tomatoes are a fruit. Wisdom is knowing not to put them in a fruit salad.</div>
</div>
</li>
..more slides..
</ul>
</div>
</div>
<div class="container main-content-area">
By default it suppresses the flex-caption on small screens by setting display:none in a media query, but I want to display it, so I set the display to inline in my own media query.
This leads to another problem because the whole top-section div is the height of the image and there isn't necessarily room for the flex-caption.
I would like the bottom of the entry-title to be aligned with the bottom of the image, and the excerpt immediately below the image, which I accomplish like this:
#media (max-width: 768px) {
.flex-caption {
display: inline;
bottom: 0;
}
.entry-title {
position: absolute;
bottom: 0;
}
.excerpt {
position: absolute;
vertical-align: top;
}
}
but this doesn't resize the top-section div, so I'm overwriting the main-content-area.
I've tried lots of different things, including trying height:auto just about everywhere.
I can't figure out how the slider height is set. It seems to be within get_the_post_thumbnail. Is that the issue?
You can try setting image height in functions.php
function the_post_thumbnail( $size = 'post-thumbnail', $attr = '' ).
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