Sign Up for OSTraining

Welcome, Guest
Username: Password: Remember me

TOPIC: Custom home page images

Custom home page images 1 year 2 weeks ago #45331

  • annalan
  • annalan's Avatar
  • OFFLINE
  • OSTarlet
  • Posts: 64
  • Karma: 0
Hi,

I`m bit stuck with something that seams to be easy :) I got a my site created in HTML but to make it easier to add blog posts, I decided to convert it to WP. So I`ve found nice theme which I customized with CSS. The most important part however is a home page where I have a cool jQuery slider. I somehow managed to make it by adding custom-home.php with some code from my html page and php functions for footer, etc. It does work but the images are not appearing :( Here is the link to my custom home page I`m working on. I suppose I`m doing something wrong with the path to that images. Can somebody pls advice me how to make them show up?

Thank you

Anna
Enjoy you day :)
Please become a member of OSTraining to reply to this post.

Custom home page images 1 year 2 weeks ago #45340

  • Nick
  • Nick's Avatar
  • NOW ONLINE
  • Administrator
  • Posts: 16825
  • Thank you received: 391
  • Karma: 57
Hi Anna,

Where did you upload your images? Currently, the images are attempting to be found from:
www.annasdesigns.co.uk/wordpress/home-cu...ycle_content_slider/

However, as you can see by going to the link above the folder doesn't exist.

Kind regards,
Nick
Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
Please become a member of OSTraining to reply to this post.

Custom home page images 1 year 2 weeks ago #45349

  • annalan
  • annalan's Avatar
  • OFFLINE
  • OSTarlet
  • Posts: 64
  • Karma: 0
Hi Nick,

I have uploaded the images to www.annasdesigns.co.uk/wordpress/wp-cont...ycle_content_slider/ but in the home-custom.php I got this code:
===============================================================================
<div class="oneByOne">
<div id="slider_one">
<div class="oneByOne_item" style="display:none;">
<img src="www.annasdesigns.co.uk/wordpress/wp-cont...nt_slider/slide1.png" width="600" height="311" class="bigImage" alt="" class="img_hov" data-rel="prettyPhoto[gallery1]" />
<div class="slider_title"></div><p></p>
<a href="websites.html" class="download_btn"></a>
</div>
<div class="oneByOne_item">
<img src="www.annasdesigns.co.uk/wordpress/wp-cont...nt_slider/slide5.png" width="600" height="206" class="bigImage" alt="" class="img_hov" data-rel="prettyPhoto[gallery1]" />
<div class="slider_title"></div><p></p>
<a href="social.html" class="download_btn"></a>
</div>
<div class="oneByOne_item" style="display:none;">
<img src="www.annasdesigns.co.uk/wordpress/wp-cont...nt_slider/slide7.png" width="600" height="353" class="bigImage" alt="" class="img_hov" data-rel="prettyPhoto[gallery1]" />
<div class="slider_title"></div><p></p>
<a href="graphic.html" class="download_btn"></a></div> </div></div>
===============================================================================
So I suppose, I did something wrong with linking but have no idea why :(

Anna
Enjoy you day :)
Please become a member of OSTraining to reply to this post.

Custom home page images 1 year 2 weeks ago #45465

  • edandrea
  • edandrea's Avatar
  • OFFLINE
  • OSTop Dog
  • Posts: 3106
  • Thank you received: 7
  • Karma: 0
It may be the permalinks.

This is where the pictures are.

www.annasdesigns.co.uk/wordpress/wp-cont...ycle_content_slider/

and this one works.
www.annasdesigns.co.uk/wordpress/wp-cont...nt_slider/slide1.png

This is what gets generated when you inspect the element using FireBug.

www.annasdesigns.co.uk/wordpress/home-cu...nt_slider/slide5.png

It looks like you are generating permalinks for the custom page that conflict with the fully qualified link. Can you use relative links in your code, like you did for your background images?

