treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Image rotation by days of the week?

  • Hi, I did multiple searches on the forum but i didn't find any related topics, so please pardon me if this question was asked a lot.

    I have 7 images that I have set for each day of the week, Monday, Tuesday etc for a blog that i'm trying to design. but I think it would be a hassle if i were to use the php made for dates of the month that i found earlier on this site since i have to reassign all images to individual dates. I'm not even sure if php works for blogs because i'm not sure what it is anyway.

    Can anyone guide me? Thanks.
  • I would use the php date function for day of the week:

    /images/header<?php echo date('N'); ?>.jpg

    That will output a number representation of the day of the week: 1 (for Monday) through 7 (for Sunday)

    So header1.jpg would be Monday's header.
  • "AshtonSanders" said:
    I would use the php date function for day of the week:

    /images/header<?php echo date('N'); ?>.jpg

    That will output a number representation of the day of the week: 1 (for Monday) through 7 (for Sunday)

    So header1.jpg would be Monday's header.


    Thanks but I do not quite understand this. Where am I suppose to place this code? In the <head></head> area? And is that the only line required? Where would my image source be placed?

    Would this work?
    /images/header<?php echo date{\"N\"); http://www.linkofimagehere.com>.jpg
  • I'm sorry, I'll simplify:

    Here is basic PHP:

    <?php echo date{\"N\"); ?>

    This will print out a number between 1 and 7 depending on the day of the week: 1 (for Monday) through 7 (for Sunday)

    In general: this is PHP, so it needs to be on a PHP page (not in a .css file)

    So let's say here's the HTML code for my image:

    <img src=\"/folder/image1.jpg\" />


    I make an image for each day of the week and name them:
    image1.jpg
    image2.jpg
    image3.jpg
    image4.jpg
    etc...

    Now I can change my HTML code to:

    <img src=\"/folder/image<?php echo date{\"N\"); ?>.jpg\" />


    And that PHP code will be replaced by a number, completing the call for the image.

    (likewise, this can be done in CSS too:

    <div style=\" background-image: url('/folder/image<?php echo date{\"N\"); ?>.jpg')\">

    etc.
  • Thank you, it seems plausible, but since I'm using this for a blog i can only use images that are hosted on the net itself, like photobucket, I made several images and labeled them with numbers as you suggested but I do not think the code would work like this,

    <img src=\"http://i152.photobucket.com/albums/s165/Manapool/Unvieled-<?php echo date{\"N\"); ?>.jpg\" width=\"100\" height=\"210\" />


    Is it possible to incorporate images from images from the web? or is it strictly to hosted images in our domain only thus it can;t be used on blogs?
  • There is a way around this but the best way would be to host your images somewhere.


    <?php

    $dayNo = date{\"N\");

    If ($dayNo == 1){
    echo \"<img src=\\"http://i152.photobucket.com/albums/s165/Manapool/Unvieled.jpg\\" width=\\"100\\" height=\\"210\\" />\";
    }
    If ($dayNo == 2){
    echo \"<img src=\\"http://i152.photobucket.com/albums/s165/Manapool/anotherpic.jpg\\" width=\\"100\\" height=\\"210\\" />\";
    }
    .........

    ?>


    Just keep that going for 7 days.

    Don't forget to escape the " (speech marks) like \" or php will error.