Forum

Questions and discussions

Template Modification

Discuss template's customization

Template Modification

Postby arabiansoura » Fri Mar 25, 2011 7:14 am

Dear All,
I'm trying to work on the new template 16, Would like to add additional components, as per the attached image. The demo site is here http://arabiansoura.com/index.php
Image

The current problem i'm facing.
    The main rotary image size is dynamic, I would like to have a fixed size, 656 W and 276 height, no matter what kind of image orientation and size, I need this size to be displayed in the home page.
I tried setting the big thumbnail size to above dimension but its not working. Any help will be very appreciated.

    Problem 2: In the same layout, I wanted to display the image price for different size, I copied the following code from another template $1XS, $2S, $3M etc it is showing in the home page but the green or blue buttons are missing. I dont find these buttons in any image gallery to copy it to template image gallery. What is the solution?

    Third Problem, Social Media, I would like to add these social media icons as shown in the image, any suggestions.
arabiansoura
 
Posts: 25
Joined: Tue Jan 04, 2011 8:32 am

Re: Template Modification

Postby arabiansoura » Fri Mar 25, 2011 10:50 pm

No body has ideas how to fix this issue????
arabiansoura
 
Posts: 25
Joined: Tue Jan 04, 2011 8:32 am

Re: Template Modification

Postby funmediapicture » Mon Mar 28, 2011 2:04 pm

Hello arabiansoura,

I have read your post yesterday. I will give you a little help for
your problems.

First to problem 2

I have found also not this images in my templates. But this is not
a problem. You can download this images from antons preview section.
Go to the template and open this demo by click on the image.

The link for the demos from anton:
http://www.cmsaccount.com/photostore/customization/

I have insert the links to these images.

Black
http://demo.photostorescript.com/templates/template14/images/s11.gif

Green
http://demo.photostorescript.com/templates/template14/images/s12.gif

Orange
http://demo.photostorescript.com/templates/template13/images/r10.gif


Greetings
Alfred
funmediapicture
 
Posts: 73
Joined: Tue Apr 27, 2010 2:45 pm

Re: Template Modification

Postby arabiansoura » Tue Mar 29, 2011 9:22 pm

Dear Alfred Thanks for the help, the team was so helpful that they sent me a personal email to help me out. Now this is what i call client relationship and client service. Since they have sent me the fix, I will post it here so other can make use of it.

To add the rate graphics all you have to do is you should add the styles into /templates/template[n]/style.css file:
#home_price
{
margin-left:13px;
padding-bottom:35px;
clear:both;
height:88px;
}

#home_price ul
{
list-style:none;
margin:0px;
padding:0px;
}

#home_price li
{
display:inline;
margin:0px;
padding:20px 28px 26px 27px;
background: url(images/s11.gif) no-repeat;
font: 25pt Arial;
color: #FFFFFF;
float:left;
text-align:center
}


#home_price span
{
font: 8pt Arial;
color: #e1e1e1;
display:block;
text-align:center;
font-weight:bold;
}

#home_price li.price_green
{
background: url(images/s12.gif) no-repeat; }


and not to forgot to copy images too

Still waiting to fix the first problem of Big Thumbnail.
arabiansoura
 
Posts: 25
Joined: Tue Jan 04, 2011 8:32 am

Re: Template Modification

Postby funmediapicture » Thu Mar 31, 2011 6:21 pm

Hello arabiansoura,

to your question about the rotary image. There are different
ways to change this. The easiest way are give the div in the
box_home.tpl the size: width: 656px; height: 276px

So you have a fixed width and height. Now we must stretch the
image that this fixed width and height are filled out.

We give the image: width: 100%; height: 100%

This changes are made in the box_home.tpl

Here the new code:

<div class='component' style="width: 656px; height: 276px"><a href="{URL}" id="{LINKNAME}" name="{LINKNAME}"><img style="width: 100%; height: 100%" src="{IMAGE}" border="0" alt="{TITLE}" {LIGHTBOX} id="{IMGNAME}" name="{IMGNAME}"></a></div>

If you will you can the width and the height insert in the class
component. So you can take the normal box_home.tpl with only the
change with the width: 100%; height: 100%. for the image.

The code:

<div class='component'><a href="{URL}" id="{LINKNAME}" name="{LINKNAME}"><img style="width: 100%; height: 100%" src="{IMAGE}" border="0" alt="{TITLE}" {LIGHTBOX} id="{IMGNAME}" name="{IMGNAME}"></a></div>

.component {
margin: 5px;
width: 656px;
height: 276px;
}

I have it short tested ( not the css entry ) and i hope it is work for you.
Note this is the easiest way when you insert only this component and
needed not other components. This box_home.tpl gillt for all.

I look forward to your feedback.

Greetings
Alfred
funmediapicture
 
Posts: 73
Joined: Tue Apr 27, 2010 2:45 pm

Re: Template Modification

Postby arabiansoura » Fri Apr 01, 2011 9:03 pm

Dear Alfred,
Thanks for your help, it fixed the issue, but have encountered a new one, first of all my previous post have disappeared from this post :-)

