Magazeen tema – problem sa prikazom thumbova i riješenje

Magazeen tema – problem sa prikazom thumbova i riješenje

Ovo je tekst za ljude koji imaju problema sa Magazeen temom. Da budem precizniji, sa prikazom thumbova na naslovnoj i ostalim stranicama, koristeći timthumb skriptu.

Vidio sam Magazeene temu na www.smashing.com i odmah mi se svidjela, i to je baš bila tema kakva mi je trebala za ovaj blog. Instalacija na mom lokalnom serveru je prošla bez problema, ali kada sam podigao temu na ovaj server timthumb jednostavno nije proizvodio thumbnailove i to je izgledalo otprilike ovako:

magazeen-problem-fig1

Pročitao sam sve komentare na orginalnoj stranici i pokušao nekako pronaći riješenje problema, pošto orginalne dokumentacije za ovu temu nema, morao sam pogledati što drugi ljudi kažu o tome. Ali ništa nije pomoglo, uobičajeni savjeti su bili, CHMOD 777 na cache mapu, postavljanje linkova u Image custom field, itd. To sam naravno sve napravio, ali ništa nije pomoglo.

Provjerio sam i postavke svog servera da vidim dali zadovoljavam uvjete za skriptu, server vrti PHP 5.nešto i GD 2.3.4 ili tako nešto, što je više nego dovoljno za pokretanje ove skripte.

Problem je bio čudan i iz tog razloga što je timthumb zapravo radio, kada sam otišao u cache mapu vidio sam da je timthumb zapravo kreirao thumbove, i kada bi upisao direktni URL do thumba slika bi se prikazala bez problema, ali se jednostavno nije htjela prikazati u widgetima i na naslovnoj stranici.

Kako nisam uspio riješiti taj problem predloženim savjetima, počeo sam tražiti drugo riješenje. I u toj potrazi naišao sam na skriptu smart image resizer . Ta skripta radi na sličan način kao i timthumb i sada ću opisati kako sam ju implementirao.

Implementacija smart image resizera umjesto timthumba

Download i instalacija smart image resizera

  1. Odite u mapu svoje teme (wp-content/themes/magazeen) i obrišite mapu cache i datoteku timthumb.php
  2. Odite na smart image resizer web site i skinite smart image resizer
  3. Odzipajte datoteku i dobit ćete image.php datoteku , uploadajte tu datoteku u mapu vaše teme (wp-content/themes/magazeen)
  4. U mapi u kojoj se nalazi magazeen tema napravite mapu imagecache i i promjenite joj dozvole (CHMOD 777)

Implementacija skripte

index.php

Zamjenite ovaj kod koji se nalazi u index.php datoteci Magazeen teme

<div class="post-image">

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to 
<?php the_title_attribute(); ?>">
<img src="<?php bloginfo( 'template_directory' ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>
&amp;amp;amp;w=521&amp;amp;amp;h=246&amp;amp;amp;zc=1" alt="<?php the_title(); ?>" /></a>

</div> 

Sa ovim kodom:

<div class="post-image">

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to 
<?php the_title_attribute(); ?>">
<img src="<?php bloginfo( 'template_directory' ); ?>/image.php/
<?php echo get_post_meta( $post->ID, "image_name", true ); ?>?width=521&amp;amp;amp;height=264&amp;amp;amp;cropratio=2:1&amp;amp;amp;image=
<?php echo get_post_meta( $post->ID, "image_value", true ); ?>" alt="<?php the_title(); ?>" />

</a>

</div>

Oko linije 130 Pronaći ćete ovaj kod:

<div class="post-image">

<img src="<?php bloginfo( 'template_directory' ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID,  "image_value", true ); ?>&amp;amp;amp;w=235&amp;amp;amp;h=109&amp;amp;amp;zc=1" alt="<?php the_title(); ?>" />

</div>

Zamjenite ga sa ovim kodom:

<div class="post-image">

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<img src="<?php bloginfo( 'template_directory' ); ?>/image.php/<?php echo get_post_meta( $post->ID, "image_name", true ); ?>?width=235&amp;amp;amp;height=109&amp;amp;amp;cropratio=2:1&amp;amp;amp;image=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>" alt="<?php the_title(); ?>" />

</a>
</div>

Programski kod koji smo zamjenili upravlja prikazom thumbova na prva 2 velika posta i 4 mala dolje. Sada prikazom više ne upravlja timthumb nego image.php

header.php

