#1
|
|||
|
|||
![]()
I posted this in hp 0.98 sorry.
Dear friends: As promised, I am working in my picture mods and tabs presentation in hp 1.0 for the joomla 1.5.6 and get some results. You can see here: www.vivaemfloripa.com.br (click on one property). There is a lot to do yest but I think that I will finish most of it till monday. The problem is that the api of joomla 1.5 is very diferent and it takes more time to find all the programming stuff I need because the joomla documentation sucks and has no examples that work (at least regardind tabs stuff). I am porting my stuff from the older site to this new one, where I will have only the RealEstate content and the old site will continues as my personal site. After I do this migration, I will remove all hp from the old site, but I need to test it before in the new site. I am working to pust also the google maps location in the tabbed infos. Cheers. Sergio |
#2
|
|||
|
|||
![]()
hmmm can you not use the standard tabs like "Tabs Carousel Module" and integrate it for HP 1.0?
example With Tabs Carousel Module V 1.0 you can add 5 additional modules positions to each of your slides and present your additional content in WEB 2.0 manner. Youjoomla Tabs Carousel Module V 1.0 is FREE for Youjoomla registered users and is released under GNU License. JED http://extensions.joomla.org/compone...775/Itemid,35/ Demo http://joomla1.0.youjoomla.info/youjoomla_times/ or JoomlaWorks Tabs&slides http://demo.joomlaworks.gr/content/view/30/66/ JED http://extensions.joomla.org/compone...940/Itemid,35/ |
#3
|
|||
|
|||
![]()
Thanks for the clues ssnobben.
In the case of the JoomlaWorks Tabs&slides, I already try to integrate it in my project but it works only as a plugin for joomla content and I could not integrate it to hp. For the Youjoomla Tabs Carousel Module, I'll give a try. I am finishing the port of the stuff I had in hp 0.98 and will post soon the code. Reltive to the tabs using native joomla api, the apearence can be modified usnig css (I am not a good artist). Sergio |
#4
|
|||
|
|||
![]()
Attached is the file default.php with the mods I made.
This file is located at: /components/com_hotproperty/views/property/tmpl/ Remember: backup your original file!! Always!!! Sergio |
#5
|
|||
|
|||
![]()
I want to add the picture mod you did. can you please let me know how to do this. I tried adding in the file you posted but It gave me error messages. I am using 1.5.4, do I need 1.5.6 for your file to work.
Last edited by mattejennings; 09-04-2008 at 01:28 PM. |
#6
|
|||
|
|||
![]()
Dear mattejennings:
What are the error essages? In the first place, don't forget to change at line 344, the google maps api's key to the one for your site. You need to create 3 new extra fields: caption field name 1 - latitude - lat 2 - longitude - lon 3 - Address2 - endereco All these are one line text box. Tey will be used (specially the latitude and longitude), in lines 321 to 327. You can see in the code that, if there are content in the latitude and longitude fields, they are used to geocode the position for the property. It's best to use these because the geocoding by address don't work 100% of the times. To discover the latitude and longitude, I use a map page I have done (you can see it at: www.ssaguiar.com/map).I the upper right side, when you move the mouse, you can see the latitude/longitude. It's cheaper and easier than using a gps device and converting the coordinates. ![]() In line 378 there is this code: Code:
embed src="/includes/js/mediaplayer.swf" The flv player is from: http://www.jeroenwijering.com/?item=JW_FLV_Media_Player The movies for the properties (in my case), are located at /movies/. The movies are named ad the propety id + '.flv' I modified the code so the property id is showed after the name of the property (example: Principal > Casa 3 ou + dorm. > Casa na Praia da Pinheira > ID: 10). If the flv file is not present, I try to load the file '/movies/nomovie.flv' (line 378). You can put any flv file as the nomovie.flv, just informing that there is no movie for this property. For the pictures show: As you can see at line 70 (./xml/'.$this->p->id.'.xml'), I test the presence of a file at folder /xml/ named with the property id + '.xml' located at /xml/. If this file exists, it's used to show the pictures, if not I create it in the code at lines 72 to 96. Again, I am using the excelent 'jw image rotator' from http://www.jeroenwijering.com. I use it to show the images in a fancy way. The xml files are in this format (yu don't have to worry as my code create them, but just to know how the are composed): Code:
<?xml version="1.0" encoding="utf-8"?> <playlist version="1" xmlns="http://xspf.org/ns/0/"> <trackList> <track> <title>Fachada</title> <creator>Sérgio de Aguiar</creator> <location>http://www.ssaguiar.com/components/com_hotproperty/img/std/9_IMG_0577_resize.jpg</location> </track> </trackList> </playlist> I think this is... Please, let me know if it worked for you. Sergio |
#7
|
|||
|
|||
![]() Quote:
This is working in J 1.5 native? rgds |
#8
|
|||
|
|||
![]()
Yes. I just modified this file. This is the file that works to show the properties details (pictures, contact form, agent, details and, in my case, google maps).
It works in joomla 1.5 native mode. For aditional infos, read my today's previous post, where I explain to mattejennings how it works - there are some other thinks to add to hp, like extra fields. If there is any problems, let me know. Sergio |
#9
|
|||
|
|||
![]()
Thanks for the details walk through. I will do my best to get working on the site I am working on. www.norththompsonrealestate.com
|
#10
|
|||
|
|||
![]()
No problem.
If you need any help, please let me know. Sergio |
#11
|
|||
|
|||
![]()
Just in time:
I forgot: there is the css file for the tabbed stuff. As you can see on line 57 of the default.php file: JHTML::stylesheet('tabs.css','components/com_hotproperty/views/property/tmpl/'); This file is caled tabs.css and is located at: components/com_hotproperty/views/property/tmpl/ this file's content is: Code:
dl.tabs { float:left; margin:10px 0pt -1px; z-index:50; } dl.tabs dt { background:#F0F0F0 none repeat scroll 0%; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-top:1px solid #CCCCCC; color:#666666; float:left; margin-left:3px; padding:4px 10px; } dl.tabs dt.open { background:#F9F9F9 none repeat scroll 0%; border-bottom:1px solid #F9F9F9; color:#000000; z-index:100; } div.current { border:1px solid #CCCCCC; clear:both; padding:10px; } div.current dd { margin:0pt; padding:0pt; } ![]() Sergio |
#12
|
|||
|
|||
![]()
Just to help, I am uploading a new version of the file default.php.
The only think that is different in this file is that I have put several comments in the code explainig how it works. The flash players I use can be found at: 1 - For the flv player (movies): http://www.jeroenwijering.com/?item=JW_FLV_Media_Player 2 - For the pictures rotator: http://www.jeroenwijering.com/?item=JW_Image_Rotator Last edited by ssaguiar; 09-05-2008 at 05:34 AM. Reason: changes in file |
#13
|
|||
|
|||
![]() Quote:
"Warning: touch() [function.touch]: Unable to create file ./xml/14.xml because No such file or directory in Hosting Account\components\com_hotproperty\views\property\ tmpl\default.php on line 119 Unable to create: ./xml/14.xml" It seems to be looking for an Xml file that is supposed to be created with the image? Your expertise would be much appreciated! |
#14
|
|||
|
|||
![]()
Dear kevinclark:
Did you create the folder xml in your root directory? If yes, do you have enough permissions to access it (if the server is running Linux, your folder must have, at least, permission 755). Let me know if it worked. Sergio |
#15
|
|||
|
|||
![]() Quote:
It worked like a charm after creating the XML folder in the root directory! I am very pleastd and thankful that you shared this with the community!!!! I had one question, were do you edit the language for the Tabs in the property view? Thanks again Sergio! |
#16
|
|||
|
|||
![]()
Dear kevinclark:
I am glad that it worked. For the language in the tabs (I supose you mean where it's write the titles for each tab - in my case 'Fotos, Detalhes do Imóvel, Corretor, Contato and Localização), you can change them this way: The code for each tab starts with: echo $pane->startPanel('Fotos', 'panel1'); and ends with: echo $pane->endPanel(); In this case, the tab title is 'Fotos'. Just change it to reflect what title you want, and so on for the others tabs. If you need more help, please let me know. Sergio |
#17
|
|||
|
|||
![]()
Sergio,
Yes I played with the Default.php file lastnight and found were to edit the tabs text, Thanks!. I noticed that if I login as a registered agent and delete property pictures and add new ones the old pictures XML files dont get deleted from the XML folder in the root directory. So when i try to view the new replacement photos it shows the old ones. I dont know if i missed something or this is a bug Thanks again. ![]() |
#18
|
|||
|
|||
![]() Quote:
When I made this mod, I didn't think this possibility because it involves to play with the files that create/delete these pictures in administration of hp 1.0. This is harder to do in hp 1.0 than it was in 0.98 because of the all new structure of joomla's new api. If you delete the pictures, you must manualy delete the corresponding xml file, so it will be re-created automatically with the index for the new pictures. Sergio |
#19
|
|||
|
|||
![]()
Sergio,
Thats to bad because agents will have to delete the property and add it again to post new pictures. Hopefully somebody can figure out how to add additional pictures to the slideshow or delete pics without re-creating the listing. But thank you for sharing what you have! On a side note I like the CSS layout of your property listings on your frontpage layout, Is there a CSS file your willing to share for that or other means of obtaining it? Thanks! ![]() Kevin |
#20
|
|||
|
|||
![]() Quote:
I modified the hp's css file. This file is located in: /media/com_hotproperty/css/ and it's named : default.css It's code is: Code:
/* Hot Property's CSS File */ /****** Global Containers ******/ #con_global {width: 540px;} /****** Headings ******/ #heading_Agent, #heading_Co, #heading_Prop, #heading_Type, #heading_Types, #heading_Featured, #heading_Search, #heading_AdvSearch, #heading_Co_Contact, #hp_view_agent_title, #hp_view_agent_contact, #hp_ManageProp, #hp_EditProp { font-size: 12px; font-weight: bold; color: #616161; background-color: #C0C0C0; margin-bottom: 0px; text-align: left; padding-left: 7px; } /****** Borders ******/ #hp_view_agent_con, #hp_emailform_con, #hp_searchresult_con, #hp_view_co_con { background-color: #F4F4F4; border-bottom: 1px solid #C0C0C0; border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0; padding: 10px; text-align: left; } /****** Features ******/ #hp_view_features_title { font-size: 16px; font-weight: bold; color: #616161; text-decoration: underline; margin-top: 16px; margin-bottom: 6px; } /****** Featured ******/ #con_featured1 { width: 532px; } /****** Search ******/ #con_search1 { } #con_search2 { } #con_asearch1 { } #con_asearch2 { } .hp_asearch_row0 { background-color: #FFFFFF; } .hp_asearch_row1 {background-color: #EFEFEF; } #con_sort1 { width: 120px; text-align: left; float: left; } #con_sort2 { text-align: right; display: inline; margin-top: 3px; width: 100%; } #con_sort { height: 23px; background-color: #F5F5F5; padding: 5px 5px 5px 7px; margin-bottom: 6px; border-bottom: 1px solid #C0C0C0; border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0; } /****** Search - Page Counter ******/ #hp_search_pagecounter_top { margin-top: 10px; text-align: center; } #hp_search_pagecounter_bottom, #hp_pagecounter_bottom { margin-top: 5px; text-align: center; padding: 6px; background-color: #F4F4F4; border: 1px solid #C0C0C0; } /****** Front Page - Types ******/ #con_types1 { } #con_types2 { } .con_types3 { float: left; width: 245px; vertical-align: top; padding: 5px; text-align: left; } /****** Listing ******/ #list_agents, #list_searchresults, #list_properties, #list_featured { width: 530px; margin-top: 15px; text-align: left; } /****** Listing - Property ******/ #hp_icons { text-align: right; padding-top: 5px; } .hp_prop { /*width: 513px;*/ width: 520px; display: block; float: left; padding: 1px 1px 1px 1px; text-align: left; margin-bottom: 10px; border-top: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0; border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0; } .hp_details { width:372px; vertical-align: top; padding-left: 8px; float: left; } /****** Type ******/ #con_type1 { } .types_desc { margin-top: 3px; margin-bottom: 5px; } /****** Company ******/ .hp_view_co { } #hp_view_co_photo { float: left; margin-right: 12px; } #hp_view_co_details {min-height: 170px;} #hp_caption_coname { font-size: 16px; font-weight: bold; text-decoration: underline; } /****** Property ******/ #con_hp1 { width: 540px; } #con_hp2 { } .hp_view_details { font-size: 13px; vertical-align: top; padding-left: 7px; padding-top: 10px; text-align: left; border:0px solid #C0C0C0; line-height: 20px; } #standard_photo { } #hp_view_intro_text { line-height: 15px; margin: 7px 0px 0px 0px; } #hp_view_full_text { line-height: 15px; margin: 7px 0px 0px 0px; } .hp_caption {font-weight: bold;} .hp_price {color: #990000; font-size: 13px;} /****** Property -Photo ******/ #hp_view_standard_photo_con1 { text-align: center; background-color: transparent; margin: 10px; } #hp_view_standard_photo_con2 { text-align: center; width: 400px; margin: 0px 50px 0px 50px; background-color: #C0C0C0; padding: 1px; } #hp_view_standard_photo_con3 { text-align: center; width: 100%; background-color: #F4F4F4; } #hp_view_standard_photo_con4 {padding: 5px;} #hp_view_standard_photo_title {font-weight: bold; color: white;} #hp_view_standard_photo_desc { } .hp_view_thumb_con { width: 130px; float: left; padding-top: 0px; text-align: center; margin-right: 12px; display: table; } .img_thumb { width:120px; vertical-align: top; float: left; text-align: center; padding: 0px; margin: 1px 1px 1px 10px; border: 0px solid #C0C0C0; } ul.thumb { margin: 0px; list-style: none; padding: 0px; } ul.thumb li { list-style-position: outside; width: 120px; text-align: center; margin: 0px 0px 6px 0px ; list-style-image: none; background-color: #c0c0c0; padding: 0px; } ul.thumb li a { text-decoration: none; color: #00f; } ul.thumb li a img { } /****** List ******/ .olist { list-style-type: disc; margin: 3px 0px 0px 15px; padding: 0px; text-align: left;} .olist li { padding: 0px; } /****** Agent ******/ #hp_view_agent_photo { padding: 5px; display: inline; float: left; margin-right: 12px; } #hp_view_agent_details {padding: 5px;} .hp_view_agent { font-size: 13px; text-align: left; } #hp_view_agent_desc { margin: 10px 10px 0px 10px; } #hp_caption_agentname { font-size: 16px; font-weight: bold; text-decoration: underline; } /****** Address ******/ #hp_view_addr, #hp_co_addr { margin: 6px; font-size: 11px; line-height: 15px; } /* Links */ a.hp_title:link, a.hp_title:visited { font-size: 15px; font-weight: bold; text-decoration: underline; } a.types_title:link, a.types_title:visited { font-size: 15px; font-weight: bold; text-decoration: underline; } /* Types List of Hot Property */ .types_hp { margin: 3px 0px 0px 0px; padding: 0px; text-align: left;} /* misc */ .clearboth {clear: both;} /* Error - Empty, no property */ #hp_error_empty {text-align: center;} Sergio |
#21
|
|||
|
|||
![]()
Sergio,
Thank You once again for sharing your modified files with the community!!! I seen on your frontpage all the property photos are the same size, my settings in Hot Property back end is set for the images size but Hot Property does not resize different images that are uploaded. I end up getting photos that are of different sizes, which does not look neat. Any Suggestions? I forgot to ask you about the API error I am getting when a user clicks on a listing. I have already replaced my sites API key in the Default.php file but it still kicks back an error whenever a listing is opened. You have been more than enough help! Thanks ![]() ![]() ![]() Kevin |
#22
|
|||
|
|||
![]()
I am pleased to help as much as I can.
In the case of the pictures, I allways take them in landscape mode and in the iggest resolution as possible, and resize them all to 800X600 px, so, when I upload them, hp put them all (thumbs and pictures) with the same proportion. The final pictures sizes can be programmed in the hp backend (control panel's). Regarding the google maps api key, when you create it, you must supply the address of where you will put the map (in this case, your site's address). In my case, I generated the api using 'http://www.vivaemfloripa.com.br'. Try generating the key again - you can do this at: http://code.google.com/apis/maps/signup.html Sergio |
#23
|
|||
|
|||
![]()
Can I use the map feature without using the tabs. I would like to put the map feature after the description. If I can what would the code look like.
Thanks for you help |
#24
|
|||
|
|||
![]() Quote:
Yes, you can. I have done it just to show to you how it will be presented. You just have to copy the code for the map from it's actual place to the end of the default.php file: First, copy move the code for the map from it's actual place, to the end of the file default.php: Code:
<div class="background-color: transparent;"> <div id="gmap" style="width:100%; height:360px; margin-left: auto; margin-right: auto;">Carregando Mapa...</div> <?php $address = ''; $address1 = ''; if (trim($this->p->lat)!="") { if (trim($this->p->lon)!="") { $address = $address1.$this->p->lat.",".$this->p->lon; } } else { if (trim($this->p->endereco)!="") $address1 = $address1.$this->p->endereco; if (trim($this->p->suburb)!="") $address1 = $address1." ".$this->p->suburb; if (trim($this->p->address)!="") $address1 = $address1." ".$this->p->address ; //if (trim($this->p->postcode)!="") $address1 = $address1." ".$this->p->postcode; if (trim($this->p->state)!="") $address1 = $address1." ".$this->p->state; if (trim($this->p->country)!="") $address1 = $address1." ".$this->p->country; $address = $address1; } ?> <script type= "text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAlFVvwx3CoF5SNVcDkK_d_BRs9X2nbm7VOoWSAyihS9Fb5lEgdxT6t9Q4T3Zt3EtIFZIMmUpovnngBw&hl=US"> </script> <script type= "text/javascript"> _mPreferMetric=true; map = new GMap2(document.getElementById("gmap"), {draggableCursor:"crosshair"}); var start = new GLatLng(-27.598368868573615,-48.56523513793945); map.setCenter(start, 14); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.addMapType(G_PHYSICAL_MAP); map.enableGoogleBar(); var marker = new GMarker(start); var geocoder = new GClientGeocoder(); geocoder.getLocations("<?php echo $address; ?>", addToMap); function addToMap(response) { map.clearOverlays(); //alert('<?php echo("/movies/".$prop[0]->id.".flv");?>'); if (!response || response.Status.code != 200) { alert("Desculpe! Endereço inválido!: <?php echo $address ?>"); } else { place = response.Placemark[0]; if (place.AddressDetails.Country.CountryNameCode == "BR") { point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]); map.setCenter(point, 14); marker = new GMarker(point); marker.bindInfoWindow('<object width="200" height="180"><embed src="/includes/js/mediaplayer.swf" width="200" height="180" allowscriptaccess="always" allowfullscreen="false" flashvars="file=<?php if (file_exists("movies/".$this->p->id.".flv")){echo("/movies/".$this->p->id);}else{echo ("/movies/nomovie");}?>.flv&autostart=false&searchbar=false" /></object>'); map.addOverlay(marker); } else { var start = new GLatLng(-27.598368868573615,-48.56523513793945); map.setCenter(start, 14); } } } </script> </div> Code:
echo $pane->startPanel( 'Localização', 'panel5' ); Code:
echo $pane->endPanel(); Code:
echo $pane->endPane(); Code:
<div id="gmap" style="width:100%; height:360px; margin-left: auto; margin-right: auto;">Carregando Mapa...</div> you can change, for example: style="width:100%; to style="width: 500px; Code:
<?php echo $pane->endPanel(); echo $pane->endPane(); /*echo $pane->startPanel( 'Localização', 'panel5' );*/ ?> <br> <b>Localização:</b> <br> <div class="background-color: transparent;"> <div id="gmap" style="width:480px; height:360px; margin-left: auto; margin-right: auto;">Carregando Mapa...</div> <?php $address = ''; $address1 = ''; if (trim($this->p->lat)!="") { if (trim($this->p->lon)!="") { $address = $address1.$this->p->lat.",".$this->p->lon; } } else { if (trim($this->p->endereco)!="") $address1 = $address1.$this->p->endereco; if (trim($this->p->suburb)!="") $address1 = $address1." ".$this->p->suburb; if (trim($this->p->address)!="") $address1 = $address1." ".$this->p->address ; //if (trim($this->p->postcode)!="") $address1 = $address1." ".$this->p->postcode; if (trim($this->p->state)!="") $address1 = $address1." ".$this->p->state; if (trim($this->p->country)!="") $address1 = $address1." ".$this->p->country; $address = $address1; } ?> <script type= "text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAlFVvwx3CoF5SNVcDkK_d_BRs9X2nbm7VOoWSAyihS9Fb5lEgdxT6t9Q4T3Zt3EtIFZIMmUpovnngBw&hl=US"> </script> <script type= "text/javascript"> _mPreferMetric=true; map = new GMap2(document.getElementById("gmap"), {draggableCursor:"crosshair"}); var start = new GLatLng(-27.598368868573615,-48.56523513793945); map.setCenter(start, 14); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.addMapType(G_PHYSICAL_MAP); map.enableGoogleBar(); var marker = new GMarker(start); var geocoder = new GClientGeocoder(); geocoder.getLocations("<?php echo $address; ?>", addToMap); function addToMap(response) { map.clearOverlays(); //alert('<?php echo("/movies/".$prop[0]->id.".flv");?>'); if (!response || response.Status.code != 200) { alert("Desculpe! Endereço inválido!: <?php echo $address ?>"); } else { place = response.Placemark[0]; if (place.AddressDetails.Country.CountryNameCode == "BR") { point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]); map.setCenter(point, 14); marker = new GMarker(point); marker.bindInfoWindow('<object width="200" height="180"><embed src="/includes/js/mediaplayer.swf" width="200" height="180" allowscriptaccess="always" allowfullscreen="false" flashvars="file=<?php if (file_exists("movies/".$this->p->id.".flv")){echo("/movies/".$this->p->id);}else{echo ("/movies/nomovie");}?>.flv&autostart=false&searchbar=false" /></object>'); map.addOverlay(marker); } else { var start = new GLatLng(-27.598368868573615,-48.56523513793945); map.setCenter(start, 14); } } } </script> </div> <?php /* echo $pane->endPanel(); echo $pane->endPane(); */ ?> </div> Sergio Last edited by ssaguiar; 09-10-2008 at 09:17 PM. |
#25
|
|||
|
|||
![]()
Thanks I will test it let you know if I got it working.
|
#26
|
|||
|
|||
![]()
I am having issues with the google map. I finally got the API key issue resolved but the map will not plot the address or lat&long entered in the upload property form, just shows default lat & Long (my area) that i put in the code. I have created 2 extra fields labeled latitude & logitude in HP back end. I have tried multiple approaches and cant get it to plot by Lat & Long or by address. Any help is much appreciated!
|
#27
|
|||
|
|||
![]()
My friend kevinclark:
1 - do the fields in backend have the name (not caption) as lat and lon? 2 - what is the format you are using to inform latitude and longitude of your propery (are you using my map or anoter google maps that can plot the latitude/longitude)? 3 - try to put in place of this code, at line 346: Code:
//alert ("<?php echo $address; ?>"); Code:
alert ("<?php echo "latitude: ".$this->p->lat.", longitude: ".$this->p->lon; ?>"); If they are not in format xx.xxxxxxxx, then they are wrong. Post here the results. I want to help you to make it work. Sergio |
#28
|
|||
|
|||
![]()
Sergio,
After putting in the code you suggested when I opened up the listing I got a Explorer error Latitude XX.XXXXXX, Longitude XX.XXXXXX error. I have know Idea how to fix that. ![]() |
#29
|
|||
|
|||
![]()
And yes I have the name of the field in back end set to Lat & Lon.
|
#30
|
|||
|
|||
![]()
Just give me 10 minutes to test the code...
|
Thread Tools | Search this Thread |
Display Modes | |
|
|