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)
Related
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 have the following html code that tried to place in my WordPress page.
html:
<div class="hovereffect">
<img src="<?php echo get_template_directory_uri() ?>phone.jpg" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
At the moment everything is in the site except the image that does not show.
How can I use this code WordPress in a way that it can display the image?
I think you forget to tell which place it should get the images from. And you are also forgetting a semicolon after the get_template_directory_uri();.
This is an example, but here i'm telling which folder to get the image from:
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/your_image.jpg">
you can do that but it is not a good practice to paste this code as it is in WordPress editor,
upload this image in media and get link of that image
Edit page, select text mode from top right corner of your editor and paste code these i.e
<div class="hovereffect">
<img src="http://example.com/wp-content/uploads/2016/07/img.png" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
Here is good practice create a template for that page and write there your code.
Image replace with feature image
Heading with page title.
Detail with page content
link with page permalink.
Not enough reputation to leave a comment so I will leave this as an answer instead.
Assuming phone.jpg is at the root of your theme, you're forgetting the / (slash) before phone.jpg.
It should be
<img src="<?php echo get_template_directory_uri(); ?>/phone.jpg" >
PHP won't get parsed inside a page. Just upload the image to the WordPress media library and link to it directly.
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>
I have searched high and low for a solution to this. I want to change the markup of an uploaded image in WordPress from this:
<div id="attachment_906" style="width: 590px" class="wp-caption aligncenter">
<img class="size-full wp-image-906 " title="Image Alignment 580x300" alt="Image Alignment 580x300" src="http://localhost/sandbox/wp-content/uploads/2013/03/image-alignment-580x300.jpg" width="580" height="300">
<p class="wp-caption-text">Look at 580×300 getting some <a title="Image Settings" href="http://en.support.wordpress.com/images/image-settings/">caption</a> love.</p>
</div>
To something more like this:
<figure class="center">
<img class="gallery-img" src="http://lorempixel.com/300/500/">
<figcaption>
<span>A slightly longer caption for the image, which is significantly smaller than the last one. pretty neat!</span>
</figcaption>
</figure>
I understand that much of the markup in the original post needs to stay, but is there any way to customize any of this? Even if I could get the same basic structure (a wrapper, the image, a caption wrapper, the caption) I could take it from there with CSS.
Since I'm developing a theme, I need the options to work with the native WordPress tools. If that isn't the case, I can't work with it.
I had hoped that there would simply be a filter or action that I could apply to do this, but I have had no luck in finding such a thing.
Thanks in advance!
You need to use the image_send_to_editor filter. https://developer.wordpress.org/reference/hooks/image_send_to_editor/
That could look something like this in any one of your active theme or plugin's php files (like functions.php);
function filter_image_send_to_editor($content) {
$content .= '<figure class="center">(Generate your markup here)</figure>';
return $content;
}
add_filter('image_send_to_editor', 'filter_image_send_to_editor');
You'll have to write your own code inside that function, of course.
I pulled images from my database and put them in a table, when I go over the image then, I see my imgtitle which is what I want. But now I used a href to open a new page with the enlarged picture when I click on it. But how can I have the imgtitle on that pic as well when I go over it?
Here is the line of code:
<td><img src="<?= $image ?>" title="<?= $imgtitle ?>" height="100" width="100"></td>
Yes you can have title attribute in a and img element.
If you want to show the tooltip text again in the other page with the big picture, you have to use title there as well.
This is W3C's documentation on HTML Global title attribute:
In HTML5, the title attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful).
In HTML 4.01, the title attribute cannot be used with: base, head, html, meta, param, script, style, and title.
Try
<a href="<?= $image ?>" title="<?= $imgtitle ?>">