Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.
One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.
Course Of The Month
2 days, 2 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Overlay image or texture over text and png files
Posted on 2016-10-05
Hi,
I'm working on a small project that involves modifying a Wordpress plugin to suit our specific needs. The code for the plugin is not organized very well (not as well as I have seen other plugins), nor is it documented, and after asking the developer for help (offering to pay) he said that what I needed was not possible. However, I am a firm believer that anything is possible with good programming! So please experts, can you tell me if this is possible or not...
Right now, the script allows you to change the color of the text and PNG or SVG images by selecting it and clicking on the color to change it. Easy enough. However, I want to be able to not only change the color of the text and the PNG images, but overlay them with a texture or image. In the backend, you can specify which colors are available to the end user. I want to be able to also upload textures to be available to the end user as well... at least specify them programmatically somehow.
I thought this would be possible with CSS, but I could not find any examples of it in searching Google. If there is a code snippet somewhere that demonstrates this that would be great. Any help is appreciated!
I'm working on a small project that involves modifying a Wordpress plugin to suit our specific needs. The code for the plugin is not organized very well (not as well as I have seen other plugins), nor is it documented, and after asking the developer for help (offering to pay) he said that what I needed was not possible. However, I am a firm believer that anything is possible with good programming! So please experts, can you tell me if this is possible or not...
Right now, the script allows you to change the color of the text and PNG or SVG images by selecting it and clicking on the color to change it. Easy enough. However, I want to be able to not only change the color of the text and the PNG images, but overlay them with a texture or image. In the backend, you can specify which colors are available to the end user. I want to be able to also upload textures to be available to the end user as well... at least specify them programmatically somehow.
I thought this would be possible with CSS, but I could not find any examples of it in searching Google. If there is a code snippet somewhere that demonstrates this that would be great. Any help is appreciated!
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
2
- +1
5 Comments
Active today
You have two options.
1. You can use html and css
Method 1
container with style position: relative
two images in the container with position: absolute;
z-index on the image stacks them
Top image is PNG - bottom can be anything
You get an overlay effect
Method 2
Container has image 1 as a background
img 2 is contained in the container
2. Backend merge of png files
Using GD2 library
Example from here imagecreatefrompng
imagecopymerge
imagepng
1. You can use html and css
Method 1
container with style position: relative
two images in the container with position: absolute;
z-index on the image stacks them
Top image is PNG - bottom can be anything
You get an overlay effect
Method 2
Container has image 1 as a background
img 2 is contained in the container
2. Backend merge of png files
Using GD2 library
Example from here imagecreatefrompng
<?php
// Create image instances
$dest = imagecreatefromgif('php.gif');
$src = imagecreatefromgif('php.gif');
// Copy and merge
imagecopymerge($dest, $src, 10, 10, 0, 0, 100, 47, 75);
// Output and free from memory
header('Content-Type: image/gif');
imagegif($dest);
imagedestroy($dest);
imagedestroy($src);
?>
imagecopymerge
imagepng
Active today
A note on the above. The images used in the sample are gifs. If you use PNG's you will need this function
Here is a working sample showing all three methods
function imagecopymerge_alpha($dst_im, $src_im, $dst_x, $dst_y, $src_x, $src_y, $src_w, $src_h, $pct){
// creating a cut resource
$cut = imagecreatetruecolor($src_w, $src_h);
// copying relevant section from background to the cut resource
imagecopy($cut, $dst_im, 0, 0, $dst_x, $dst_y, $src_w, $src_h);
// copying relevant section from watermark to the cut resource
imagecopy($cut, $src_im, 0, 0, $src_x, $src_y, $src_w, $src_h);
// insert cut resource to destination image
imagecopymerge($dst_im, $cut, $dst_x, $dst_y, 0, 0, $src_w, $src_h, $pct);
}
Here is a working sample showing all three methods
Active 6 days ago
If you want to do this with PHP, with respect to "texture" you may be able to achieve what you want (depending on the texture) by applying some kind of ImageFilter() algorithm. There are some basic examples in this article (see Working with Transparent Pixels).
Many of the PHP GD2 library functions include the ability to work with an alpha channel for transparency support, eg: ImageColorAllocateAlpha(). We have an article with an example of its use to add a semi-transparent watermark. Look for "demo/watermark_hotlinked_
Many of the PHP GD2 library functions include the ability to work with an alpha channel for transparency support, eg: ImageColorAllocateAlpha(). We have an article with an example of its use to add a semi-transparent watermark. Look for "demo/watermark_hotlinked_
Active today
greetings Carolyn, , , I have read what you want to do, and you have several things that are dependent on one another as -
"want to be able to also upload textures"
"have images and overlay them with a texture or image"
"specify them programmatically"
AND, you say you need to alter an existing WP plug-in, that is used to -
"add text to an image"
"change the color of the text"
Although I do feel that this can be done, I do not see enough information , especially about the plug-in , to know what the final "Display" (text and images I guess) , may look like for what you need, much less how or what to do to get that result. It would be helpful if the "Code" work for the plug-in was available, and some image or description of the placement and the "Effect" (layered or blending ) of what you call - "overlay them with a texture".
"want to be able to also upload textures"
"have images and overlay them with a texture or image"
"specify them programmatically"
AND, you say you need to alter an existing WP plug-in, that is used to -
"add text to an image"
"change the color of the text"
Although I do feel that this can be done, I do not see enough information , especially about the plug-in , to know what the final "Display" (text and images I guess) , may look like for what you need, much less how or what to do to get that result. It would be helpful if the "Code" work for the plug-in was available, and some image or description of the placement and the "Effect" (layered or blending ) of what you call - "overlay them with a texture".
Thank you all for the snippets and encouragement here. I've been browsing the code looking for the right spot to test these functions. But it is so badly organized that I've had to go through it file by file (the plugin installs in the root of Wordpress!) So as soon as I get a grasp on the authors "structure" I can dig in. So I'll definitely post a new question once I get to it.
The author has made developer "add-on" documentation as well, but it's very vague and his/her first language is not English, so communicating is not working and I'm going to do my best to figure it out.
Thanks again!
The author has made developer "add-on" documentation as well, but it's very vague and his/her first language is not English, so communicating is not working and I'm going to do my best to figure it out.
Thanks again!
Featured Post
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
This article discusses how to create an extensible mechanism for linked drop downs.
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS.
In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses
Course of the Month2 days, 2 hours left to enroll
717 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.