Embedding YouTube video with Advanced Custom Fields on WordPress - php

I'm using Advanced Custom Fields plugin for custom fields in WordPress, and I tried to embed YouTube videos by adding one more custom fields where I write the YouTube video IDs. And I added the snippet below to the realted content php file, but it did not work. Could you please tell me what is wrong with the code? Thanks.
<div class="videoembed">
<?php $embedcode = the_field('video-embed');
echo do_shortcode("[embedyt]http://www.youtube.com/watch?v=" .$embedcode. "&width=600height=350[/embedyt]"); ?>
</div>

I had the problem myself and found a solution that worked!
the field type must not be oembed, but must be single-line text
and than it works with this code:
<?php // use inside loop echo $youtubevideo_code = wp_oembed_get( get_field('video_url') ); ?>

You don't need to use shortcode in your case, just write iframe tag :
<iframe src="<?php echo $embedcode; ?>" width="600" height="350" frameborder="0"></iframe>

Related

Alt atrribute missing in AMP WordPress

I'm using official WordPress AMP plugin to create my custom WordPress theme. For images I use
<?php if(has_post_thumbnail()):?>
<img class="img2" src="<?php the_post_thumbnail_url('blog-small'); ?>" alt="<?php the_title();?>">
<?php endif;?>
I get regular alt attribute as expected but the alt attribute is missing in some auto generated AMP codes. Here is an example of that code:
<img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzIxMCcgd2lkdGg9JzQwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB2ZXJzaW9uPScxLjEnLz4=">
As you can see here the alt attribute do not contain any value. Can any one help me to solve the problem? I'm not looking for AMP validation. Missing alt can harm SEO. If you wish you can provide a code snippet so that I can understand it easily. (I'm a new coder)

Using Bootstrap 2.3.2, what is a good method of styling an image gallery

I am trying to create an image gallery on my real estate website that displays only the images associated with the property selected. I have the following code that allows me to bring up the images associated with the property. My issue now is trying to create an image gallery from this. Any ideas on how to do this? I am using Bootstrap 2.3.2 to build the site.
<?php
$path = "../uploads";
foreach (glob("$path/{$_SESSION['propertyid']}*") as $filename):
?>
<img src="<?php echo $path ?>/<?php echo $filename ?>" alt="photo" width="250" height="250" border="0" /><br><br>
<?php endforeach ?>
I would comment with this question and then answer this but I must have 50 rep to comment.
My question is why are you still using 2.3.2. Why not upgrade to 3.2? That is just pure curiosity. Regardless of the answer, I have had to do this before. I am not proficent with entering code correctly on stackoverflow yet so here is a pastebin link. BTW, I had to go digging through an old pastebin account for this.
http://pastebin.com/kPA6Vq0g

Displaying an attribute in a tab

I have been trying to display a product attribute that i created called “PDF” in a tab. I tried to re-use the code that had been used to get the product description but change it to reference my new Attribute, well so i thought.
This is the code i used:
The attribute code is: pdf
Admin title is: PDF
<?php $_pdf = $this->getProduct()->getPDF(); ?>
<?php if ($_pdf): ?>
<h2><?php echo $this->__('PDF') ?></h2>
<div class="std">
<?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), $_pdf, 'pdf') ?>
</div>
<?php endif; ?>
I maybe no where near where i have to be but i am new to magento and new to PHP as well.
I dont want to have to use any extensions if possible.
If you can fix this for me you will be a god! thanks in advance for any help.
You are using $this->getProduct()->getPDF() when you should be using $this->getProduct()->getPdf(). Magento camel cases attribute names for its magic methods.
You could also use $this->getProduct()->getData('pdf').

Display QR Code inside colorbox?

I've been able to put some code together and get a QR code to display on my site. Now I'm attempting to get the QR Code to open a larger version inside colorbox. This is the code I've got so far:
<a href="<?php echo $????; ?>" title="<?php echo $heading_title; ?>"
class="colorbox" rel="colorbox">
<img src="http://chart.apis.google.com/chart?chs=250x250&cht=qr&chld=L&chl=
<?php $url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; echo $url; ?>"
alt="Product QR Code" width="80" height="80" style="float: right" /></a>
All the code for colorbox is on this page already as I have products that use this very function. The original code said echo $popup but when I use that it shows me the main product image so that's no good. What I can't figure out is what to do with echo in the href section so it calls the image again in the pop-up box but in a larger size?
I've tried using the same url as with the img src but it only returns garbage characters in the pop-up box and doesn't know to turn it into an image instead.
Thanks for your time!
When you assign colorbox, set the photo property to true. Example:
$('a.example').colorbox({photo:true});
Colorbox normally uses a regex to determine if a link is pointing to an image or not, but the URL you are using isn't going to pass that regex.

