Develop Reference

How to verify Image is visible/exists on front end using <img src> or <a href> tag

Does anyone know how I can verify if an image exists using its <a href> or <img src>? I can only verify by its class such as:
it('Verifying vertical product', () => {
cy.get('.stage --vertical').should('be.visible')
})
but I want to know how to verify with img src or href tag. thank you
Full HTML:
<a href="haigclub.diageoplatform.com/en/our-whisky/haig-club-clubman">
<img style="margin: auto; display: block;" class="stage__image"
src="haigclub.diageoplatform.com/user/themes/haig/images/bottle.png">
</a>

If I understand correctly, you are looking for
cy.get('a[href="..."]')
Similarly
cy.get('img[src="..."]')
where you should add the appropriate text instead of ...
Of course, follow with .should('be.visible').
If you want to use a partial match, you can use
cy.get('img[src$="bottle.png"]') // NOTE src$=

A more explicit test might select href and .find() the img, to avoid the problem of returning multiple images.
cy.get('a[href^="haig-club-clubman"]')
.find('img') // find inside previous selector (a[href])
.should('have.attr', 'src')
.and('include', 'bottle.png') // explicit test of src attribute

If you want to assert the image with the image name you can do something like:
cy.get('img').invoke('attr', 'src').should('include', 'bottle.png')

Another option is to apply a filter which checks the attribute.
Not optimal here, but useful for more complicated scenarios.
cy.get('img')
.filter('[src^="bottle.png"]')

Replace part of HTML string with Javascript or PHP

I need to replace part of the HTML tag for displaying YouTube videos:
<div class="pretty-embed" data-pe-videoid="IL5AbXBqzwk" data-pe-fitvids="true"> </div>
with direct link to YouTube image while keeping ID which is defined in data-pe-videoid attribute:
<img src="http://img.youtube.com/vi/YiF7e7m2jPo/sddefault.jpg">
If I break it in two parts, I would need to replace
<div class="pretty-embed" data-pe-videoid="
with
<img src="img.youtube.com/vi
and
" data-pe-fitvids="true"> </div>
with
/sddefault.jpg">
I'm looking for a solution with PHP or jQuery/vanilla JavaScript. I tried to experiment with PHP & regular expression but without success.
Any help would be appreciated.

Solution using jQuery to add/append an image to each div since its not clear what you mean by "replace part of html":
(function($) {
$(function() {
$('[data-pe-videoid]').each(function() {
var el = $(this);
// append img
el.append($('<img src="http://img.youtube.com/vi/' + el.data('pe-videoid') + '/sddefault.jpg">'));
});
});
})(jQuery);
Alternatively replace instead of append:
el.replaceWith($('<img src="http://img.youtube.com/vi/' + el.data('pe-videoid') + '/sddefault.jpg">'));

Is there a way I could pick up the first image in a blogpost and put it as a header in a blog post?

So what I'm trying to do is to get the first image in a blogpost to look like a header for every blog post page....
This is what I have so far:
<b:if cond='data:post.firstImageUrl'>
<img expr:src ="data:post.firstImageUrl" expr:alt="data:post.title"/>
</b:if>
But then it's not really working. Can someone please help me out? Please see this for an example. I want the first image in my post to look like that header on the page....

