Search code examples
pythonhtmlcssflaskmaterialize

Materialize CSS Not Showing (Something To Do With Flask)

So, having written some code for file sharing, I have two routes.

@app.route( '/upload/<filename>', methods=['GET', 'POST'] )

and

@app.route( '/gallery', methods=['GET', 'POST'] )

'/gallery' shows all the files in '.../images' folder and returns a list of them as a variable for Jinja to display

'/upload/filename' shows either the file that has been clicked on by the user that was previously at '/gallery', or the directory that has been clicked on.

When a directory is clicked on, a page similar to '/gallery' is shown that contains a list of all the files in '.../images/directory'. This page is identical to 'display_complete_image.html' (the html file shown at '/gallery') except in one way which I know has no effect on whether materialize works or not. This has led me to believe that the problem is with my Flask, not HTML. Here is the code. I'd be delighted if anybody could help

@app.route( '/upload/<filename>', methods=['GET', 'POST'] )
@admin_required
def send_image( filename ):
    if request.method == "POST":
        if request.form.get( 'mobile_site_button', None ) != None:
            session[ 'mobile_site' ] = mobile_site_check( request.form.get( 'mobile_site_button' ) )

    if "." not in filename:
        print ". not in filename"
        return render_template( "complete_display_directory.html", mobile_site=session.get( 'mobile_site' ), logged_in_status=is_logged_in( ), image_names=os.listdir('./images/%s' % ( filename.replace( '|', '/' ) ) ), directory_name=filename )

    elif "|" in filename:
        filename_back = filename[::-1]
        char = filename_back.find( "|" )
        print char

        directory_name_back = filename_back[char::]
        filename_back = filename_back[:char:]

        filename = filename_back[::-1]
        directory_name = directory_name_back[::-1]

        return send_from_directory( "images/%s" % ( directory_name.replace( '|', '/' ) ), filename )

    else:
        return send_from_directory( "images/", filename )

above is '/upload/filename'. It shows the user 'complete_display_directory.html' (a list of the files in the directory they clicked on) OR the file they clicked on. Below is '/gallery'. It shows the user 'complete_display_image.html' (a list of the files in '.../images'). Don't ask me about the naming choices.

@app.route( '/gallery', methods=['GET', 'POST'] )
@admin_required
def get_gallery():
    image_names = os.listdir( './images' )

    if request.form.get( 'mobile_site_button', None ) != None:
        session[ 'mobile_site' ] = mobile_site_check( request.form.get( 'mobile_site_button' ) )

    return render_template("complete_display_image.html", image_names=image_names, mobile_site=session.get( 'mobile_site' ), logged_in_status=is_logged_in( ) )

/Gallery picture (this one is as it should be)'/gallery' Upload/Directory picture (where's materialize!?) '/upload/directory'

Solution

  • It turned out Flask was routing its requests for materialize.min.css to /upload/static/css/materialize.min.css instead of /static/css/materialize.min.css so I did a bit of digging on Stack Overflow and found that I could make Flask access materialize by changing my link href from

    <link href="..static/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection">

    to

    <link href="{{ url_for('static', filename='bootstrap.min.css') }}" rel="stylesheet" media="screen">

    :)