Image rendering docs and scripts (#14613)

* update sponsor script for assets directory

Signed-off-by: Matty Stratton <[email protected]>

* fix hugo version in posh script

Signed-off-by: Matty Stratton <[email protected]>

* Update change sponsor script for assets directory

Signed-off-by: Matty Stratton <[email protected]>

* Fix documentation

Signed-off-by: Matty Stratton <[email protected]>

* Add warning if sponsors not in directory

Signed-off-by: Matty Stratton <[email protected]>

* Update add_sponsors.sh

* Update warning message slightly

Signed-off-by: Matty Stratton <[email protected]>

---------

Signed-off-by: Matty Stratton <[email protected]>

Author: mattstratton

hugoserver.ps1

@@ -5,4 +5,4 @@ $MyPath = $PSScriptRoot
 
 docker stop hugo-server
 docker rm hugo-server
-docker run -tip 1313:1313 -v $(pwd):/home/circleci/project:cached -e HUGO_THEME=devopsdays-theme -e HUGO_BASEURL="http://localhost:1313" --name hugo-server --entrypoint "" cibuilds/hugo:0.123.2 hugo server --watch --bind ""
+docker run -tip 1313:1313 -v $(pwd):/home/circleci/project:cached -e HUGO_THEME=devopsdays-theme -e HUGO_BASEURL="http://localhost:1313" --name hugo-server --entrypoint "" cibuilds/hugo:0.126.1 hugo server --watch --bind ""

themes/devopsdays-theme/layouts/partials/sponsors.html

@@ -83,6 +83,7 @@ <h4 class="sponsor-cta">{{ $level.label }} Sponsors</h4>
                     {{- $imagefile := $imageresource.Fit "300x300 webp Lanczos q100" -}}
                     <img src = "{{ $imagefile.RelPermalink }}" alt = "{{ $s.name }}" title = "{{ $s.name }}" class="img-fluid">
                   {{- else -}}
+                  {{- warnf "No image file found in assets directory for %s. Please copy it to %s for best performance." .id $assetdir -}}
                     <img src = "/img/sponsors/{{ .id }}.png" alt = "{{ $s.name }}" title = "{{ $s.name }}" class="img-fluid">
                   {{- end -}}
                 </a>

utilities/README.md

@@ -20,7 +20,7 @@ Use [add_new_event.sh](add_new_event.sh) to add a new event. This is year-specif
 1. The script will create a data file for your event in `data/events/yyyy-city.yml`. This is where you will configure many of your updates and customizations. In particular, you need to list your local organizer team here.
 1. The script will populate your event directory in `content/events/yyyy-city` with default content. You should edit it as desired.
 1. The script will add or update your entry in `static/_redirects`. This allows you to use the url `https://devopsdays.org/city-name` to point to your current-year event.
-1. Once you have created a logo graphic, place it in `static/events/yyyy-city/logo.png`. (The file MUST be called `logo.png`.) The sample welcome page has a commented-out element to display a logo named in this way. For front-page use, you also need a square version in `static/events/yyyy-city/logo-square.jpg`.
+1. Once you have created a logo graphic, place it in `assets/events/yyyy-city/logo.png`. (The file MUST be called `logo.png`.) The sample welcome page has a commented-out element to display a logo named in this way. For front-page use, you also need a square version in `assets/events/yyyy-city/logo-square.jpg`.
 
 ## Google Analytics
 
@@ -30,7 +30,7 @@ If you have set up a Google Analytics v4 or newer account for tracking your spec
 
 ### Event Square Logo
 
-To customize the logo that appears on the root of devopsdays.org, place a square file (jpg format only) in `static/events/yyyy-city`. It must be named `logo-square.jpg` and should be at minimum 300px x 300px, but optimally should be 600px x 600px. Note that in the preview (without gulp processing), non-square files will appear to be okay. However, once processed for production, they will be stretched to be square.
+To customize the logo that appears on the root of devopsdays.org, place a square file (jpg format only) in `assets/events/yyyy-city`. It must be named `logo-square.jpg` and should be at minimum 300px x 300px, but optimally should be 600px x 600px. Note that in the preview (without gulp processing), non-square files will appear to be okay. However, once processed for production, they will be stretched to be square.
 
 ### Reference Content
 
@@ -94,7 +94,7 @@ See [Pivotal logo update](https://github.com/devopsdays/devopsdays-web/pull/6501
 Use [add_sponsors.sh](add_sponsors.sh) to easily add new sponsors. (Only do this if the sponsor doesn't already exist.)
 
 1. Sponsors need a file in the data directory, as such: `data/sponsors/sponsorname.yml`. Before creating a new one, look to see if there is an old one, possibly with a date prepended. If it has the right URL and logo, you should use it instead of creating a new one.
-1. Put the images for your sponsors in the `static/img/sponsors` directory. They need to be PNG files and named exactly after the name of the sponsor in your event file (and the corresponding sponsor data file), i.e., `static/img/sponsors/sponsorname.png`.
+1. Put the images for your sponsors in the `assets/sponsors/FIRST_INITIAL/` directory. They need to be PNG files and named exactly after the name of the sponsor in your event file (and the corresponding sponsor data file), i.e., `assets/sponsors/s/sponsorname.png`.
 1. Add the new sponsor to your event's datafile with the appropriate level.
 
 See [contrib/make_sponsors.rb](make_sponsors.rb) for another option.
@@ -115,7 +115,7 @@ All logos will be resized at release time, to 200px wide. Versions for high-dens
 
 See the example local organizer team members listed in the generated data file found in `data/events/201?-yourcity.yml`. To generate the  `team_members: ` section you can use [add_organizers.sh](add_organizers.sh).
 
-The organizer photo must be in JPG format, and should be a minimum 300px x 300px, but optimally 600px x 600px. These images should be placed in the `static/events/yyyy-city/organizers` directory (which the `add_organizers.sh` script will do).
+The organizer photo must be in JPG format, and should be a minimum 300px x 300px, but optimally 600px x 600px. These images should be placed in the `assets/events/yyyy-city/organizers` directory (which the `add_organizers.sh` script will do).
 
 Any PRs adding a new local organizer will need to be accompanied by an email to `[email protected]` with their full name and email address. We merge the PR at the same time as adding them to email lists and Slack, so if you aren't ready to send that email, merging your PR will be delayed until we have that info.
 

utilities/add_organizers.sh

@@ -78,9 +78,9 @@ read -p "Enter path to organizer image as jpg (return to skip): " organizerimage
 [ -z "${organizerimage}" ] && organizerimage=''
 
 if [ $organizerimage ]; then
-  cp "$organizerimage" ../static/events/$event_slug/organizers/$organizer_slug.jpg
+  cp "$organizerimage" ../assets/events/$event_slug/organizers/$organizer_slug.jpg
 else
-  echo "Put organizer image at ../static/events/$event_slug/organizers/$organizer_slug.jpg before creating the pull request, if desired."
+  echo "Put organizer image at ../assets/events/$event_slug/organizers/$organizer_slug.jpg before creating the pull request, if desired."
 fi
 
 ####################

utilities/add_speakers.sh

@@ -98,17 +98,17 @@ string_replace "ABSTRACT" "${abstract}" "${talkfile}"
 #
 
 # if speaker image is already in expected location
-if [[ -f "../static/events/$event_slug/speakers/$speaker_slug.png" ]] ; then
+if [[ -f "../assets/events/$event_slug/speakers/$speaker_slug.png" ]] ; then
   string_replace "image = \"\"" "image = \"${speaker_slug}.png\"" "${speakerfile}"
   echo "found ${speaker_slug}.png, using"
 else
   read -p "Enter path to speaker image PNG: " speakerimage
   if [[ -n "${speakerimage}" ]] && [[ -f "${speakerimage}" ]] ; then
-    cp -v "${speakerimage}" "../static/events/${event_slug}/speakers/${speaker_slug}.png"
+    cp -v "${speakerimage}" "../assets/events/${event_slug}/speakers/${speaker_slug}.png"
     string_replace "image = \"\"" "image = \"${speaker_slug}.png\"" "${speakerfile}"
   else
     echo "no image used.   If desired:
-      1. Copy PNG into ../static/events/${event_slug}/speakers/${speaker_slug}.png
+      1. Copy PNG into ../assets/events/${event_slug}/speakers/${speaker_slug}.png
       2. update ${speakerfile}, changing image = \"${speaker_slug}.png\"
       before creating your Pull Request.
       "

utilities/add_sponsors.sh

@@ -33,6 +33,7 @@ echo "Adding new sponsors; use CTRL+C to stop..."
 # Gather info
 read -p "Enter sponsor name: " sponsorname
 sponsor_slug=$(echo $sponsorname | tr '-' ' ' | tr -dc '[:alnum:][:blank:]' | tr '[:upper:]' '[:lower:]'| tr 'āáǎàãâēéěèīíǐìōóǒòöūúǔùǖǘǚǜü' 'aaaaaaeeeeiiiiooooouuuuuuuuu' | tr ' ' '-')
+sponsor_initial=$(echo "${sponsor_slug}" | cut -c 1)
 
 # set default sponsor yaml file
 sponsorfile="../data/sponsors/$sponsor_slug.yml"
@@ -67,9 +68,12 @@ fi
 # Set logo
 
 if [ $logo ]; then
-  cp "$logo" ../static/img/sponsors/$sponsor_slug.png
+  if [ ! -d ../assets/sponsors/$sponsor_initial/]; then
+    mkdir -p ../assets/sponsors/$sponsor_initial/
+  fi
+  cp "$logo" ../assets/sponsors/$sponsor_initial/$sponsor_slug.png
 else
-  echo "Set the sponsor logo at ../static/img/sponsors/$sponsor_slug.png before submitting PR."
+  echo "Set the sponsor logo at ../assets/sponsors/$sponsor_initial/$sponsor_slug.png before submitting PR."
 fi
 
 echo "Add this to ../data/events/"$year"/"$city_slug"/main.yml under sponsors:"

utilities/change_sponsor_logo.sh

@@ -13,7 +13,7 @@ source common_code
 SPONSOR_NAME=${1:-}
 IMAGE_TO_COPY=${2:-}
 TODAY=$(date +%Y%m%d)
-
+SPONSOR_INITIAL=$(echo "${SPONSOR_NAME}" | cut -c 1)
 # Make sure we have everything we need to run.
 
 if [ $# -ne 2 ]; then
@@ -22,7 +22,7 @@ if [ $# -ne 2 ]; then
   exit 1
 fi
 
-IMAGE_FILE="$(gitroot)/static/img/sponsors/$SPONSOR_NAME.png"
+IMAGE_FILE="$(gitroot)/assets/sponsors/$SPONSOR_INITIAL/$SPONSOR_NAME.png"
 if [ ! -f "$IMAGE_FILE" ]; then
   echo "Couldn't find a sponsor image at $IMAGE_FILE."
   exit 1
@@ -41,10 +41,12 @@ fi
 
 # Start by copying the existing definitions as the "old" definitions
 
-OLD_IMAGE_FILE=$(gitroot)/static/img/sponsors/$SPONSOR_NAME-before-$TODAY.png
+OLD_IMAGE_FILE=$(gitroot)/assets/sponsors/$SPONSOR_INITIAL/$SPONSOR_NAME-before-$TODAY.png
+OLD_STATIC_IMAGE=$(gitroot)/static/img/sponsors/$SPONSOR_NAME-before-$TODAY.png
 OLD_SPONSOR_FILE=$(gitroot)/data/sponsors/$SPONSOR_NAME-before-$TODAY.yml
 
 cp "$IMAGE_FILE" "$OLD_IMAGE_FILE"
+cp "$IMAGE_FILE" "$OLD_STATIC_IMAGE"
 cp "$SPONSOR_FILE" "$OLD_SPONSOR_FILE"
 
 # Find all events with this sponsor in years other than this year, excluding existing renames
@@ -60,6 +62,7 @@ done
 popd > /dev/null
 
 # Put the new image in place.
+
 cp "$IMAGE_TO_COPY" "$IMAGE_FILE"
 
 # Modify any archived events.