Text Block Over Image With Hyper Link To Amazon Product

[komet]

Hi guys,

Does any of you know how I can add something like this to an image on a WordPress site:

Basically the whole "View on Amazon" thing. I can see it's not part of the image, it's actually a layer on the top of it and then you can click on it and it takes you to the product on Amazon. If you know a plugin or a way to do it, I'd really appreciate an answer.

 

[CCarter]

Does any of you know how I can add something like this to an image on a WordPress site:

Yes.

Amazon Like Overlay - Easy CSS + HTML Version:

CSS Code:

.overlay_background {
  position: relative;
  z-index: 1;
  background-color: #ebebeb;
  padding: 4px 4px 2px 4px;
  display: inline-block;
}

.overlay_background img {
  margin: 4px; /* for light-gray background */
}

.overlay_text {
   position: absolute;
   bottom: 11px;
   right: 8px;
   padding: 6px 20px;
   color: #ffffff;
   display: inline;
   background-color: #666666;
   background-color: rgba(102, 102, 102, 0.9);
   z-index: 2;
}

HTML Code:

<div class="overlay_background">
  <a href="https://www.buildersociety.com/threads/the-no-dev-question-is-stupid-thread-basic-html-css-etc.2844/page-7#post-44003">
    <img src="https://i.imgur.com/K0LMo3Z.gif">
    <span class="overlay_text">View At BuSo</span>
  </a>
</div>

Result:

--

Check out a live version on JSFiddle: Amazon-like Overlay

--------

Implement the CSS code within your stylesheet, then use the HTML code wherever you need the image with overlay added.

 

[Ryuzaki]

@komet, Another option would be to use a CSS pseudo-element like :after. You could potentially get this entire thing done without having to edit the HTML, but by simply adding a CSS class to the image. So you could go in and add the CSS class .at-amazon to the image you want and this would get automatically done for you. The nice thing is with Gutenberg you don't even need to view the HTML to add the class. With the classic editor it's just as quick but you have to pop into the "view source" mode for a second.

The CSS would look a lot like CCarter's but you'd do it all on the :after something like this:

.at-amazon:after {
    content: "View at Amazon";
    /* Plus most of CCarter's CSS all on this one pseudo-element */
}

I can't be bothered to get the exact CSS together for you at the moment, but that should put you on the path if you want to do it this way. The key is the content: "View at Amazon"; line, which will automatically add that text after any image you add the .at-amazon class to. The rest is just positioning it and styling it as CCarter has shown.

 

[CCarter]

Another option would be to use a CSS pseudo-element like :after.

That's not possible, the "content" field only takes text as content and cannot produce HTML. You need to product HTML before and after the image to get it to work correctly.

However here is a jQuery version that will run within Wordpress.

The difference here is it is a single image, with no div layers or anything in the code, all the user has to do is add the class .at-amazon, along with the additional data attributes (data-amazon-link and data-amazon-text) needed for the new html to be created. The code will scroll through all .at-amazon images on the page, and if all the right elements are present then it will replace the image with the overlay HTML + new image needed to produce the same results:

Same CSS

.overlay_background {
  position: relative;
  z-index: 1;
  background-color: #ebebeb;
  padding: 4px 4px 2px 4px;
  display: inline-block;
}

.overlay_background img {
  margin: 4px; /* for light-gray background */
}

.overlay_text {
   position: absolute;
   bottom: 11px;
   right: 8px;
   padding: 6px 20px;
   color: #ffffff;
   display: inline;
   background-color: #666666;
   background-color: rgba(102, 102, 102, 0.9);
   z-index: 2;
}

New HTML:

<img src="https://i.imgur.com/OkJRQ6M.gif" class="at-amazon" data-amazon-link="https://www.buildersociety.com/threads/the-no-dev-question-is-stupid-thread-basic-html-css-etc.2844/page-7#post-44006" data-amazon-text="Ryuzaki Is Wrong">

jQuery Code: (Assumes you loaded jQuery)

