I'm using a custom theme and I need to find a way to make the title wrap to the second line. The theme has a carousel and the title is displayed below. At the moment, if the title is too long it has "..." after it. How can I stop this and make it wrap to the second line instead?
This is the code from the theme
<div class="home-carousel">
<ul>
<?php
$carimgheight = 120;
if ( get_option('storefront_carousel_img_height' )) {$carimgheight = get_option('storefront_carousel_img_height' ); }
$carimgwidth = 200;
if ( get_option('storefront_carousel_img_number' ) == 2 ) {$carimgwidth = 428;}
if ( get_option('storefront_carousel_img_number' ) == 3 ) {$carimgwidth = 276;}
if ( get_option('storefront_carousel_img_number' ) == 5 ) {$carimgwidth = 154;}
if ( get_option('storefront_carousel_img_number' ) == 6 ) {$carimgwidth = 124;}
//BEGIN Slider LOOP
$loopcarousel = new WP_Query( array( 'post_type' => 'carousel' ) );
while ( $loopcarousel->have_posts() ) : $loopcarousel->the_post();
$buttonlink = get_post_meta($post->ID, "link", true);
if(has_post_thumbnail()) {
$carthumb = get_post_thumbnail_id();
$carimage = vt_resize( $carthumb, '', $carimgwidth, $carimgheight, true );
}
?>
<li>
<img alt="<?php the_title(); ?>" title="<?php the_title(); ?>" src="<?php echo $carimage['url']; ?>" width="<?php echo $carimage['width']; ?>" height="<?php echo $carimage['height']; ?>" /><?php if ( get_option('storefront_carousel_image_only') == "false" ) { ?><p><span class="carousel-title"><?php echo the_title(); ?></span></p><?php } ?>
</li>
<?php endwhile; //END SLIDER LOOP ?>
</ul>
The ellipsis (...) could be added either client side or server side. Chances are pretty it is added using CSS text-overflow: ellipsis;. View the HTML source of the page (the output, not the template), if the full title text is present you can assume the ellipsis is added client side. If you see the ellipsis, you need to track down a custom filter in WordPress that has added it.
Presuming .carousel-title is the selector to which the style is applied, you can comment out or remove the text-overflow: ellipsis; rule altogether. There may be additional vendor prefixed properties which will need to be removed as well, eg. -o-text-overflow: ellipsis. There may also be a -moz-binding: property which is used to add ellipsis support for Firefox versions prior to 4, you can remove that as well.
Related
Here is the my code, which is not working.
global $post;
echo get_the_title( wp_get_post_parent_id( $post->post->ID ) );
but this is not working.
thank you in advance.
For parent page id
$post->post_parent;
For current page title
$post->post_title;
For parent page id
<?php
echo wp_get_post_parent_id(get_the_ID());
?>
In Gutenberg:
wp.data.select('core/editor').getEditedPostAttribute('parent')
Hope will be helpful to someone
If you want i.e: create a link to the post parent:
<a href="<?= get_permalink($post->post_parent) ?>">
<?= get_the_title($post->post_parent) ?>
</a>
→ <?= the_title() ?>
which will result in i.e:
Latest News → Some news title
For Astra theme and for page template look.php I did this:
$post->post_parent; will nbot work cause in my case function is out of the loop. I run it via functions.php. $post->post_parent works perfectly when inserting it in page template, but not when editing theme function ;)
function add_script_before_header() {
$current = $post->ID;
$parent = $post->post_parent;
$grandparent_get = get_post($parent);
$grandparent = $grandparent_get->post_parent;
if ($root_parent = get_the_title($grandparent) !== $root_parent = get_the_title($current)) {
echo get_the_title($grandparent);
}
$after = $parent;
if ( is_page_template( 'look.php' ) ) {
echo $after . ' - ';
}
}
Is it possible to target the next section inside the loop? so that it will scroll down to the next section area.
Here is my code:
<section id ="<?php echo $postid; ?>" class="subpage-wrapper fullscreen background parallax" style="background-image: url('<?php echo $image[0]; ?>')" data-img-width="1400" data-img-height="717" data-diff="100" data-oriz-pos="100%">
<a href="#<?php echo $postid; ?>" class="btn-scroll" data-scroll></a>
</section>
Remember that this is inside the WP_Query Loop
Thanks!
I'm not keeping any selections within your displaying of posts in mind, but I figure you can get 'round by using get_next_post(). Something like:
global $post;
$post = get_post($post_id);
$next = get_next_post();
$next_id = $next->id;
What about using your own counter?
$nextAnchorId = 0;
while ( have_posts() ) { //the loop
$nextAnchorId++; //make this actually be a reference to the *next* post
the_post();
if ($nextAnchorId < $post_count) //don't link to the next post if it's the last one
{
echo "<a href='#post-$nextAnchorId'>next post</a>";
}
}
I copy standard Recent Post widget to function.php, I unregister it and register my new class. In widget I see this function that is responsible for showing title of recent posts in A tag:
<?php while ( $r->have_posts() ) : $r->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>">
<?php if ( get_the_title() ) {
$t = the_title();
$t = substr($t, 0, 40); /// this doesn't work
}else{
the_ID();
}
?>
</a>
...
...
But this substr doesn't work - title is always display all. What I do wrong?
You can alsp use mb_substr(), It works almost the same way as substr but the difference is that you can add a new parameter to specify the encoding type, whether is UTF-8 or a different encoding.
Try this:
$t = mb_substr($t, 0, 40, 'UTF-8');
LATER EDIT: change
$t = the_title();
with
$t = get_the_title();
You are using the_title instead of get_the_title to give it to an specific variable. And be sure to echo $t after all of this.
this one should work
echo mb_strimwidth(get_the_title(), 0, 40, '...');
I am working on a portfolio website. Whenever a portfolio piece is clicked, the user is taken to a page that shows details about that piece (i.e. more photos and information). There will also be previous and next navigation links to get to additional pieces. However, I want the previous and next navigation links to be a thumbnail photo of the next piece (custom field for that is thumbnail_photo). This is what I have so far:
<?php
$previous_post = get_previous_post();
$next_post = get_next_post();
$prev_value = get_post_meta( $previous_post->ID, 'materials', $single = true);
$next_value = get_post_meta( $next_post->ID, 'thumbnail_photo', $single = true);
?>
<p><?php echo $prev_value; ?></p>
<p><?php echo $next_value; ?></p>
I used 'materials' in the call for $prev_value since 'materials' is another custom field. I just wanted to see if it was actually working. It outputs the materials just fine, but it only outputs the ID number of the thumbnail_photo. I can't get it to reference the file name so that I can output the actual image.
I am using the Advanced Custom Fields plugin, so each image is stored as an image object. So this is how I would typically output a thumbnail image:
<?php
$image = get_field('thumbnail_photo);
echo $image[sizes]["thumbnail"]; // thumbnail is a reference to wordpress' thumbnail media size
?>
When you configure the ACF input field, be sure you set the return value to be an image object instead of the image ID after change this, or if you already changed, you have to update the post or posts you're trying to get. Because, if you set the field return value as image ID, created the posts and now you wanna change their values you have to modify all the posts because every post_meta is containing the ID of the image.
In the ACF website has a tutorial how you could get the values an turn into images:
With the ID
<?php
wp_get_attachment_image( $next_value, 'thumbnail' );
?>
Another Example With the ID, but this time you have to create the image HTML, the function returns an array with the url, width and height
<?php
$image = wp_get_attachment_image_src( $next_value, 'thumbnail' );
// url = $image[0];
// width = $image[1];
// height = $image[2];
?>
<img src="<?php echo $image[0]; ?>" />
You could do a check for the returned value and then write the image, example:
<?php
if( is_int( $next_value ) ) {
wp_get_attachment_image( $next_value, 'thumbnail');
} elseif ( is_object( $next_value ) ) {
echo $next_value['sizes']['thumbnail'];
} else { ?>
<img src="<?php the_field('field_name'); ?>" alt="" />
<?php } ?>
I didn't test it, but I think it works fine.
I hope this help and sorry for the bad english
I'm outside the loop and want to call a custom value "featvideo" and display it. If there isn't "featvideo" then print an image...
The video displays, but when there isn't a video a blank box displays. You can see the the issue here: http://wgl.buildthesis.com
(and yes, $images is a function defined in functions.php and works)
<?php
$feat_catbox_1 = new WP_Query("cat=$tt_feat_id&showposts=$tt_feat_postcount");
while ($feat_catbox_1->have_posts()) : $feat_catbox_1->the_post();
$key = 'featvideo';
$video_url = get_post_custom_values($key);
$featuredvideo = $video_url[0];
?>
<div class="contentdiv">
<div id="featured-thumb">
<?php if ($key=="featvideo")
echo $featuredvideo;
elseif ($key=="")
echo $images('1', '390', '244', 'alignleft', true); ?>
</div>
</div>
Since you have set $key = 'featvideo' and then test if it is set later, it will always return true. You never change the value of $key anywhere in your code except when you set it.
I would suggest something like the following for your if statement:
<?php
if($featuredvideo)
echo $featuredvideo;
else
echo $images('1', '390', '244', 'alignleft', true);
?>