i have a set of images that i want to show where they are saved into my database as linked, where each images has its thumbs, now i have used limit inquery to show a small number of images where the user needs to go next to show the other, my question is that how can i arrange those images where 4 images in a row and 3 columns
HTML:
<div id="image_container">
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
...
</div>
CSS:
#image_container { width:440px; overflow:hidden; }
#image_container img { width:100px; margin:5px; float:left; display:inline; }
You may need to adjust the sizes; this is the general concept though.
If the images all have the same width then make the container only wide enough for 4 images and float the images left
Otherwise loop through the images and use the modulus operator to test for which image in the row you are on. If you are on an image that should be the first in the row you can clear the floats on that image.
Related
I have a multi templates of contents (strings) stored in a database, some of these strings have images with a defined height and width, some without these attrebutes, and some with invalid attributes values.
I need to pass all these strings over a function that can fix this issue, and set a real width and height attributes based on the real image size, it's easy, i have trubbles doing this and save the image location inside the string without changing it.
example:
before fix:
some text <img src="/images/image.jpg" alt"some alt" /> another some text <img src="/images/image2.jpg" alt="another some alt" width="519" /> agian some text <img src="/images/i.jpg" width="519" height="450" alt="text alt" /> <p> <img src="/images/image2.jpg" alt="another some alt" height="400" /></p>
after fix, all images have width and height
some text <img src="/images/image.jpg" width="530" height"600" alt"some alt" /> another some text <img src="/images/image2.jpg" alt="another some alt" width="519" height"400" /> agian some text <img src="/images/i.jpg" width="519" height="450" alt="text alt" /> <p> <img src="/images/image2.jpg" alt="another some alt" width="800" height="400" /></p>
Thanks
Are all the images meant to be the same size? If so then use a CSS class to set their dimensions as this will override the width and height attributes.
I currently have an info image in a table.
When I hover over the icon it displays the artist description in the tool tip because i have it set up to do so.
<img src='images/info.png' width="20" height="20" title="<?php echo $artist['description']; ?>">
This is my CSS
img[title="<?php echo $artist['description']; ?>"]{
border-radius:50%;
background-color: red;}
It doesnt work. Is there anything I can do?
The following php script is used to load an image from the database! when the image is clicked an enlarged image appears but when i give height and width it remains the same large size! I want to reduce the size of the clicked image to
height=100 and width=100 Though i gave them it did not work
echo'<div class="ienlarger"><a href=../ordering/'.( $row['Image1'] ).' height=100 width=100><img src="../ordering/' .$row['Image1']. '" alt="thumb" class="resize_thumb" /><span>
<img src="../ordering/' .$row['Image1']. '" alt="large" height=500 width=500 /><br />
Copy-1</span></a></div>';
How can achieve this?
The reason why the clicked image isn't 100x100 is because there is no width or height attributes in the a tag. If you think about it, since a tag or anchors can link to all types of documents, including non-image files and non-html files (i.e. it could link to a file download). And in the case of a download, it wouldn't make sense to have a width attribute.
I would suggest if you really want this functionality, you could either create an image 500x500 resolution and create a similar one with a 100x100 resolution....
Or if you can't afford that space, you could create a javascript that does that. For example (not sure if it works):
<div class="ienlarger"><img src="../ordering/<?php echo $row['Image1'] ?>" alt="thumb" class="resize_thumb" />
<span>
<img id="sizable" src="../ordering/<?php echo $row['Image1'] ?>" alt="large" height=500 width=500 /><br />
Copy-1
</span>
<script>
document.getElementById("sizeable").onclick = function(evt)
{
evt.target.width = 100;
evt.target.height = 100;
};
</script>
</div>
This question has been asked many times but none of the solutions are working for me.
I am trying to align three simple images as shown in the image below.
The first image is sized properly but I am having problems re-sizing remaining two images.
I need to re-size these images to 190 x 157 but WordPress always assigns wrong height of 90px.
I have already registered custom thumbnail size but this doesn't work.
add_image_size( 'homepage-slider-image-thumb-big', 190, 157, true );
I have also tried to set the dimensions using CSS but the images are stretched out.
Can anyone please help me with this?
UPDATE: Here's how I am calling the custom size.
echo get_the_post_thumbnail($post->ID, 'homepage-slider-image-thumb-big', array('alt' => $post->post_title));
And here's the mark up generated by above code.
<div class="col-lg-4 top-post-thumbs">
<div class="col-lg-12 post-thumb-big">
<img width="388" height="185" src="http://domain.com/wp-content/uploads/2014/10/10674399254_eb68aaa18b_k-702x336.jpg" class="attachment-388x210x1 wp-post-image" alt="Demo post 23">
</div>
<div class="col-lg-6 post-thumb-small">
<img width="190" height="90" src="http://domain.com/wp-content/uploads/2014/07/FIFA-sponsors-Brazil-2014-702x336-300x143.jpg" class="attachment-190x157x1 wp-post-image" alt="Demo post 1">
</div>
<div class="col-lg-6 post-thumb-small">
<img width="190" height="90" src="http://domain.com/wp-content/uploads/2014/06/falconet-praying-702x336-300x143.jpg" class="attachment-190x157x1 wp-post-image" alt="Demo post 5">
</div>
</div>
Here's the CSS using which I tried to fix this.
.top-post-thumbs img {
width: 388px !important;
height: 185px !important;
}
.top-post-thumbs img {
width: 195px !important;
height: 157px !important;
}
I'm looking for a way to modify a HTML Document based on a number of occurring tags. For example
<img src="" alt="" />1></a>
<img src="" alt="" />1></a>
<img src="" alt="" />1></a>
<img src="" alt="" />1></a>
Must become:
<div>
<img src="" alt="" />1></a>
<img src="" alt="" />1></a>
<img src="" alt="" />1></a>
<img src="" alt="" />1></a>
</div>"
...
That is, for every 4 occurencies of <img> there must be a div tag added to the page. For those of you wondering why I can't simply write this - those tags are dinamically generated via other scripts.
Furthermore, only 1 img might be present, or 1231. However, the PHP script must add <div> tag at the begginig of every first <img>and </div> on every 4th and then another <div>. If there are only 3,2 or 1 instances, then </div> must come after the last one.
Any ideas ?
Please excuse the numerous edits, I was having problem with Firefox not showing the editor.
var tags = $('tag');
var group = new Array();
var i, g = 0;
$.each(tags, function() {
if(i == 4) {
g++;
group[g] = $('<div></div>').appendTo($('body'));
}
$(this).appendTo(group[g]);
i++;
});
Or something similar to that