jQuery(document).ready(function(){

  jQuery('.at-amazon').each(function(i, obj) {

    let the_image_url = $(this).attr("src");
    let the_amazon_url = $(this).attr("data-amazon-link");
    let the_amazon_text = $(this).attr("data-amazon-text");

      //Do nothing if fields are blank
      if ((the_image_url === undefined) || (the_image_url === null)) { return; }
      if ((the_amazon_url === undefined) || (the_amazon_url === null)) { return; }
      if ((the_amazon_text === undefined) || (the_amazon_text === null)) { return; }

        //All good to go then
    jQuery(this).replaceWith('<div class="overlay_background"><a href="' + the_amazon_url + '"><img src="' + the_image_url + '"><span class="overlay_text">"' + the_amazon_text + '"</span></a></div>');

  });

});

Result:

Link to JSFiddle version: Amazon Overlay with JQuery

--

The user needs to put that jQuery code somewhere inside the blog HTML, or in a .JS file, or somewhere to make sure the jQuery executes. Afterwards go to the images where they want to put the overlay, and then implement the class at-amazon, and data attributes - data-amazon-link and data-amazon-text in the image.

 

[komet]

Thank you both @CCarter and @Ryuzaki for your input. For now, I've used your initial option with CSS CCarter as it was easier for me to implement. However I will play around with the 2nd one you created.

Cheers lads

 

[Ryuzaki]

"Oh snap, here comes Ryuzaki!"

THAT'S THE SOUND OF THE POLICE

THAT'S THE SOUND OF THE BEAST
​

That's not possible, the "content" field only takes text as content and cannot produce HTML. You need to product HTML before and after the image to get it to work correctly.

​

You don't need to produce HTML within the content attribute. You can style it as if it is within it's own HTML container.

The goal here is to save as much time as possible when adding this "View at Amazon" box to an image. You it's time consuming to have to paste a bunch of HTML around each image every single time you want to do this. My initial goal was to set it up for you so you only need to add a CSS class to it and boom it's done.

Goal achieved.
​

Earlier I said to add the :after to the image. This works in all cases except where you want to add text. Since you'll wrap the image in an anchor tag to have a link, and since Wordpress wraps all images in <p> tags, you can simply add the CSS class to the parent paragraph tag like this:

<p class="at-amazon">
  <a href="https://www.buildersociety.com/threads/the-no-dev-question-is-stupid-thread-basic-html-css-etc.2844/post-44009">
    <img src="https://i.imgur.com/AWPAgs5.jpg" />
  </a>
</p>

This means that any time you want "View at Amazon" on any image, all you need to do is add "at-amazon" to the parent paragraph tag for the image.

Then, add this CSS to your child theme:

.at-amazon a {
  display: inline-block;
  position: relative;
}

.at-amazon a::after {
  content: "View at Amazon";
  position: absolute;
  bottom: 0;
  right: 0;
  color: #FFF;
  background-color: gray;
  padding: 8px 12px;
}

.at-amazon img {
  display: block;
}

What's happening is the text is added to the anchor tag itself, meaning that it's also included in the link as well.

No z-index nonsense, no adding overlay wrappers, no adding an additional overlay_text sibling, no data attributes. Just add the "at-amazon" and you're done.

It'll look like this, which is what I look like right now:

​

Link to JSFiddle: https://jsfiddle.net/RyuzakiEruIshii/ku7t9j6y/

​

As a consolation prize, I will say that you could definitely use CCarter's jQuery method to add the HTML into your posts (if you want to bloat out your HTML some more ).

 

[CCarter]

As a consolation prize,

LMFAO

Dude changed his whole story about being simply a "class add-on" to the image, to now having to wrap the whole image in a p tag. His new code looks a lot like my first code... ONE difference in where you add the text.

Don't fret, you went up against the best and you lost. Be proud Ryuzaki, be proud!

 

[Ryuzaki]

to now having to wrap the whole image in a p tag.

Wordpress wraps all images in p tags, bruhski. All you gotta do is drop in the class. Elegance.