WordPress.org

Ready to get started?Download WordPress

Forums

Strange WordPress Issue (10 posts)

  1. bboysupaman
    Member
    Posted 4 months ago #

    I am having difficulty with a WordPress site that has already been pretty heavily customized. Suddenly, one of the pages simply stopped working!

    The issue is that when clicking a video link, a lightbox clone (prettyPhoto) is supposed to show the youtube video, but instead the popup message "Image cannot be loaded. Make sure the path is correct and image exist." displays.

    Here is what I have learned so far on the issue through a lot of research and exploring the code:

    - The page is composed of individual posts and the images that the anchor tag is surrounding are generated using the video thumbnail of each post.

    - The posts themselves are merely a YouTube link "ex: http://www.youtube.com/watch?v=LdOKJ7cybi4" with a title and a video thumbnail.

    - The issue seems to be caused by the href attribute that WordPress generates. Using the above youtube link example, it supplies an href attribute like this (it actually puts the span tags and everything inside of the href attribute):

    <span class='embed-youtube' style='text-align:center; display: block;'><iframe class='youtube-player' type='text/html' width='640' height='390' src='http://www.youtube.com/embed/LdOKJ7cybi4?version=3&rel=1&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent' frameborder='0'></iframe></span>

    - When I remove the span tags and all contents and replace it with the content of the post (ex: http://www.youtube.com/watch?v=LdOKJ7cybi4), then it works! But, I can't figure out how to make it use the YouTube link that was typed into the post, rather than generating these excessive and unneccesary span tags.

    Help please!

  2. Senff
    Member
    Posted 4 months ago #

    Not sure what you mean by "it actually puts the span tags and everything inside of the href attribute".

    Is it possible to give us a link to the site so we can see the problem in action?

  3. bboysupaman
    Member
    Posted 4 months ago #

    Yes. Absolutely. Thanks for taking the time to read my post.
    http://nandinahome.com/design-tips/

  4. kmessinger
    Volunteer Moderator
    Posted 4 months ago #

    Your code is correct. Here it is exactly as you show above http://test.savethecolors.com/116/

  5. Senff
    Member
    Posted 4 months ago #

    OK, so on the site, this is the code that you end up with:

    <a href="
    <span class='embed-youtube' style='text-align:center; display: block;'><iframe class='youtube-player' type='text/html' width='640' height='390' src='http://www.youtube.com/embed/LdOKJ7cybi4?version=3&rel=1&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent' frameborder='0'></iframe></span>
    " rel="prettyPhoto" title="" style="display:block; height:125px; overflow:hidden; position:relative; top:40px; padding-top:20px;">

    That's definitely invalid code. You can't have HTML within an href. What you should end up with, is something like this:

    <a href="//www.youtube.com/watch?v=B0ky-VMi9fI" rel="prettyPhoto" style="display:block; height:125px; overflow:hidden; position:relative; top:40px; padding-top:20px;">
                                	<img src="http://nandinahome.com/wp-content/themes/nandina/images/play.png" class="play">
                                	<img src="http://nandinahome.com/wp-content/uploads/2014/02/nandina-real-life-ad-atlanta-150x150.jpg" class="large_thumb" style="position:relative; top:-45px;">
                                </a>

    Can you tell me what code you put in your actual post content?

    I believe you should use this type of formatting:

    <a href="//www.youtube.com/watch?v=B0ky-VMi9fI" rel="prettyPhoto" title=""><img src="http://nandinahome.com/wp-content/themes/nandina/images/play.png" class="play">
                                	<img src="http://nandinahome.com/wp-content/uploads/2014/02/nandina-real-life-ad-atlanta-150x150.jpg" class="large_thumb" style="position:relative; top:-45px;"></a>
  6. bboysupaman
    Member
    Posted 4 months ago #

    The only thing in the actual post content is:

    http://www.youtube.com/watch?v=LdOKJ7cybi4

    I know that the code with the reference url is invalid, I just don't know why WordPress is converting my url to a sting of other elements (the invalid code).

  7. bboysupaman
    Member
    Posted 4 months ago #

    Additionally (if this helps), the page on which the issue is occurring (http://nandinahome.com/design-tips) is a Custom Post Type generated from the Theme Functions using the following code:

    /* Videos */
    	register_post_type( 'design_tips',
    		array(
    			'labels' => array(
    				'name' => __( 'Design Tips' ),
    				'singular_name' => __( 'Design Tip' )
    			),
    		'public' => true,
    		'has_archive' => true,
    		'menu_position' => 5
    		)
    	);

    This code then somehow sources the thumbnails and reference links from the posts that are posted in the Custom Post Type.

  8. kmessinger
    Volunteer Moderator
    Posted 4 months ago #

    You do not need an href. Please read
    https://codex.wordpress.org/Embeds

    This is valid WordPress code.
    <p><iframe width="640" height="480" src="http://www.youtube.com/embed/dQw4w9WgXcQ?feature=oembed" frameborder="0" allowfullscreen></iframe></p>

    WordPress adds nothing to your embed but the iframe.

    Can you replicate this with no plugins and the default theme?

  9. bboysupaman
    Member
    Posted 4 months ago #

    Disabling all plugins seems to have eliminated the excess markup in the reference url. So, I guess I'm going to have to go through one plugin at a time and figure out which one is breaking it.

  10. kmessinger
    Volunteer Moderator
    Posted 4 months ago #

    Yep, that is part of the basic debug. Sometimes you add them all back and it works!

Reply

You must log in to post.

About this Topic