Im wondering if it is possible to overlap 2 images using CakePHP. What Im trying to do here is make default image (a pin drop in googlemap) with a head and an anchor. If the user uploads an images, it will put the uploaded image in the head of the pin drop. Any help is appreciated.
What Ive done so far is display the uploaded image in the google map but it replaces the whole pin drop.
It needs a solution using simply CSS z-index property. PHP has nothing to do with the style you want to apply.
Use the following syntax-
<img src="img1.jpg" style="z-index:1; position:absolute;" width=200 height=200>
<img src="img2.jpg" style="z-index:2; position:absolute;" width=100 height=100>
Here img2.jpg will appear above img1.jpg. The higher the z-index value the more outer the element will appear.
Related
I am in the process of building a new site using wordpress 4.6.1. Out of the box it supports responsive images.
I have created a new theme and have simply added the loop to display the post content.
When I insert an image into a post it displays the image correctly but it isn't responsive i.e. it does not serve a different image dependant on the browser size.
The image HTML generated is as follows:
`<img
width="1110"
height="740"
src="http://digitaltestsite2.biz/wp-content/uploads/2016/08/Feature-Story-1110x740.jpg"
class="attachment-large size-large wp-post-image"
alt="Feature Story"
srcset="
/wp-content/uploads/2016/08/Feature-Story-1110x740.jpg 1110w,
/wp-content/uploads/2016/08/Feature-Story-600x400.jpg 600w,
/wp-content/uploads/2016/08/Feature-Story-768x512.jpg 768w,
/wp-content/uploads/2016/08/Feature-Story-250x167.jpg 250w,
/wp-content/uploads/2016/08/Feature-Story-500x333.jpg 500w,
/wp-content/uploads/2016/08/Feature-Story-350x233.jpg 350w,
/wp-content/uploads/2016/08/Feature-Story-700x466.jpg 700w,
/wp-content/uploads/2016/08/Feature-Story.jpg 1200w
"
sizes="
(min-width:1199px) 1110px,
(min-width:991px) 768px,
(min-width:767px) 590px,
(min-width:543px) 500px,
295px
"
`
(N.B. I have added a filter for the sizes attribute to enable more breakpoints.)
If I remove the width and height the image is responsive but wordpress seems to be generating this so I dont believe I should have to remove it.
I have tried and replicated this in both Chrome and Firefox.
Does anyone have any suggestions as to whether this is the correct behaviour and/or if I am doing anything wrong?
Thanks in advance for any input.
Testing this stuff can be tricky. For one, once Chrome (and I think Firefox and Safari, too) have a resource that is larger than they need in the cache, they will not load smaller ones over the network. For two, sizes can be fiendishly complex to mentally model...
Fixing it by removing width and height makes no sense, as I believe the parsed sizes size trumps the width when it comes time to determine layout width, and which resource to load out of the srcset.
I suggest:
Try clearing your cache between tests
Even if that solves it... whenever you're doing anything with responsive images feeding your page into https://ausi.github.io/respimagelint/ is always a good idea!
I am trying to compile a pinterest style layout for my site. And have accomplished it, other then the load times. I have set about to get the load of my site as fast as possible.
To do so, I have come across the lazy load script (as can be found here: http://www.appelsiini.net/projects/lazyload) which essentially loads the site first, and then the images, thus speeding up the usability of the site on load, similar to what pinterest does..
The issue I have been having is, while the script works, because we have a box around each image to style and present it, and undefined sizes on the images, the layout comes out all messed up every time. Essentially, the image sizes are always surprising the layout once they load.
What is the best way about going about fixing this problem? What does pinterest do? Similar to them, we have images of all shapes and sizes, that will be added dynamically to our site by users via both php and javascript, so simply figuring out all the sizes of each image ourselves is not something we can do.
Thanks for your help!
Pinterest most likely has measured the images and stored the image dimensions in there database. Then simply output the height within the img tag, width is not dynamic as its set by CSS
First a set rule in css controls the width of the image (this wont change):
.pin .ImgLink img
{
max-width: 192px;
opacity: 1;
}
.PinImageImg
{
min-height:75px;
background-color:#f2f0f0
}
and then the HTML markup of each img tag controls the height (this changes for each image):
<img src="http://media-cache-ec5.pinterest.com/upload/177118197817236677_8RujApQy_b.jpg" alt="Moon Goddess Gown by Halston Heritage" data-componentType="MODAL_PIN" class="PinImageImg" style="height: 288px;" />
This way there is no popping of layout as each image is loaded by javascript.
I am not experienced outside of HTML and CSS.
I have a site on a less well known CMS called Ushahidi. Editing CSS is fine but right now I need to change an img selection. Currently, an image on a page has the code:
<a class="photothumb" rel="lightbox-group1" href="http://trashswag.com/media/uploads/35_1_1347312096.jpg"><img src="http://trashswag.com/media/uploads/35_1_1347312096_t.jpg"></a>
I need to remove the ability of the site to use the second image (note there is a slight difference "_t.jpg" is appended to the second src.
How would I alter the site so as to select the first image only i.e. remove the "_t" string?
The version of the image with the _t in the name is probably a thumbnail of the first image. What you have there is a small image, that when clicked takes you to a larger image. If you want to display the full-sized image and get rid of the link, just use
<img src="http://trashswag.com/media/uploads/35_1_1347312096.jpg">
I have this code :
<div class="images_liste_plante_solo">
<div class="image_liste_plante">
<img alt="Hosta - Eternal Flame" src="images/eternal_flame_miniature.jpg"/>
</div>
<div class="image_liste_plante">
<img alt="Hosta - Eternal Flame" src="images/eternal_flame-2_miniature.jpg"/>
</div>
<div class="image_liste_plante">
<img alt="Hosta - Eternal Flame" src="images/eternal_flame-3_miniature.jpg"/>
</div>
</div>
I will have a variable number of pictures like this, because the number of pictures depends of my PHP database. I can also echo out the directory of the fullscreen size picture and can choose what is the max size (if they are enough big to reach it) of all pictures.
So, I will need that when we click on the picture, that it enlarge it with a fullscreen gallery over the page that darken what is behind, a bit like when we want to enlarge pictures in facebook. It will only use the images with a class of "image_list_plante" and it will use my echoed link to the fullscreen image for each images (maybe this link could be echoed in an invisible div). Also, I will echo (in the invisible div) a boolean which decide if you can right click on the picture or not. I will even echo text that will be placed under or over the picture. The invisible div will be inside each "image_liste_plante" divs and after or before the picture. I can put classes to these invisibles divs if needed, etc...
How do I do that ? hard question. I know nothing about JavaScript and jQuery and others... The only things I know, it's HTML/CSS/PHP/PDO.
Do a plugin that I can modify and adapt is already built ? for the moment, I will only put a link to a .jpg file on the pictures.... but it can't stay like this too long.
*Will need to work in IE7 and other browsers too.
Finally, i used a plugin called "colorbox". It opens an iframe over the page according to it's link. The page in the iframe know which plant's images to show by using the $_GET vars from the generated link. In this iframe, i needed to code a secure database connection defined by the $_GET elements. it counts the nuber of pictures, paginate them and everything. Thanks to myself !
I am developing a web site. For this I want to place an image over another image. I will explain.
Start a td which have width: 1101px. Here I placed an image with img tag (logo of my web site). Width of image is 1101px on the left topside of the image (over the image) I want to place another image. It's not possible to place the logo image as background, because it must have alt tag. I know the div method with absolute position. But it's not a good solution. While changing the resolution it’s (top image) alignment is not constant.
Use this to do it...
<td>
<div style="position:relative;">
<img style="position:absolute;top:0px;left:0px;" />
</div>
</td>
The resolution won't mess this up.. The image is absolute, only relative to the div..
it should work, without any problems :)
is what you currently have similar to this?