Hi guys wondering how I can manually add a link from Joomla intro article images to their corresponding article and also add a title tag to the link.
Ideally the way I want to do this is to for example wrap an achor tag around the image reference in the blog-item.php file (also want to achieve this for generic articles). And then within the anchor tag capture the related image alt tag and populate the title tag with that value.
Below is where I'm at. It's not currently working, not sure why as it should be pretty straight forward. I'm not a php developer, wondering what i'm missing.
Also already cleared both browser and joomla caches after my changes.
Any help would be appreciated, cheers guys
<a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid)); ?>" title="<?php echo htmlspecialchars($images->image_intro_alt); ?>">
<img
src="<?php echo htmlspecialchars($images->image_intro); ?>"
alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
</a>
To make your code work, add just before your code.
<?php $images = json_decode($this->item->images); ?>
and your code will start working.
Already tested and it worked.
I cant seem to figure out the code for this. im currently in the functions.php of my child theme.
i'm trying to have an image link to the comments section of the post. I already have a button that links to the post itself.
the code looks like
<a href="<?php the_permalink(); #reply-title ?>">
<img src="http://trueidconference.com/wowministriesblogs/wp-content/images/JOINimg.png" alt="Mountain View" style="margin-left:12px;"></a>
when I try it, it just doesn't show up. if I use it shows up, but of course doesn't link to the post, then to the id.
I have tried different variations even using echo to get it to work.
But I just cant seem to figure out how to add #reply-title to whatever the current permalink is.
the reason it is in the functions.php is because i needed to add this link to the bottom of every post.
Try:
<a href="<?php echo get_the_permalink(); ?>#reply-title">
If I understand correct you need this:
<a href="<?php the_permalink(); ?>/#reply-title">
<img src="http://trueidconference.com/wowministriesblogs/wp-content/images/JOINimg.png" alt="Mountain View" style="margin-left:12px;">
</a>
On my site I have banners and a forum. I want the links to be nofollow and Target Blank, so I need to combine these attributes, but I'm not sure which is correct:
Should it be written as:
<a rel="nofollow" href="<?php echo $link; ?>" target="_blank"
Or is this the correct way:
<a href="<?php echo $link; ?>" target="_blank" rel="nofollow"
Which way will do this correctly and ensure they're no follow in the Search engines?
Strange thing happens, I have this code, on my wordpress site:
<a href="www.google.com" target="_self" class="facebook" ><img src="<?php echo get_template_directory_uri(); ?>/images/facebook.png"/></a>
The image is loaded, but is not clickable, I mean nothing happens when I click on it, what's wrong?
The link to my page is: http://toibz.com/ibz. Click on the "facebook" logo in the lower right corner.
add http:// to your link like:
<a href="http://www.google.com"..
Set position:fixed on the a tag instead of floating it.
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('\"','"');