The new problem is the image is stretching, I was expecting it to be enlarge proportionally or show some part of the image, but in a clear professional manner, Well is there a way to correct this issue, (or may be a separate module or component, just like other stock agencies are doing.)

In setting i have changed the dimension of the big thumbnail, but still its not effected. Well since i'm not a person with coding skills, i will look forward in this forum.

Alfred, are you interested in freelance? Like to fix some small issues of my site?
arabiansoura
 
Posts: 25
Joined: Tue Jan 04, 2011 8:32 am

Re: Template Modification

Postby nikonan » Sat Apr 02, 2011 4:37 am

arabiansoura wrote:... just like other stock agencies are doing


I'm looking for same setting for home.tpl too. I want to easily display featured images with wide size (e.g. 600 x 200)

I wish I can create {component_n} with M or L size picture > feature it > then display it at homepage.
Recommendation:
Bring your photostock business to the NEXT level. Must have!
nikonan
 
Posts: 25
Joined: Tue Apr 06, 2010 4:06 am

Re: Template Modification

Postby funmediapicture » Sat Apr 02, 2011 7:53 am

Hello arabiansoura, hello nikonan,

thank you for your response. I will look what can I do and give you a notice.

I work at the moment at my own script and make also for me some changes
so i can help. I am also not the biggest programmer. I have good basic knowledge.

The best way for changes is a post in the forum. So can everybody help or
modify the code.

Greetings
Alfred
funmediapicture
 
Posts: 73
Joined: Tue Apr 27, 2010 2:45 pm

Re: Template Modification

Postby arabiansoura » Sat Apr 02, 2011 10:06 am

Dear Alfred,
I have upgraded to the new version 11.03, since I have made many changes to template file, I'm still using the old template, but i see there are some issues after upgrade, The google map navigation is on top navigation, and its showing the normal google map, what is the use of google map?

Second i need to add home button to top navigation, how could i do this. And another major issue is formatting, why am I not able to format the text pages?????
arabiansoura
 
Posts: 25
Joined: Tue Jan 04, 2011 8:32 am

Re: Template Modification

Postby funmediapicture » Sat Apr 02, 2011 6:19 pm

Hello arabiansoura,

in this post i will give you another Instruction for the gallery photo.
There are a lot of changes. You can make a COMPONENT for this and
the photos are not streched. The div in the template is invisible the
bigger photo as the div width and hight. We create a thumb3.jpg
and display this photo in the gallery.



1.) admin/function/functions.php

Search:

function photo_resize($photo_in,$photo_out,$photo_vars)

Replace it with this ( I have marked the changes ):

Code: Select all
//Get resizes photo thumb1; thumb2
function photo_resize($photo_in,$photo_out,$photo_vars)
{
global $site_thumb_width;   // Small thumb width
global $site_thumb_height;  // Small thumb height

global $site_thumb_width2;  // Big thumb width
global $site_thumb_height2; // Big thumb height

// Freddy BOF
global $site_thumb_width3;  // Gallery home.tpl thumb width
global $site_thumb_height3; // Gallery home.tpl thumb height
// Freddy EOF

   if(file_exists($photo_in))
   {
      $size = getimagesize ($photo_in);
 
      $wd1=$site_thumb_width;
      $wd2=$site_thumb_width2;
                // Freddy BOF
                $wd3=$site_thumb_width3;
                // Freddy EOF
 
      if(isset($size[1]))
      {
         if($size[0]<$size[1])
                        {
                        $wd1=$size[0]*$site_thumb_height/$size[1];
                        $wd2=$size[0]*$site_thumb_height2/$size[1];
                        // Freddy BOF
                        $wd3=$size[0]*$site_thumb_height3/$size[1];
                        // Freddy EOF
                        }
                }
   
           if($photo_vars==1)
           {
      easyResize($photo_in,$photo_out,100,$wd1);
           }
   
           if($photo_vars==2)
           {
      easyResize($photo_in,$photo_out,100,$wd2);
           }
                // Freddy BOF
                if($photo_vars==3)
           {
      easyResize($photo_in,$photo_out,100,$wd3);
           }
                // Freddy EOF
   }
}



2.) admin/function/functions.php

Search the settings entrys like this:

Code: Select all
if($rs->row["setting_key"]=='model' and $rs->row["activ"]==1){$site_model=true;}
if($rs->row["setting_key"]=='show_model' and $rs->row["activ"]==1){$site_show_model=true;}
if($rs->row["setting_key"]=='flash' and $rs->row["activ"]==1){$site_flash=true;}


and insert under the last entry the following new lines:

Code: Select all
// Freddy BOF
// Needed for gallery home.tpl
if($rs->row["setting_key"]=='thumb_width_gallery_home_tpl'){$site_thumb_width3=$rs->row["svalue"];}
if($rs->row["setting_key"]=='thumb_height_gallery_home_tpl'){$site_thumb_height3=$rs->row["svalue"];}
// Freddy EOF



3.) Create new settings entrys in the database ( in phpmyadmin )

Code: Select all
INSERT INTO `settings` VALUES (920, 'Gallery photo thumb width', '700', 0, 'thumb_width_gallery_home_tpl', 920);
INSERT INTO `settings` VALUES (921, 'Gallery photo thumb height', '700', 0, 'thumb_height_gallery_home_tpl', 921);



