search

valid-void / MAK

website for Museum fuer angewandte Kunst
0 stars 0 forks source link

develop landing page #1

Closed clyptomania closed 3 years ago

clyptomania commented 3 years ago
clyptomania commented 3 years ago

Possible Variation of Generated Grid Visual

Brute Force Layout

by Fabio Franchino / A visual exploration on grid system with creative coding blog codepen link

Perlin Noise Squares

by Jeffrey Gordon demo codepen link

P_1_2_3_05 / Generative Gestaltung

by Benedikt Groß demo github code

clyptomania commented 3 years ago

Apply bootstrap grid for layout page

link to tutorial

clyptomania commented 3 years ago

--- issue #1 --

problems embedding multiple images and generate images via javascript using current code

clyptomania commented 3 years ago

Using PHP to communicate to server

https://privat.albicker.org/blog/2017-02-04-hugo-und-php.html

Link to learn PHP in 15 min

Display all images in a set directory

Link to script - RESOLVED

<!doctype html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Title</title>
        <meta name="language" content="en" />  

        <meta name="description" content="" />  

        <meta name="keywords" content="" />
        <style type="text/css">
            ul li {list-style: none; margin-bottom: 15px;}
            ul li img {display: block;}
            ul li span {display: block;}
        </style>
    </head>
    <body>

    <?php

    // open this directory 
    $myDirectory = opendir("images");

    // get each entry
    while($entryName = readdir($myDirectory)) {
        $dirArray[] = $entryName;
    }

    // close directory
    closedir($myDirectory);

    //  count elements in array
    $indexCount = count($dirArray);

    ?>

    <ul>

        <?php
        // loop through the array of files and print them all in a list
        for($index=0; $index < $indexCount; $index++) {
            $extension = substr($dirArray[$index], -3);
            if ($extension == 'jpg'){ // list only jpgs
                echo '<li><img src="images/' . $dirArray[$index] . '" alt="Image" /><span>' . $dirArray[$index] . '</span>';
            }   
        }
        ?>

    </ul>   

</body>
</html>
clyptomania commented 3 years ago

Mixing PHP into Hugo

Hugo is nice because of its blog template system, static site generation abilities and generic framework structure, but sometimes you may want to add extra functionality that requires dynamic content.

If you are also combining static elements with dynamic functions you may want to DRY your views to make everything consistent. It could be that you only want the blog of your website to be static and everything else to operate dynamically.

read more from Max Böck

  1. Hugo Custom Output Format / Media Types A media type (also known as MIME type and content type) is a two-part identifier for file formats and format contents transmitted on the Internet.

  2. Generate Files in .php using Media Types {{ safeHTML "<?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/views/partials/navigator.php'; ?>" }}

clyptomania commented 3 years ago

How to load all images from a folder to webpage

link to blog

Possible solution

Works both localhost and on live server without issues, and allows you to extend the delimited list of allowed file-extensions:

var folder = "images/";

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                $("body").append( "<img src='"+ folder + val +"'>" );
            } 
        });
    }
});
clyptomania commented 3 years ago

To do until Friday 08.01.2021

Content of landing page

clyptomania commented 3 years ago

To do until Friday 14.01.2021

clyptomania commented 3 years ago

Great CSS Features

clyptomania commented 3 years ago

Final Execution for Landing Page Dev

Styling and Layout

Debugging and Troubleshooting

open questions

latest debuging list

clyptomania commented 3 years ago

Smooth Scroll Compatibility

link to vanilla js solution