CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Baylock
Baylock

Reputation: 1264

Automatically place a logo on top of every picture

I have a wordpress website and I would like to place the same small png icon on the bottom-right corner of any picture of any post.

The thing is that the posts are dynamic as the html is generated according to the user's content (so there is no html I can mess with before the article is written). Because of this, I can't say if the pictures are going to be be small, big, aligned to the left or right, and I can't predict their position. Not to mention that I also have to generate the logo img tag dynamically each time a picture is detected as I can't predict the amount of occurrences within a post.

I believe that the way to go would be to target any "img" tag inside a post and append a logo img tag just after which is easy to achieve. But the only way I found to detect the position of the user's picture in order to apply it to the logo is by using "clientWidth" and "clientHeight".

It works but it has a severe flaw when it comes to the clientWidth: as it's an absolute positioning related to the window, I get different offset results according to the browser I use (I believe it's because of the way each browser manages its scrollbars or something..). Anyway, this is a dead end as it is.

So, is there any way to "track" the relative position of an img in order to apply the exact position to another one and keep it that way, whatever the browser, even when the window is resized during the display?

This is what I tried (and almost worked).

        $(".status-publish img").each(function(index)
        {
            var theID= 'theID'+index;
            $(this).attr('id', theID);
            $(this).after('<img id="log'+index+'" src="logo.png" /> ');

            var source  = $('#theID'+index);
            var sourceHeight = source.height()-22;
            var sourcePosition = source.position();
            var target   = $('#log'+index);

            var sourceClass=source.attr('class');
            var mysplit=sourceClass.split(" ");
            var first_part=mysplit[0];
            var last_part= mysplit.pop();

            if((first_part=="alignleft") || (last_part=="alignleft") )
            {
                var x      = sourcePosition.left-2;
                var y      = sourcePosition.top + sourceHeight;
            }
            else if((first_part=="alignright") || (last_part=="alignright") )
            {
                var x      = sourcePosition.left+10;
                var y      = sourcePosition.top + sourceHeight;
            }

            else if((first_part=="aligncenter") || (last_part=="aligncenter") )
            {
                var x      = sourcePosition.left-2;
                var y      = sourcePosition.top + sourceHeight+2;
            }

            else if((first_part=="alignnone") || (last_part=="alignnone") )
            {
                var x      = sourcePosition.left-2;
                var y      = sourcePosition.top + sourceHeight;
            }

            x -= (target.outerWidth() - source.outerWidth());

            target.css({
                position: 'absolute',
                zIndex:   5000,
                top:      y, 
                left:     x
            });
        });

(Probably not the purest and most effective code you've ever seen but keep in mind that I'm not a developer...)

Upvotes: 1

Views: 190

Answers (1)

tcak
tcak

Reputation: 2212

What you can do is, put the main "img" into a "div". Then in that loop code, create new "img" tag in every div and set it position to "relative" and set its position as it is done in your code. Now every image you have code will show that logo and they move together.

Another approach could be using "canvas" to do this, though probably you don't want it in this way.

Upvotes: 1

Related Questions