I have had trouble with that too. I suppose you want to use the image as a background image.
I worked around that using some jquery.
Your aim is a little bit different than mine, so I would suggest you actually add a class to your first image (may want to do that manually, or use javascript), get the source, add it as a background image to your header and hide the image tag (don't do that if repetition is intended)
Markup would then be something like:
<header class="imgbg"></header>
<div class="post">
<h1>Title</h1>
<p>Text</p>
<img src="#" class="first-img">
</div>
and jquery:
function getimgsrc(){
$('.post').find('.first-img').each(function(n, image){
var image = $(image);
var thisurl = $(this).attr('src');
$('.imgbg').css('background-image', 'url(' + thisurl + ')');
$('.first-img').remove();
});
}
I built a codepen to illustrate this a bit better: http://codepen.io/bekreatief/pen/BaFnx

Javascript onClick change background picture of div

My ultimate goal is to change the background of a div through clicking on the sampla picture.
First I wrote this:
<a onclick="document.getElementById('sp').style.background="url('/assets/castle.png')"">...<a>
but it didn't work. I noticed that the problem was usage of multiple " and '. So put the function into a script tag:
<script type="text/javascript">
var pic="";
function showP(pic) { document.getElementById('sp').style.background='url(pic)';};
</script>
<a onclick="showP(/assets/castle.png)"><img src="/assets/castle.png" width="50px" height="50px"></a>
As supposed by seeing /assets dir, this is a rails app. I also tried o use jQuery selectors like $("#sp").css() or dropping the variable altogether and trying the function as:
function showp1() { document.getElementById('sp').style.cssText='background: transparent url(/assets/castle.png) no-repeat 0 0;'}
to try out solutions proposed in questions with similar titles but none did work. Whatever I try, on the html source, the portion showP(/assets/castle.png)" below is marked red:
<a onclick="showP(/assets/castle.png)"><img src="/assets/castle.png" width="50px" height="50px"></a>
Are there any suggestions?

Avoid putting JS in your HTML code. Use unobtrusive event listeners. They are very easy in jQuery:
$('#clickMe').on('click', function() {
$('#changeMe').css('background-image', 'url(http://placehold.it/200x200/ff0000)');
})
See this Fiddle.

Try this:
<script type="text/javascript">
function showP(pic) {
document.getElementById('sp').style.background = 'url(' + pic + ')';
};
</script>
<a onclick="showP('/assets/castle.png')">
<im src="/assets/castle.png" width="50px" height="50px" />
</a>
You needed to pass a string to the showP function in the onclick handler, which should be in quotes. You're passing a string into the function, which is in the pic variable being passed into the function. You want that string variable's value to be concatenated with the URL rule for the background style.

the background image URL does not require quotes. Try:
<a onclick="document.getElementById('sp').style.background='url(/assets/castle.png)'">...<a>

As others have said, you do seem to have an issue with quotes. You can check out my working example on jsFiddle.

How do I add a hashtag to a custom tweet button?

I'm trying to create a custom tweet button with a popup, this part works. However, I am unable to get it to post hashtags in the text area.
Tweet content
url=http://www.mywebsite.com&text=mytweetcontent&via=mytwitterusername
In the &text= I've experimented with using mytweetcontent+#myhashtag as well as trying the URL encoding %23 (which corresponds with #); however, I am still unable to get a hashtag to appear. Any ideas on what I can do? I would prefer to have a custom image, which is why I am not using the proprietary twitter jscript button. Thanks very much for your help!
Full code for reference:
<img src="twitter-logo.png" border="0">
Edit* Response to comment
thanks for the suggestion! i didnt try with hashtag, just normal, but changing the & to ? removes the content area, code below. Top line is the result in the tweet box, below is corresponding url.
mycontent http://t.co/nKb4nWC via #myusername
http://twitter.com/intent/tweet?text=mycontent&url=http%3A%2F%2Fwww.mywebsite.com&via=myusername
http://t.co/YzrDfzX via #myusername
http://twitter.com/intent/tweet?url=http%3A%2F%2Fwww.mywebsite.com%3Ftext%3Dmycontent&via=myusername

What's wrong with using the following?
<a href="http://twitter.com/intent/tweet?text=Text%20%23hashtag&via=JohnDoe"
onclick="return !window.open(this.href, 'tweet', 'menubar=no')">
<img src="twitter-logo.png">
</a>

Twitter
<script type="text/javascript">
$('.socialLinkTwitter').click(function (e) {
e.preventDefault();
var sTwitterShare = $(this).attr('href');
window.open(sTwitterShare,'Share','width=550,height=450');
});
</script>