Sada ćemo promjeniti kod koji upravlja prikazom thumbova u gornjem izborniku (docku), taj kod se nalazi u header.php datoteci u mapi u kojoj se nalazi Magazeen tema.

Zamjenite ovaj kod (linija 77):

<li>

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<img src="<?php bloginfo( 'template_directory' ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>&amp;amp;amp;w=69&amp;amp;amp;h=54&amp;amp;amp;zc=1" alt="<?php the_title(); ?>" />

</a>

<span><?php the_title(); ?></span>

</li>

Sa ovim kodom:

<li>

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<img src="<?php bloginfo( 'template_directory' ); ?>/image.php/<?php echo get_post_meta( $post->ID, "image_name", true ); ?>?width=69&amp;amp;amp;height=54&amp;amp;amp;cropratio=5:4&amp;amp;amp;image=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>" alt="<?php the_title(); ?>" />

</a>

<span><?php the_title(); ?></span>

</li>

Featured news widget – functions.php

Da bi promjenili kod koji upravlja prikazom thumbova u vašem Featured news widgetu moramo promjeniti kod u vašoj functions.php datoteci.

Pronaći ćete ovaj kod počevši od linije 89:

<div class="sidebar-preview">

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<img src="<?php bloginfo( 'template_directory' ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>&amp;amp;amp;w=109&amp;amp;amp;h=60&amp;amp;amp;zc=1" alt="<?php the_title(); ?>" />

</a>
</div>

Zamjenite ga sa ovim kodom:

<div class="sidebar-preview">

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<img src="<?php bloginfo( 'template_directory' ); ?>/image.php/<?php echo get_post_meta( $post->ID, "image_name", true ); ?>?width=109&amp;amp;amp;height=60&amp;amp;amp;cropratio=18:10&amp;amp;amp;image=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>" alt="<?php the_title(); ?>" />

</a>

</div>

Zaključak

Mi smo sada samo zamjenili kod koji je govorio timthumb.php skripti da pravi thumbove, sa kodom koji govori image.php skripti da pravi thumbove. Pošto smo ostavili kod koji govori da se slike učitavaju sa image_value custom fielda, skripta se može koristiti na isti način kao i da radimo sa timthumb.php. Znači:

Počnite praviti novi post

novi-post

Klinknite na Add new u izborniku za postove

Dodajte sliku

02-dodajte

Pritisnite na ikonicu prikazanu na slici, zatim na Select files, odaberite sliku koju želite za thumbnail vašeg posta. Kada se slika podigne dobit ćete nešto slično kao na slici ispod.

03-url

Kopirajte URL slike. I zatim zalijepite taj URL u polje Image koje se nalazi ispod vašeg posta.

04-paste-url

Nakon toga snimite vaš post i pogledajte kako sada izgleda vaša stranica. Nadam se da će vam ovo pomoći da riješite probleme sa thumbovima, kao što je i meni pomoglo. Za sva pitanja koristite sustav komentiranja ispod. Sretno.

