My code is below. I wanna add to link my website icon to the main page but its seems like it doesn't work.
$output .= " <img id='svg_logo' href='https://example.com/' src='https://example.com/path/' /> ";
Because an <img> element has no href attribute. You can't make something a "link" just by adding an href to it.
The <img> is the content of your "link", and the link itself is a standard <a> element:
<a href="https://example.com/">
<img id="svg_logo" src="https://example.com/path/" />
</a>
Related
My end goal is to create a gallery of Images that when clicked link to an external website. This needs to be done through Advanced Custom Fields, so I made a repeater that has the image and link in the same row:
link1 | cover_image1
link2 | cover_image2
Right now I'm inserting this code into a text editor inside my webpage. I also imported some short-code from here, that allows me to use %ROW% as an iterator.
"attachments" is the parent repeater and "link" and "cover_image" are the children.
[acf_repeater field="attachments"]
external url = [acf field ='attachments_%ROW%_link']
image url = [acf field ='attachments_%ROW%_cover_image']
<a href =[acf field ='attachments_%ROW%_link'] >
<img src = [acf field ='attachments_%ROW%_cover_image'] width="300" height="214" />
</a>
[/acf_repeater]
The webpage renders this:
Where the broken image contains this code:
<img src="[acf" field="attachments_0_cover_image" ]="" width="300" height="214">
I think [acf field ='attachments_%ROW%_cover_image'] in <img> isn't resolving all the way to the url, as external url = and image url = both render the correct urls.
Wordpress also converts my code to this after saving, so its probably a syntax error?
[acf_repeater field="attachments"]
external url = [acf field = attachments_%ROW%_link]
image url = [acf field = attachments_%ROW%_cover_image]
<a href="[acf">
<img src="[acf" width="300" height="214" />
</a>
[/acf_repeater]
I'm not sure how to properly convert [acf field ='attachments_%ROW%_cover_image'] to a url in the <img> and I could use some help on the proper syntax. Thank you so much for you help!
html for the attribute per Arian:
<div class="fl-module fl-module-rich-text fl-node-5d4926759d7aa"
data-node="5d4926759d7aa">
<div class="fl-module-content fl-node-content">
<div class="fl-rich-text">
<p>Agenda: https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/cute-cat-photos-1593441022.jpg?crop=0.669xw:1.00xh;0.166xw,0&resize=640:*</p>
<p>Video Links: </p>
<p>Thumbnails: </p>
<p></p>
<p>external url = https://www.youtube.com/watch?v=uHKfrz65KSU<br>
image url = http://wordpress.local/wp-content/uploads/Thumbnail_1.png</p>
<p><a href="[acf" field="attachments_0_link" ]=""><br>
<img src="[acf" field="attachments_0_cover_image" ]="" width="300" height="214"><br>
</a></p>
<p><br></p>
<p>external url = https://www.youtube.com/watch?v=X2lIovmNsUY<br>
image url = http://wordpress.local/wp-content/uploads/Thumbnail_2-1.png</p>
<p><a href="[acf" field="attachments_1_link" ]=""><br>
<img src="[acf" field="attachments_1_cover_image" ]="" width="300" height="214"><br>
</a></p>
<p><br></p>
<p>external url = https://www.youtube.com/watch?v=hDJkFLnmFHU<br>
image url = http://wordpress.local/wp-content/uploads/Thumbnail_3-1.png</p>
<p><a href="[acf" field="attachments_2_link" ]=""><br>
<img src="[acf" field="attachments_2_cover_image" ]="" width="300" height="214"><br>
</a></p>
<p><br></p>
</div>
</div>
</div>
Not a wordpress guy, but seems like wordpress prevents expanding/executing shortcodes with parameters within html attributes, maybe this could work as workaround if you can put php code there:
<?php
$link = do_shortcode("[acf field ='attachments_%ROW%_link']");
$cover_img = do_shortcode("[acf field ='attachments_%ROW%_cover_image']");
?>
<a href="<?= $link ?>">
<img src="<?= $cover_img ?>" width="300" height="214" />
</a>
Actually i found comment on this:
It appears it's using the same quotes for the HTML attribute and the shortcode's attributes that create problems.
at here
so this may work too:
<a href="[acf field ='attachments_%ROW%_link']">
<img src="[acf field ='attachments_%ROW%_cover_image']" width="300" height="214" />
</a>
or without shortcode quotes:
<a href="[acf field=attachments_%ROW%_link]">
<img src="[acf field=attachments_%ROW%_cover_image]" width="300" height="214" />
</a>
last option i can think of is creating parameter-less shortcodes like this:
function acflink_shortcode() {
return do_shortcode("[acf field ='attachments_%ROW%_link']");
}
add_shortcode('acflink', 'acflink_shortcode');
function acfimage_shortcode() {
return do_shortcode("[acf field ='attachments_%ROW%_cover_image']");
}
add_shortcode('acfimage', 'acfimage_shortcode');
then using in editor like:
<a href="[acflink]">
<img src="[acfimage]" width="300" height="214" />
</a>
Images in PHP files have an "alt" tag, but I need to duplicate its content to "title" tag. So the code automatically reads the page when it loads, and adds the new "title" tag beside the "alt" tag, whether using PHP, jQuery, JavaScript..
Example:
<img border="0" src="../../../../images/divider.jpg" alt="description of image" width="410" height="15">
Output:
<img border="0" src="../../../../images/divider.jpg" alt="description of image" title="description of image" width="410" height="15">
Using JavaScript, you can search <img> tags, and add this title attribute:
let imgs = document.querySelectorAll('img');
for (let i=0;i<imgs.length;i++) {
if (!imgs[i].title) // if title is not defined
imgs[i].title = imgs[i].alt;
}
Using jQuery, you can use find images $('img') and loop using each():
$('img').each(function(img) {
if (!this.title)
this.title = this.alt;
});
First time poster on here, did about a couple hours of searching and trying but got stuck... so go easy on me :)
With a page containing this...
<li onclick="javascript:trackClick(14423, 'web'); document.location='http://www.mywebsite.com';">
<img class="listing-control" src="img/url-profile-listings.png" alt="Get Directions" width="51" height="51" style="padding:4px;">
<span id="web14423">Visit Website</span>
</li>
I am trying to get the url http://www.mywebsite.com in the document.location of the li tag.
The only unique and constant thing to key off is the "Visit Website" text in the span tag. Is there any way to find that and go up to the parent li tag to the the document.location property from the onclick event?
Any help would be greatly appreciated!!!
Thanks,
MrMo.
Of course load it in the SimpleHTMLDOM object, then just target the <li> tag with it. Target the onclick="" attribute to get the values inside it.
Disclaimer: I'm not a regex expert in any way.
$html_string = <<<EOT
<li onclick="javascript:trackClick(14423, 'web'); document.location='http://www.mywebsite.com';">
<img class="listing-control" src="img/url-profile-listings.png" alt="Get Directions" width="51" height="51" style="padding:4px;">
<span id="web14423">Visit Website</span>
</li>
EOT;
$html = str_get_html($html_string);
// after loading the html with either str_get_html or file_get_html
foreach($html->find('li') as $list) {
$script = $list->onclick;
preg_match('/document.location\s*=\s*\'(.*?)\';/', $script, $match);
if(!empty($match)) {
$url = $match[1];
echo $url;
}
}
Link:
<a id="mylink" href="http://mysite.com/traffic_analityc.php">My Link</a>
or image:
<img src="http://mysite.com/traffic_analityc.php" />
or iframe :
<iframe src="http://mysite.com/traffic_analityc.php"></iframe>
Thank's before..!
Add a GET reference in each link and then get that reference in traffic_analityc.php:
LINK:
<a id="mylink" href="http://mysite.com/traffic_analityc.php?src=href">My Link</a>
IMAGE:
<img src="http://mysite.com/traffic_analityc.php?src=img" />
IFRAME:
<iframe src="http://mysite.com/traffic_analityc.php?src=iframe"></iframe>
And then in the traffic_analityc.php:
$source = isset($_GET['src']) ? $_GET['src'] : '';
$source will of course equal either href, img or iframe.
how to insert this javascript code :
thejavascript
inside img src in php
<img src="http:'.$iv[$j].'.jpg" height="220" width="200" alt="Image '.ucwords($kw).'" "thejavascript">
Thanks
You can use this jQuery script to add and onClick event in your balise img but you must adding an attribute id into your image. An id must be unique in your html page.
$("img#idImage").click(function({
window.open('welcome.html','welcome');
}));
$kw = $ucwords($kw);
"<img id='idImage' src='http:{$iv[$j]}.jpg' height='220' width='200' alt='Image {$kw}' />";
But the best will be to separate attributes height and width into a CSS stylesheet.
Insert the following HTML outside PHP brackets and it should work according to the way you posted it. I'm making a few assumptions, one being that the link you posted wraps the image code and that the PHP variables turn the image into valid code.
<a href="javascript:void(0);" onclick="window.open('welcome.html','welcome')">
<img src="http:<?=$iv[$j]; ?>.jpg" height="220" width="200" alt="Image <?=ucwords($kw); ?>">
</a>
More simple, replace "thejavascript" (with the "") by :
onclick="window.open(\'welcome.html\',\'welcome\')"
A bit different approach, onclick event is on img tag.
$javascript="window.open('welcome.html','welcome')";
$img='<img src="http:'.$iv[$j].'.jpg" height="220" width="200" onclick="'.$javascript.'">';
echo $img;