Tweet
It would depend also on the width of the elements, or if the containing element has enough room for it (within its margins, paddings, etc.). It might be easier for us to say what's wrong if you can show us the actual page.
-
-
images flowing left to right in results with title and description under each image
Hey, here's my search_template. What I'm looking for is to have the images flow horizontally and down and for the title and description of each image to be under the image. I'm really confused as to what should be "inline" or "block" or floating left.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<style type="text/css">
.highlight { font-weight: bold; }
.searchheading { font-size: 130%; font-weight: bold; text-align: center;}
.summary { font-size: 80%; font-style: italic; }
.suggestion { font-size: 100%; }
.results { font-size: 100%; }
.category { color: #999999; }
.sorting { text-align: right; }
.result_title { font-size: 100%; text-align: center; display: block; }
.description { font-size: 100%; color: #008000; text-align: center; display: inline;}
.context { font-size: 100%; }
.infoline { font-size: 80%; font-style: normal; color: #808080;}
.zoom_searchform { font-size: 100%; display: block; }
.zoom_results_per_page { font-size: 80%; margin-left: 10px; }
.zoom_match { font-size: 80%; margin-left: 10px;}
.zoom_categories { font-size: 80%; }
.zoom_categories ul { display: inline; margin: 0px; padding: 0px;}
.zoom_categories li { display: inline; margin-left: 15px; list-style-type: none; }
.cat_summary ul { margin: 0px; padding: 0px; display: inline; }
.cat_summary li { display: inline; margin-left: 15px; list-style-type: none; }
input.zoom_button { background: #CC9900; }
input.zoom_searchbox { background: #99FFCC; }
.result_image { margin: 5px; width: 200px; float: left; }
.result_image img { margin: 5px; width: 200px; border: 0px; }
.result_block { margin-top: 15px; margin-bottom: 15px; display: inline; }
.result_altblock { margin-top: 15px; margin-bottom: 15px; display: inline; }
.result_pages { font-size: 100%; clear: left;}
.result_pagescount { font-size: 100%; }
.searchtime { font-size: 80%; }
.recommended
{
background: #DFFFBF;
border-top: 1px dotted #808080;
border-bottom: 1px dotted #808080;
margin-top: 15px;
margin-bottom: 15px;
}
.recommended_heading { float: right; font-weight: bold; }
.recommend_block { margin-top: 15px; margin-bottom: 15px; clear: left; }
.recommend_title { font-size: 100%; }
.recommend_description { font-size: 100%; color: #008000; }
.recommend_infoline { font-size: 80%; font-style: normal; color: #808080;}
.recommend_image { float: left; display: block; }
.recommend_image img { margin: 10px; width: 80px; border: 0px; }
</style>
</head>
<body style = "background: #CCCCFF;" onload="if (document.getElementById('zoom_searchbox')) {document.getElementById('zoom_searchbox').focus() ;}">
<!--ZOOM_SHOW_FORMSTART-->
<!--ZOOM_SHOW_HEADING-->
<!--ZOOM_SHOW_SEARCHBOX-->
<!--ZOOM_SHOW_SEARCHBUTTON-->
<!--ZOOM_SHOW_RESULTS-->
<!--ZOOM_SHOW_FORMEND-->
</body>
</html>Comment
-
The earlier instructions were for disabling all the text results (titles, descriptions) and only using images. You have no images however, and have purely text results, so its different.
I presume you want a grid of boxes for the search results. In which case, you need to define some specific width and height for each result (previous example relied on the images having set dimensions).
So something like this:
Change the width and height to fit the results. Hope that helps.Code:.result_block { margin: 15px; display: block; float: left; width: 200px; height: 400px;} .result_altblock { margin: 15px; display: block; float: left; width: 200px; height: 400px; }Comment
-
I do have images!
Hey - a little confused. I am searching by image and Zoom is currently finding image files in my .php pages and is finding images linked to pages via meta data. My results page using the search template above does deliver images in the results page.
I need to know how to group images like in the previous example mentioned but with the title and description below the image. If this is possible I haven't figured out a way to do it by only modifying the template. Please help!
Thanks,
Sam TComment
-
Thanks Admin ... would it be possible to include it in the RSS output?Comment
-
This was a pretty old post (6 years old in fact) related to an old release of the software.
What was it you wanted included?
We are working on V7 at the moment. We aren't going to go back and add anything to V5.Comment
Comment