How would I properly insert this PHP into an <a> tag's title?

I know this code isn't correct, but I would like to inject the HTML and PHP into the title of the below tag.
<p class="related_articles" title="<?php echo the_field(related_articles_1_title); ?>"Related Articles</p>
I am using a jQuery tooltip plugin (http://flowplayer.org/tools/tooltip/index.html) that grabs content from the title tag and displays it as the tooltip content. I have Advanced Custom Fields setup (WordPress plugin) that allows me to publish custom field content. In effect, the content I post in these custom fields will end up in the tooltip.
My goal is to produce a tooltip when the user hovers over "Related Articles", that displays a link that is clickable. Again, the above jQuery tooltip plugin grabs the content from the title, which is why this is causing difficulty
Ok, as we understand what you are trying to do. Lets get some things clear.
<p class="related_articles" title="<?php echo the_field(related_articles_1_title); ?>"Related Articles</p>
Is SO wrong on so many levels. First of all things, its not valid in any way. Second of all, you are not ending your <a>. You are also missing one echo and target="", inside title="" was not escaped: target=\"\".
So in a nutshell to straight up answer your question, this maybe will work (maybe, because its seriously uncommon and nonstandard)
<p class="related_articles" title="<?php echo the_field(related_articles_1_title); ?>">Related Articles</p>
Also, as one of the users already mentioned. If your server server enables short open tags, then you could make the <?php echo $foo; ?> shorter: <?= $foo ?>. So in your codes case it would look like:
<p class="related_articles" title="<?= the_field(related_articles_1_title) ?>">Related Articles</p>
However, as probably mentioned already. This is not recommended method and may produce all sort of issues. I recommend to research for a better solution.
Use the short form if your server supports it:
<?=the_field(related_articles_1_link)?>
or else, you should echo it:
<?php echo the_field(related_articles_1_link); ?>
<p class="related_articles" title="<?php echo htmlspecialchars(''. the_field(related_articles_1_title) .''); ?>">Related Articles</p>
While this should work, I am not sure if your mentioned jQuery plugin is able to interpret the given html in a title attribute as HTML (you need to test it). Most likely this will be interpreted as text and all tags will be visible to the end user, but this is not what you want.
I found an example of how to implement this in a different manner: http://flowplayer.org/tools/demos/tooltip/any-html.html
Is it possible that this is what you want?
<p class="related_articles">
Related Articles:
<a href="<?php echo the_field(related_articles_1_link); ?>" target="_blank">
<?php echo the_field(related_articles_1_title); ?>
</a>
</p>
Now that you've clarified that your question was regarding the jQuery Tooltip plugin, you should do the following:
<p class="related_articles">Related Articles</p>
<a class="tooltip" href="<?php the_field(related_articles_1_link); ?>" target="_blank">
<?php echo the_field(related_articles_1_title); ?>
</a>
Javascript:
$('.related_articles').tooltip();
The reason this works:
The tooltip plugin looks at the element right after the one which .tooltip() was applied to. If that next element has a class name of tooltip, it'll use that as the contents of the tooltip (instead of the title attribute).
Given that you are placing html content inside an HTML property it should be escaped. As mentioned by #Karolis do this:
<p class="related_articles" title="<?php echo htmlentities(''.the_field(related_articles_1_title).''); ?>">Related Articles</p>
This should generate a tooltip with the link in it. If you see stuff like "& lt;a href="... & gt;" on the tooltip then the plugin is not unescaping html values. You could unescape the values but unfortunately javascript has no function. For this you can check out php.js
which provides php's functions in js but that seems kinda overkill. You could instead replace the troublesome characters like this:
<?php
// Generate complete tootltip content
$tootltipContent = ''.the_field(related_articles_link_1).'';
// Search for these
$search = array('<','>','"');
// And replace them with these
$replacements = array('##','##','\"');
$tooltipContent = str_replace($search,$replacements,$tooltipContent);
?>
<p class="related_articles" title="<?php echo $tooltipContent; ?>">Related Stuff</p>
Then look for the line in the plugin where the title is extracted from the element. (tip: on the plugin source code do a search for 'title'. There should be one place where the value is being extracted) It may look something like this tooltipContent = $(someVar).attr('title'); Now run the inverse replacement in js:
tooltipContent = tooltipContent.replace('##','<').replace('##','>').replace('\"','"');

Categories