My website is built on WordPress and using the theme Divi. I am writing a new post and using the Divi image module to add images. In the editor the image shows up fine, however when the post is previewed or published, the image doesn't show up. Upon inspection, the URL for the image has a <br /> in it which is breaking the link to the image.
Any idea why this is happening? Thanks in advance.
Are you putting your image directly with the text editor or a you writing your text separatly ? With divi's page builder you can add an image to a block or widget, and write the text inside separatly.
I also have the same issue - Divi image module - generates a wrong path of image src.
I also have no solution, but I built a work around until the cause is found and have concrete solution.
function change_url_the_content($content){
$content = preg_replace("/br\%20\//", "", $content );
return $content;
}
add_filter("the_content", 'change_url_the_content', 9999999);
Related
I am working in Wordpress, and I am using Elementor. Elementor has a native feature for the title of the posts and images to link to the post.
But if I add an excerpt text, it doesn't link to the post. It is not clickable. The read more button does, but not the excerpt of the post.
I am trying to create something like this: greatist.com Every post on their website is clickable - the excerpt, the title, and the image.
My excerpts are really short like on that website, and I would really like them to be clickable. I have absolutely no idea how to do this and I'm beginning to think it's not possible. I am using Hello Elementor theme.
I would deeply appreciate anyone's help. I just registered to ask this question.
You can always try to save text as an photo and make it clickable or make a full section clickable.To do this try to use plugin called "Make Column Clickable Elementor".
Add this code to your website:
const postExcerpts = document.querySelectorAll('.elementor-posts .elementor-post .elementor-post__excerpt');
postExcerpts.forEach(postExcerpt => {
const postUrl = postExcerpt.parentNode.querySelector('.elementor-post__title a').href;
postExcerpt.addEventListener('click', () => {
window.location.href = postUrl;
});
});
This can be added using a script tag. Choose from the following options:
Add this code as a script tag in your functions.php file, to be rendered at the end of the page (wp_footer action hook).
If you have Elementor Pro, use its built-in Custom Code feature to add the code in a script tag to the end of the body tag.
It's recommended to add a pointer cursor so the user will know the excerpt is a link. This can be achieved by adding the following CSS to your style.css file.
.elementor-posts .elementor-post .elementor-post__excerpt {
cursor: pointer;
}
I'm really new in coding, especially in css. I already read some tutorials but I like to change a specific thing. For my Website I use Wordpress. I also edited a few things in my CSS which already worked. Now I can't find a answer for how I can replace the title with a custom picture.
Click here to watch a picture to understand what I mean.
Click here to acess my website.
I already tried some things, but it would be nice if someone can explain me how to do it.
You can edit header.php in the twenty seventeen to display only a picture.
This source code is on your wordpress server in wp-content/themes/twenty-seventeen/header.php: https://github.com/WordPress/twentyseventeen/blob/master/header.php
You'll want to replace line 31:
<?php get_template_part( 'components/header/header', 'image' ); ?>
With something like
<img src="banner.png" />
You'll have to adjust the location of banner.png to where you actually upload the image.
After you've got that working and it's basically what you want, you can wrap the image tag in a a tag so the banner links back to your home page, if you'd like.
I write a post in new post editor and then add media. I can see the images in the editor but when i publish them they aren't loading up and a frame with little square in the middle comes up. This is the link to one of my posts: http://getprogramcode.com/2013/03/c-program-for-bit-stuffing/ . For some people only link to the image comes up and it opens up with 404 error. See the line after OUTPUT: bit stuffing.
Also i want to remove the featured image from appearing in my posts. I have a option in my theme on a new post: "disable featured image" - but that doesnt work . Also if i dont put the image or i remove the featured image the empty image appears: see the home page: http://getprogramcode.com Please help me to solve this problem
You should not use relative paths on WordPress, only Absolute paths.
The problem is that you are using ../wp-content/... as your URL's for image paths.
When adding images, you should have the option to give it a path, you should opt to link to the media file.
For the disable feature image, if you go into the page.php or single.php code, it should have a line of code in it for calling in the featured image.
It should look something like this:
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
You just need to remove or comment out this code and it should stop showing up on the pages.
I have created a plugin with short code now when I access the plugin through short code it works fine issue is that when I put some text above the short code that text goes below the plugin when i view the page.
Here is code that I put into wordpress editor:
<p>Unlock your device safely in 3 steps</p>
[CUSTOMSLIDER]
you can see the plugin shortcode is on second row but static text is on first row but when I will view the page the text goes below the plugin. here you can see its view. you can see the slider is at top and the text is below slider though these were opposite in original source.
in your custom plugin, instead of:
echo "content";
change that to:
$variable .= "content";
return $variable
from:
http://wordpress.org/support/topic/shortcode-moving-to-top-of-entry-content
Quick question about WordPress. I've been Googling all over the place and cannot find an answer.
Basically I'm looking to replicate what happens when you add a gallery: have an image displayed as a stand in for the gallery shortcode [gallery]. The shortcode's visible when you go to edit HTML.
I'd like to exactly copy this effect: When a shortcode inserted into the editor I'd like for to to be rendered as an image.
Things I've Tried:
Inserting an element (image, div, I found an input is pretty unfuckwithable, etc) that's wrapped by a shortcode (This works ok, not great. The short code's still visible and WP will auto add paragraphs to the element to create space that users could, possibly, add content that'll be eaten by the short code) -
Inerting the short code as a < !-- --> comment (This also doesn't work great, WP will occassionally eat it moving between Visual/HTML. The comments ALSO eat your content < !-- [shortcode]--> placeholder < !--[/shortcode] --> = < !-- rendered shortcode -->)
That's the extent that I've thought of things. I cannot find a guide on how to do mimic the [gallery]'s behavior and can't find it by going through wp-admin's guts.
Thanks!
Alright, found the answer thanks to Dan's hint. Here's how to do it:
First (as Dan suggested) take a look at how they add the Gallery plugin to Tiny MCE. There's actually an uncompressed js file that will give you the overview you need, find it in:
/wp-includes/js/tinymce/plugins/wpgallery/editor_plugin.dev.js
This goes over the basics on adding this type of plugin to TinyMCE (more info here). To get WP to load the .js file with your TinyMCE plugin, see this helpful guide.
Basically here's the code:
if ( get_user_option('rich_editing') == 'true') {
add_filter("mce_external_plugins", "add_jolokia_tinymce_plugin");
//Applying the filter if you're using the rich text editor
}
function add_jolokia_tinymce_plugin($plugin_array) {
$plugin_array['example'] = '/path/to/example.js';
return $plugin_array;
}
Add this to a plugin or function.php in a theme And you're good!