background: url(../images/cycle_content_slider/prev.png

Cheers,
Ed
Please become a member of OSTraining to reply to this post.

Custom home page images 1 year 2 weeks ago #45634

  • annalan
  • annalan's Avatar
  • OFFLINE
  • OSTarlet
  • Posts: 64
  • Karma: 0
Hi Ed,

Thank you for your reply. As you suggested, I did try the relative link ../images/cycle_content_slider/ also /images/cycle_content_slider/ and even added the code <?php bloginfo('template_directory'); ?> or specified the whole path to the file
www.annasdesigns.co.uk/wordpress/wp-cont...nt_slider/slide1.png but none works :(
I'm wondering if that has something to do with the fact that I`m using a custom theme for home page home-custom.php? Perhaps that is why WP automatically adding home-custom folder which doesn`t exist?
Sorry I`m not familiar with WP coding that much :( but i would love to have this slider running.

Anna
Enjoy you day :)
Please become a member of OSTraining to reply to this post.

Custom home page images 1 year 2 weeks ago #45653

  • edandrea
  • edandrea's Avatar
  • OFFLINE
  • OSTop Dog
  • Posts: 3106
  • Thank you received: 7
  • Karma: 0
Hi Anna,

Yes it could be the custom theme. I don't see how you applied it to the home page. Are you using a static page for the home page?

Also check to Settings > General and make sure your WordPress Address and Site Address are set correctly.

Under Settings > Reading - check to see what you have set as the home page. You may have to experiment with that a bit.

You might try an alternate method of inserting the script and creating the custom page. See if you can just use a standard home page with a custom page template.
www.ostraining.com/blog/wordpress/custom...-template-wordpress/

Under Settings > Permalinks set it back to default permalinks and see if the problem goes away. Leave Category Base and Tag Base blank.

Check all those and see if anything makes a difference. I'm thinking it's in the setup somewhere.

We'll track it down.

Cheers,
ed
Please become a member of OSTraining to reply to this post.

Custom home page images 1 year 2 weeks ago #45663

  • annalan
  • annalan's Avatar
  • OFFLINE
  • OSTarlet
  • Posts: 64
  • Karma: 0
Hi Ed,

Thank you so much. I did try all the solutions and nothing :(
The problem my lay in the way I wanted to add the custom home page. So what I did:
- installed the template I liked, which has its own slider www.themeskingdom.com/demo/gallerise/
- amended CSS to make it look like my old HTML page
- because my HTML site has the slider I wanted to keep, I decided to create Custom Page Template (similar way to the one from the article you mention) by mixing the index.html form my static site and index.php from the theme I use. And because of the slider I have kept all the code for header, instead of calling <?php get_header(); ?>
- then I created custom home page and chose the custom template from page attributes - everything working except the images.
I`m not familiar with WP themes, but at first I thought I could easily replace the jquery code of the existing slider to the one from my HTML site. But all I ended up was PHP errors.
Now when I was trying your suggested solutions, I realized that when I will set home page in settings to custom home, the theme will automatically replace the slider to its default. :(
It seems so complicated, perhaps the only solution will be to learn how to build those fancy WP themes from scratch and then add my cool slider :) May be a bit long process though and I need my site asap.
Anna
Enjoy you day :)
Please become a member of OSTraining to reply to this post.

Custom home page images 1 year 2 weeks ago #45666

  • edandrea
  • edandrea's Avatar
  • OFFLINE
  • OSTop Dog
  • Posts: 3106
  • Thank you received: 7
  • Karma: 0
I'm not understanding why this would work this way. It looks like you've done everything right. I've not experienced a phantom directory in the url like this before. home.php is a reserved file name. Try renaming custom-home.php to something unique. Since that's the name of the phantom directory, that could be where it's coming from.

In the meantime maybe you can avoid the problem with this plugin

wordpress.org/extend/plugins/raw-html/

And just use the same script you used in your plain html page.

Here's the codex page that deals with adding java script to a post or page. This might give you a clue as to how to insert a script. codex.wordpress.org/Using_Javascript

This is an odd one.

Let me know if the plugin works for you.

Cheers,
ed
Please become a member of OSTraining to reply to this post.

Custom home page images 1 year 1 week ago #46019

  • annalan
  • annalan's Avatar
  • OFFLINE
  • OSTarlet
  • Posts: 64
  • Karma: 0
Hi Ed,

Thank you so much for the tips. The plugin looks really good and may also help me with the other problem I`ve mentioned in my post about disappearing html code :)

With the slider, I gave up and seek a developer help to replace theme existing slider with my jQuery code. Now it is working fine and they even manage to fix the path on the custom home page. Don`t know how they did it thought. I`m thinking to learn the WP theme development and PHP in future. Do you plan to have some advance course on that? I mean to learn making all those cool and advance themes ?

Best wishes,
Anna
Enjoy you day :)
Please become a member of OSTraining to reply to this post.

Custom home page images 1 year 1 week ago #46032

  • edandrea
  • edandrea's Avatar
  • OFFLINE
  • OSTop Dog
  • Posts: 3106
  • Thank you received: 7
  • Karma: 0
Hi Anna,

Glad you got a resolution to your problem. WordPress themes look like they will be simple, but every developer approaches it with their own point of view, so it's usually more complicated than we think.

You did a good job solving your problem. Keep at it. And yes, we have more advanced WordPress classes in the works. You'll be seeing plenty of new topics both complete courses, and mini-courses that deal with specific topics.

Cheers,
Ed

Please become a member of OSTraining to reply to this post.

Sign Up for OSTraining

Powered by Kunena Forum

Open Source Training is not affiliated with or endorsed by the Joomla, WordPress or Drupal projects.
All product names and trademarks are the property of their respective owners.

Copyright 2013 Open Source Training, LLC. All rights reserved.