Povezani članci

  • http://jošnijegotova damir

    Bok

    Ja sam jedan od onih koji imaju problema sa Magazeen temom i bilo bi super da napišeš i jedan na hrvatskom.

    Usput,već sam poslao upit kako da stavim tekst na SAZNAJ VIŠE -ako ima do sd opisano,molim te da mi samo kažeš gdje da pogledam….?

    Pozdrav

  • Ivan

    Evo Damire, postavljen je tutorial na hrvatskom, nadam se da će ti pomoći.

    Što se tiče drugog pitanja, ako koristiš wordpress saznaj više link dobivaš tako da ispod onog dijela gdje želiš da ti se prekine post i iznad dijela koji je nastavk teksta ubaciš < ! - - more - -> tag, naravno bez ovoliko razmaka kako sam ga ja napisao. Sve što se nalazi ispod tog taga će ti se prikazati kada netko klikne na saznaj više. A mislim da čak imaš i gumb More u editoru postova… ja ga ne koristim pa neznam napamet, ali bi ga svakako trebao imati.

    Pozdrav

  • Steve

    Thanks for this!
    I have a question:
    Is there a way to put the image url (for the thumbnails) to a diferent page? I mean, right now in order to make it work, the image has to be in the upload folder, but I don’t want to be saving lots of images into that folder, so I need a way to put a link to another page, for example, imageshack.us and then the page to be able to put the image on the header and sidebar.
    I hope I explained myself jejeje.
    THANKS!
    Chico Geek

  • Ivan

    @Steve

    honestly Steve I don’t know. Have you tried that? But I think that won’t work, and anyway the thumbs have to be generated on your server. Anyway why don’t you try putting image on another server, and then let me know if it worked.

  • http://bangkit.web.id nanda

    i’ve tried…but, still won’t work…please help me…

  • Ivan

    @nanda

    Hi nanda, so what’s the problem? I can’t help you if you don’t tell me what exactly doesn’t work. It would also help if you could send a link to your site.

  • http://www.wefunction.com liam

    Hi Ivan, it’s Liam, the Designer of Magazeen theme :)

    Nice work! Can I just ask what exactly was the problem in the first place.

  • Steve

    Can you tell me how you implemented the drop down sub menu pages into your page? Thanks!

  • Ivan

    @Steve

    I’ve sent you an e-mail Steve, I’ve explained everything there.

  • Ivan

    @Liam

    Hey Liam, great theme :) !

    I’ve explained the problem in the above text, it is in english :) . But to put it shortly, the timthumb just didn’t work on my server for some reason. It created thumbs and everything but it just didn’t show them. I’m 99% sure it was the servers fault because everything worked fine on my local server.

    Thanks again for this great theme.

    Have a nice day.

  • http://www.cougarmicrobes.com Cougar

    hey buddy,

    I changed the files as you wrote above and also downloaded smart image resizer. sadly i still see the images in url format.

    is there something i need to do from within wordpress? I have added a thumbnail to the post conected to the image url for a few posts.

    I want to switch to this theme soon for my site cos it looks great.

    thanks for your help

  • Ivan

    @Cougar

    you should do this checklist:

    1. Have you made imagecache directory
    2. Have you changed premissions on imagechache to 777
    3. Did you upload image.php to your theme folder
    4. Check if you wrote the code correctly
    5. You should also check if your server is running PHP 5.1.0+ and a newer version of GD library (if steps 1-4 didn’t work, I’m 90% sure that step 5 is what is causing the problem)

    You don’t have to change nothing in wordpress. I hope you will solve this problem, it is a really great theme.

    Have a nice day.

  • http://www.papercartel.com Cassie

    Hi,
    I noticed the header image at the top of your site,h ow did you replace the text with your logo?

  • aj

    hi, thank you.

    for your information you can replace the image_value custom field with the post id

    .jpg

    so you don’t have to put a custom field anymore. It will automatically save it as postid.jpg

  • http://privateaffairselegantoccasions.com Brian Tercero

    I tried this fix, still couldnt get it to work.

    I went through the steps 3 different times, just cant seem to get it to work.

    Do I need to re-do a post to make it generate a thumbnail? Or can I just re-upload an image and give the IMG field the path and update?

    I KNOW I did all these steps right…. any help would be appreciated.

  • http://www.mellowmedium.com Meme

    I followed everything and it works except for the fact that it doesnt resize when i click on the post..

  • http://www.configuracionvisual.com dlv

    thanks for sahre your expirience !
    I’ve tried but it doesn’t work for me.. so i search another solution.
    I search another php image resizer jejee

    So, for people who still having problems with Dock Thumbnails i found a solution…

    Instead of using “TimThumb.php”, I use “imgsize.php” Mike Lopez script (http://tech.mikelopez.info/2006/03/02/php-image-resize-script/)

    Upload “imgsize.php” in the template directory (where “TimThumb.php” was)

    Then, modify the line codes in the index.php, header.php to match with the new script syntax.

    FOR EXAMPLE… in “header.php” where you have:

    “<img src=”/timthumb.php?src=ID, “image_value”, true ); ?>&w=69&h=54&zc=1″ alt=”" />”

    you have to replace that with:

    “<img src=”/imgsize.php?w=69&h=54&img=ID, “image_value”, true ); ?>” alt=”" />”

    You don’t have create a folder with CHMOD 777, it’s not necessary (i didn’t do it and it work fine, by the way i don’t know where image are saved on the fly jejeee)

    Adeux.!
    @dlv_

  • http://blog.matejlatin.com Matej Latin

    Uau… sem imel isti problem z magazeen in po teh navodilih zadeva deluje… 2 dneva sem se muču s to zadevo in zdaj končno deluje… hvala za tako preprosto rešitev… pozdrav iz Slovenije… :)

  • http://beck1.com Harvey

    Hi Ivan

    I have the same question as Steve: Can you tell me how you implemented the drop down sub menu pages into your page? Thanks

  • Ivan

    @Harvey

    Ok Harvey, I’ve gotten a lot of questions about this so I will make a tutorial about this in a day or two.

    Have a nice day

  • http://beck1.com/blog Harvey

    Thx :-)

  • pmax

    hey ivan! i have the same question as cassie. i tried looking for the answer on the smashing site but nobody answered. :(

    i’d like to change the whole header to my own banner. i tried making a .gif based on the size of the original “header.gif” then uploaded the file using cyberduck but that didn’t work :S

    any ideas?

  • http://www.penetrapop.com Nubia

    Hi Thanks for all the help. I did folow all the steps, however it still not working. Now I see a number 04 in each thumbnail, but no ics. I looove this template, but I’m really about to give up on it. What else can i do to make it work?

    thanks

  • Sathish

    Thanks a ton for this work…. I was testing this with xampp image previews never worked, seen your article. This is super cool thanks :)

  • http://devourphoenix.com/staging/ Ben

    I had the same problem with thumbs not showing on the homepage, until I discovered it’s not set up to make thumbs from an image you drop in the post content, but only if you fill in a custom field on each post page which the theme puts there.. that’s how I got it to work anyway.

    I have a separate question, because I’m trying to customize the titles of my sidebar widget, particularly “Featured News” which is included with this theme: but I want the title of my category that I call to appear here, not just “Featured News” – I see you’ve got this working here. Where do I go to edit the widget itself, particularly the text in this sidebar header? (i’m pretty new to WP theming myself)
    Any info would be helpful!

  • Ivan

    @Ben

    I had the same problem with thumbs not showing on the homepage, until I discovered it’s not set up to make thumbs from an image you drop in the post content, but only if you fill in a custom field on each post page which the theme puts there.. that’s how I got it to work anyway.

    Well yes, that’s how it should work, only it didn’t work for some people until they used a smart image resizer. SIR also uses that custom field.

    About the second question: to change that title you have to go to /wp-content/themes/magazeen and then edit functions.php file. around the line 77 you will find something like this:

    < li id="featured-news" >< h5 > Write the desired name here < /h5 > …. and that’s it. Hope this helps.

    Have a nice day.

  • http://www.melonconruido.cl Ariel

    Can anyone upload the correct template?

    Thanks.

  • http://www.haungo.com Hau Ngo

    Hello Ivan,

    I just installed WordPress 2.9.1 the Magazeen template this weekend. I also had issues with the thumbnails not displaying on my home page but I was able to fix that issue without modifying any code.

    After installing the Magazeen template, you need to do is copy the URL of the image that you have added to your media library. It can be found when you first upload a picture (or under Media > Edit Media > File URL.

    Once you have that File URL, then you need to insert that string into the “Magazeen Post Options” window. That window is below the main text window of you “New Post”.

    Once you press “Publish”, then it should appear on your home page.

    I hope that helps any new users that are thinking of installing Magazeen but is afraid changing the code (like myself) :)

    Hau

  • Ivan

    @Hao Ngo

    Thanks, but you’ve just explained how to use the theme. We all know how to do that, that was never the problem.

  • Ab

    Hi Ivan,

    I tried to put the image URL in the custom field image_value… still the thumbnail in the dock doesn’t show up,, i just see the title of the post…

    please help …

  • Ivan

    @Ab

    well Ab, have you read this post?? Are you still using Timthumb or have you followed this tutorial and now use Smart Image Resizer?

  • Ab

    I have read the post,was wondering if something can be done with the existing file,but i will try the image resizer n get back to u…

    thanks :-)

  • Ab

    Awesome it works great…. Thanks Ivan really awesome….

    I have one more question how can i do the same thing in the recent and the featured post…I mean displaying thumbnail with the title of the post in the side bar options of recent and featured tab..???

    thnanks
    Ab.

  • Ab

    hey i got it

    Thanks :-)

  • Ab

    Hi

    my magazeen theme is giving a problem.. When i roll over the images in the dock the text on top does not change

    Please advice??

    Cheer
    Ab.

  • Ab

    Also i get nothing in the featured news tab….. no post at all….

  • Ab

    I have managed to get the fix for both the problems…. Still one error persists When i click on the tab below the posts for other articles(next to continue reading) it does not open the other post ????

    Can anyone help on this please ….

    Ivan please help,I think this is the only problem now left on the site which needs a fix….

    Please help

    Cheers
    Ab.

  • Ab

    Hey Ivan

    No worries I think i fixed it…. I just put all the scripts below the wp_head and it started working

    Thanks for all ur advice n support

    Cheers
    Ab.

    PS:- I think this site is my lucky charm,as soon as i post my query here i identify the fix….

  • Ivan

    @Ab

    Heh, that’s great Ab. Listen, as you can see I also have some problems on this site. It would be nice if you could compile your solutions to the problems you experienced so that we could put them here so that the other people could see it. Or write it on your blog or something. Think about it.

  • http://marinakliska.com Marina

    Cao Ivane,

    Trentuno imam theme: Daily Edition… to je slicno magazeen theme… koji code da stavim u index.php????

  • http://www.onetimepromotions.co.uk/dubclub/ Ben

    Oh i sooooo wanted this to work. I followed all the instructions absolutely to the way you wrote them but it still isn’t working.

    Do you have anymore ideas? Thanks

  • Pingback: Simple Methods od Creating Sedu Hairstyle | Beauty Tips

  • http://belajarsendiri.com George

    I have the same problem with you. Don’t know why this timthumb doesn’t work on my other site. I guess, I’ll try your suggestion. I will comment again, if it’s work

  • http://- Hubertino

    Hi Ivan,

    Thanks for helping out, everything worked fine for me. The images show in the dock and on the homepage. Only one thing still doesn’t work.

    The image inside the post isn’t showing up. It only shows the title, just like when I was using timthumb. Do you have any idea why this isn’t working?

    Thanks for your time!

  • Ivan

    Hi Hubertino,

    I’ve just checked your site. Your page.php or post.php is still using timthumb. Try replacing the code for timthumb with the code for smart image resizer, like shown for index.php file.

  • http://- Hubertino

    Hi Ivan,

    Thanks for your fast reaction, it was the code in the single.php file. I just replaced it with the same code as for the index.php file for line 130.

    Thanks for your help!

  • Ivan

    Great Hubertino,

    glad I could help.

    Have a nice day.

  • KIM

    Hey Ivan!!

    First of all, my congratulations!! It’s an incredible job!!!

    Just a doubt. I’ve installed the theme and I did all your modifications. The result is perfect. I can see all the photos without url in the home… but… when I enter in each specific post the problem still continue… and I only see the url…

    How can I solutionate that problem??

    Thanks a lot!

    KIM

  • KIM

    Hi Ivan!!!

    First of all, my congratulations about the tutorial! It’s an incredible job!!!

    Just a doubt. I continue have a problems with the post image. Your indications have solutinated the home image problems, but when I enter or click into a specific post, I continua see the url…

    How can I solutionate that problem?

    Thanks a lot!!

    KIM

  • Ivan

    Hi KIM,

    check out 2nd comment above yours, form Hubertino. The problem is in single.php. You should put the the same code as in index.php file to single.php file. It should work then. It seams I forgot to put that in this tutoial.

    Have a nice day

  • KIM

    Thank you very much Ivan!!!

    Everything is right now!!!

    :)

  • http://soscubalicious.com So

    Hi Ivan,

    Thank for this post.
    Unfortunately I still couldn’t get it to work in the magazeen theme.
    but thank you for posting an alternative to a problem that a lot of people seem to have, and the only answer seems to be chmod :)

    I’ve been trying to get it running for 2 days now, and I think it’s time to pick another theme!

  • http://www.neody.info/ thank you ivan

    thank you ivan i have this problem with magz theme for a long time :D , but i found this trouble from god hoem page :D

    thank you..thank you..

  • http://www.neody.info/ thank you ivan

    hey ivan, your source stil error maybe..

    loook at the script like

    &amp;

    it must like just

    &
  • http://www.neody.info/ thank you ivan

    sorry for my wrong last comment

    hey ivan, your source stil error maybe..

    loook at the script like

    & amp ; 

    <–replace space with none

    it must like just

    & amp ;

    <–replace space with none

    *sorry for my bad english

  • http://www.1in1out.za.org/ Dave

    I agree with the guy above. This didn’t work for me, until I trouble shooted and played around with the output URL. Taking out the amp; from the url worked a treat. So instead it looks like:

    <img src="/image.php/ID, “image_name”, true ); ?>?width=69&height=54&cropratio=5:4&image=ID, “image_value”, true ); ?>” alt=”" />

    etc

  • http://www.1in1out.za.org/ Dave

    Thanks – by the way for a great post :D

  • http://www.1in1out.za.org Chad

    Great article, thanks author. Just for other people make sure you also do the SINGLE.PHP file.