I am pulling two different variables from the database. A name, and an image path. I want to display this on the page to look like this:
|Image 1|Image 2|Image 3|
|Name 1 |Name 2 |Name 3 |
I currently have this code:
<?php do { ?>
<img src="<?php echo $row_UserInfo['image_path'];?>" width="150" height="150"/>
<a href="HorseProfile.php?recordID=<?php echo $row_UserInfo['id']; ?>"style="color:#000000; text-decoration: none; text-align: center;">
<?php echo $row_UserInfo['Name']?></a>
<?php } while ($row_UserInfo = mysql_fetch_assoc($UserInfo)); ?>
I tried to add a break after the image so that the name goes right under it, but then when the next image appears, it goes next to the name before. I know this is probably extremely simple, but this has been a problem for me for a while and if someone could open my eyes and show me what I'm doing wrong, that would be deeply appreciated.
You should enclose your image and link in a div, and then float the div. Here is an example:
<?php do { ?>
<div style="float:left;">
<div>
<img src="<?php echo $row_UserInfo['image_path'];?>" width="150" height="150"/>
</div>
<div>
<a href="HorseProfile.php?recordID=<?php echo $row_UserInfo['id']; ?>"style="color:#000000; text-decoration: none; text-align: center;">
<?php echo $row_UserInfo['Name']?>
</a>
</div>
</div>
<?php } while ($row_UserInfo = mysql_fetch_assoc($UserInfo)); ?>
Related
I am using custom template in wordpress. This is the code
<a href="<?php echo get_category_link($cat->term_id); ?>">
<img class="home-img" src="<?php echo z_taxonomy_image_url($cat->term_id); ?>" />
<p><?php echo $cat->cat_name; ?></p>
</a>
</div>
<?php endforeach; ?>
which is displaying category with category images like this Screenshot1.
I want to display the text on the image not below the image.
Change the position of the paragraph:
p {
margin-top: -50px;
width: 100%;
text-align: center;
}
I am retrievieng from a query 4 rows.
This rows recover the id (to set the href), the image path and the title.
For example the code for the first row is:
<div class="row">
<div class="col">
<a href="id">
<img src="file">
<p class="titulo-noticia">The title</p>
</a>
</div>
<div class="col">
<a href="id">
<img src="file">
<p class="titulo-noticia">Another title</p>
</a>
</div>
</div>
I achieve this using:
echo "<div class='table'>"
for($i=0;$i<2;$i++){
echo "<div class='row'>"
for($j=0;$j<2;$j++){
echo "<div class='col'>"
echo "<a href='id'>
<img src='file'>
<p class='titulo-noticia'>".$title."</p>
</a>"
echo "</div>"
} //end col loop
echo "</div>"
} //end row loop
echo "</div>"
CSS is:
.col{
display: table-cell;
}
.row{
display: row;
}
.table{
display: table;
}
Is this the correct way to show a 2*2 matrix of php content? Or there is a better way using css?
Thank you.
I don't think there's really a best way, but here's another way with CSS. Basically just echo out all your query results into one container div without worrying about rows. Display each result in a div with float: left and width: 50% and they'll make their own rows.
<div class="matrix">
<?php while ($row = however_youre_fetching_them()): ?>
<div class="cell">
<a href="<?= $row['id'] ?>">
<img src="<?= $row['path'] ?>">
<p><?= $row['title'] ?></p>
</a>
</div>
<?php endwhile ?>
</div>
And the CSS
.cell {
height: 100px;
width: 50%;
float: left;
}
Setting a constant height on the cells should ensure that the rows line up properly.
You over-complicating this.
You need to do it by chunks, array_chunk() perfect for that:
foreach(array_chunk($array, 2) as $chunks){
//<div class="row">
foreach($chunk as $chunk){
//<div class="col"></div>
}
//</div>
}
I have a link in the following div, it code is,
<?php _e('More', 'isis'); ?>
Now, I want to make the whole div a hyperlink. Please guide me. Thanks. The whole code is below,
<div class="midrow_blocks_wrap">
<i class="fa <?php echo of_get_option('block1_logo'); ?> fa-3x icon"></i>
<a href="#">
<div class="midrow_block">
<!--We need to make this div a link -->
<div class="mid_block_content">
<h3><?php echo of_get_option('block1_text'); ?></h3>
<p><?php echo of_get_option('block1_textarea'); ?></p>
</div>
<?php if ( of_get_option('block1_link') ) { ?><?php _e('More', 'isis'); ?><?php } ?>
</div>
</div>
<div class="shadow"><img src="<?php echo get_template_directory_uri(); ?>/images/service_shadow.png" alt="<?php the_title_attribute(); ?>" /></div>
</div>
A lot of the time when I'm trying to make a hyperlink fill a whole div I give the div a position: relative and the hyperlink a position: absolute; width: 100%; height: 100%; left: 0; top:0; I developed this because wrapping a whole div in a hyperlink can be screwy.
It is usually much easier to do it that way. If you give a z-index: 9 or some higher number you will cover most of your base for the div and then if you need other links or content in there you'll need to do a higher z-index.
Just a thought.
I want to show the image title when hovered to the image connected to mysql using php.
Here are the code I used.
<div class="galleryko">
<?php $data = mysql_query("SELECT * FROM tbl_gallery_featured")?>
<div class="lalagyan1">
<?php while($row = mysql_fetch_assoc($data)):?>
<div class="lalagyan">
<div id="wew">
<img src="admin/featured/<?php echo $row['photo']?>" style="width:150px; height: 150px;"/></br>
</div>
</div>
<?php endwhile?>
</div>
</div>
Then I tried to insert a TITLE inside the code of
<img src="admin/featured/<?php echo $row['photo']?>" style="width:150px; height: 150px;"/></br>
But when I hover the images after I did, what happened was, all images are entitled with SOMETEXT, Now I want to show the TITLE of an IMAGE seperately.
Some one please solve my problem,. Thank you in advance! :)
Remove title="SOMETEXT" and add something like this to img tag alt="$row['title']"
<img src="admin/featured/<?php echo $row['photo']?>" style="width:150px; height: 150px;"/>
I can't align my post thumbnail to left. Is it to be declared in CSS or what?? I used the following code but it didn't work:
<!--This section is currently pulling category ID #1, and can be switched by changing the cat=1 to show whatever category ID you would like in this area.-->
<div class="featured">
<h2>Featured Category</h2>
<!--This is where the thumbnails are found for the homepage bottom section - note the custom field name for this image is "thumbnail". Recommended image size is 70x70, as the stylesheet is written for this size.-->
<?php $recent = new WP_Query("cat=1&showposts=3"); while($recent->have_posts()) : $recent->the_post();?>
<?php if( get_post_meta($post->ID, "thumbnail", true) ): ?>
<img style="float:left;margin:0px 10px 0px 0px;" src="<?php echo get_post_meta($post->ID, "thumbnail", true); ?>" alt="alt text" />
<?php else: ?>
<img style="float:left;margin:0px 10px 0px 0px;" src="<?php bloginfo('template_url'); ?>/images/thumbnail.jpg" alt="Default thumbnail" />
<?php endif; ?>
<b><?php the_title(); ?></b>
<?php the_content_limit(80, ""); ?>
<div style="border-bottom:1px dotted #AFAFAF; margin-bottom:10px; padding:0px 0px 10px 0px; clear:both;"></div>
<?php endwhile; ?>
<!--This is where you can specify the archive link for each section.-->
<b>More Featured Category Posts</b>
</div>
please study the code and give me suggestions
Can you give the URL for this so we can see? Inline styles are bad - instead, try applying a CSS class and then define the margin and float.
I assume something is overwriting the float:left;