Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Phase 1 of Cub Scout Pack Web Site is running. Comments and help with one small issue please.

I have finished the first stage of my main project and obtained access to the proper domain. Please check it out and give me any feedback: http://pack198.org. The server is not running the current version of PHP, so the contact page is not currently working. It does work on another site.

One issue I have is with the size of one picture in the slider. It is too long on larger screens. here is the CSS that controls the picture sizes:

.carousel {
    display: block;
    width: 80%;
    margin: auto;
    max-height: 425px;
    @include clearfix();
    @media screen and (min-width: $med-break) {
        display: inline-block;
        float: left;
        width: 40%;
        margin: 20px;
        height: auto;
    }
}

.slide img {
    max-width: 90%;
    height: auto;
}

I could assign a special class to that one picture and style it separately, but I want to implement a random picture selector in the future and would prefer to have generic classes that work regardless of the orientation of the picture.

I am using Sass. Is it possible to write a formula that implements a different code if the height is larger than a certain size after the .slide img styling?

5 Answers

Nejc Vukovic
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

I would suggest implementing the img files with CSS. img tags are a bit tricky like now.

Creating a div for the image placeholder and then using the background options with the implementation. You have more power over the styling.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

You suggest that even if they are being used in a Slick carosel? Here is the implementation code:

<?php

class Slick
{

    public function slides()
    {
       // Slide 1
        echo "<div class='slide'><img src='img/pics/2015-w-stone/stone2.jpg' alt='The boys at the Willamette Stone' title='Sky, Kellan, and Jack at the Willamette Stone'></div>";
        // slide 2
        echo "<div class='slide'><img src='img/pics/2015-w-stone/w-stone-cache.jpg' alt='The Willamette Stone geocache'></div>";
        // slide 3
        echo "<div class='slide'><img src='img/pics/2015-w-stone/w-stone-boys-with-lid.jpg' alt='The boys with the Willamette Stone geocache lid'></div>";
        // slide 4
        echo "<div class='slide'><img src='img/pics/2015-w-stone/w-stone-lid.jpg' alt='The Willamette Stone geocache lid text'></div>";
        // slide 5
        echo "<div class='slide'><img src='img/pics/2015-shoot/shooters2.jpg' alt='Scouts participating at the Cub Scout Shootout spring 2015'></div>";

    }
}
Nejc Vukovic
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Yeah you can change the php code. Because these are only echoes and not bound to anything specific in PHP.

// Slide 1
        echo "<div class='slide'><div class="slide-img"></div></div>"; // like this and then you use your CSS to target this div -> insert an image and style the heights and all...
        // slide 2
        echo "<div class='slide'><img src='img/pics/2015-w-stone/w-stone-cache.jpg' alt='The Willamette Stone geocache'></div>";
        // slide 3
        echo "<div class='slide'><img src='img/pics/2015-w-stone/w-stone-boys-with-lid.jpg' alt='The boys with the Willamette Stone geocache lid'></div>";
        // slide 4
        echo "<div class='slide'><img src='img/pics/2015-w-stone/w-stone-lid.jpg' alt='The Willamette Stone geocache lid text'></div>";
        // slide 5
        echo "<div class='slide'><img src='img/pics/2015-shoot/shooters2.jpg' alt='Scouts participating at the Cub Scout Shootout spring 2015'></div>";

And then you can check how to style the alt text: External Link

I hope this helps.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Thank you. I will give it a try, although I am not sure how I would be able to programatically change the slides. Maybe through JavaScript....

Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

That would be my solution.

Because you can style them easily and you have more options in CSS.

When you are referring to random pictures you mean that those pics will be taken from folder and randomly displayed or taken out from a DB?

Could you explain further what exactly you want to do with the carousel in the future.

Nejc Vukovic
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Well other way (and this is just for now but you should look into it):

.slick-list // set a height or maybe max-height because your inner carousel div doesn't have height bounds

'cos I checked the site and the when the height isn't set then the img is shown in full ( it's height is much bigger than the others.)

Check the site with DevTools to see what I mean.

Christian Andersson
Christian Andersson
8,712 Points
Christian Andersson
Christian Andersson
8,712 Points

To add to Nejc Vukovic solution, here are a few ways to solve the slider issue.

As was suggested, rather than using img tags for your pictures, use div tags instead and then give each div the picture you want. Like this:

<div class='slide'><div class="slide-img" style="background-image=src('img/pics/2015-w-stone/w-stone-cache.jpg');"></div></div>

To then format each picture correctly, you can use CSS to style how these will be placed inside the slide-div. There are many options, such as if you want it to stretch or zoom, centered or not, repeat or not, etc. Here is what I would do though:

.slide-img {
   width: 100%;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
}

If you don't like the result, have a look for the above properties (size, repeat, position, etc) on the W3Schools site.

Another slightly different approach, which you may find alot easier, is to use the .carousel class that comes with Bootstrap. All you need to do is to download the files and place them inside your working directory, and then import the css and javascript files in your html page. Instructions for how to implement the carousel can be found on the Carousel Page.

As for the contact page, can you show us the html and php codes for that?

Hope this helps!

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

The issue with the contact page is that it is running PHP 5.2. I believe the email plug-in requires 5.4. It works fine on this site where a version of the site with a CSS slider resides.

I like the idea of setting the background within the HTML because I can use PHP to randomly select pictures at a later time. My main goal right now was to get it up and running. I am working on a complex database for tracking badges and progress toward completion that will roll out on phase 2 after I also have user registration.

Christian Andersson
Christian Andersson
8,712 Points

Do you really need an email plugin though? If there is nothing special about it, you can very easily make your own script for sending emails.

Here is a simple example taken from W3Schools:

<?php
 $to = "somebody@example.com";
 $subject = "My subject";
 $txt = "Hello world!";
 $headers = "From: webmaster@example.com" . "\r\n" .
 "CC: somebodyelse@example.com";

 mail($to,$subject,$txt,$headers);
 ?>

The mail() function works on php versions 4.0 and greater.

Also, did my previous answer help you at all?

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I have not had time to play with the code yet, but I think your solution will work well.

As far as email, Treehouse recommends using a code like PHPMailer for security reasons. They have addressed issues within the code. As far as strict need, I am not sure. I ultimately want to be able to send emails to either groups of parents or the entire pack through the web site. But my main push right now is the badge database, which is challenging.

Christian Andersson
Christian Andersson
8,712 Points

PHPMailer is a good idea, I'd recommend it anyday, but if you cannot running because of a php version limitation with your host, I'd stick to mail(). Seems to be like a perfectly acceptable for a simple and small website. Good luck!

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

We will get it figured out. I had an issue with my personal provider a while ago and they upgraded with a phone call. I just got access to the official site yesterday.

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

The end goal, a ways down the road, is to allow registered parents to upload photos from events and have the site automatically update the slider with fresh content. So my solution should be able to be programmed through PHP (preferably). I looks like Christians's solution will allow that.