You can see this two input fields in admin/Settings/Site Settings bottom. The ids are very high
so we have no problems with antons entries.

If this are ready we can change the thumb width or hight and have the data to integrate this
in the upload file. This makes a new thumb like: thumb3.jpg in the size as we have the
entry in Settings.



Now we must insert in the upload file the code, that this thumb are created.

Here I have at the moment only modified for the test the admin/bulk_upload/photo_upload.php

Search this line:

//create thumbs and watermark

Here we have two photo_resize entrys and one publication_watermark_add

The two photo_resize makes the thumb1.jpg and the thumb2.jpg
The one publication_watermark_add makes the watermark for thumb2.jpg

Here we must add the following new line under the last photo_resize:

// Freddy BOF
photo_resize($_SERVER["DOCUMENT_ROOT"].$photo,$_SERVER["DOCUMENT_ROOT"].site_root.$site_servers[$site_server_activ]."/".$folder."/thumb3.jpg",3);
// Freddy EOF


If you will the thumb with watermark then add under the one publication_watermark_add
the new following line:

// Freddy BOF
publication_watermark_add($id,$_SERVER["DOCUMENT_ROOT"].site_root.$site_servers[$site_server_activ]."/".$folder."/thumb3.jpg");
// Freddy EOF

If you look now in the folder ( FTP ) on the server you must have now three thumbs

thumb1.jpg
thumb2.jpg
thumb3.jpg ( new )

We have now ready the first part.




The next part are show this in the home.tpl

4.) admin/Skins/Home page

Here we need a new COMPONENT. That this can work we need a new entry by Content:

admin/home/components.php
admin/home/index.php

Search:

<option value="vector2" <?if($content=="vector2"){echo ............


and insert under this last option:


<option value="photo3" <?if($content=="photo3"){echo("selected");}?>><?=word_lang("photo")?> - home.tpl <?=word_lang("thumbs")?></option>
<option value="vector3" <?if($content=="vector3"){echo("selected");}?>><?=word_lang("vector")?> - home.tpl <?=word_lang("thumbs")?></option>


Now we can create a new COMPONENT Photo - home.tpl thumbs

Insert the new {COMPONENT_XX} in the template home.tpl.


Create a new box_home_gallery.tpl

and insert this code ( I have the css style integrated ):

<div style="margin:0px; width: 656px; height: 276px; overflow: hidden"><a href="{URL}" id="{LINKNAME}" name="{LINKNAME}"><img src="{IMAGE}" border="0" alt="{TITLE}" {LIGHTBOX} id="{IMGNAME}" name="{IMGNAME}"></a></div>


So we have two boxes:

box_home_gallery.tpl = for the gallery photos ( thumb3 )
box_home.tpl = the normal box for the other previews


##### A little change #####

At the moment the div in the box_home_gallery.tpl has the style:

margin:0px; width: 656px; height: 276px; overflow: hidden

The photo begin is in the top left site. If you will this change you can
insert a new style information for this. The value 700 are only a demo.
You can this make smaller for you. Test it out what is the best size for
you.

I have insert in the box_home_gallery.tpl a style for the image. So you
can move the photo. As example more to the top or more to the right
site.

Here the new code ( insert style at the img tag ):

<div style="margin:0px; width: 656px; height: 276px; overflow: hidden"><a href="{URL}" id="{LINKNAME}" name="{LINKNAME}"><img style="position: relative; left: -0px; top: -50px" src="{IMAGE}" border="0" alt="{TITLE}" {LIGHTBOX} id="{IMGNAME}" name="{IMGNAME}"></a></div>

To change the position change the value: left: -50px; top: -50px;
Exmple: left: -0px; top: -100px;

########################

We have now ready the second part.




5.) That the new COMPONENT are work we must change the members/component.php

Search

if(preg_match("/2/",$rs->row["content"])){$ttt=2;}

and insert under the line this:

// Freddy BOF
if(preg_match("/3/",$rs->row["content"])){$ttt=3;}
// Freddy EOF


That we can change between the boxes search this:

$box=file_get_contents($DOCUMENT_ROOT."/".$site_template_url."box_home.tpl");

and replace it with this:

// Freddy BOF
if($ttt==3)
{
$box=file_get_contents($DOCUMENT_ROOT."/".$site_template_url."box_home_gallery.tpl");
}
else
{
$box=file_get_contents($DOCUMENT_ROOT."/".$site_template_url."box_home.tpl");
}
// Freddy EOF


That was it!

I hope i have nothing forgotten and the install well described.
If you have trouble let me know. I have it short tested.

Greetings
Alfred
Last edited by funmediapicture on Sun Apr 03, 2011 2:04 pm, edited 3 times in total.
funmediapicture
 
Posts: 73
Joined: Tue Apr 27, 2010 2:45 pm

Next

Return to Design & Templates

Who is online

Users browsing this forum: No registered users and 3 guests

cron
  Photo Store Script

Professional php photo stock script and WordPress plug-in for photographers and video producers.

  Support
  CMSaccount Inc.