davebeach

Use cases of picture element

##The device-pixel-ratio Use Case

<img srcset="normal.jpg 1x, retina.jpg 2x"
   src="normal.jpg"
   alt="device-pixel-ratio use case" />

davebeach

{# The easiest way to add link to home page and SVG logo is to put the SVG into the active theme directory root named logo.svg.  To have default for browsers that cannot display SVG, see GIST https://gist.github.com/davebeach/064996d9b234c742642f8ca45585139a  - then in the twig block just add the anchor and image elements.  There is a lot of complex settings, by passing the block further down to another content file, but this makes no sense.  The most difficult part is the anchor link, which just set it to /, don't try and is_front until the bugs are worked out with that functionality.  #}

{% block content %}
<div class="container-content region-fixed-content">
    <a class="logo" href="{{ '/' | page }}">
        <img src="{{ logo }}" alt="{{ 'Home'|t }}"/>
    </a>


</div>

davebeach

##svg for drupal 8 logo with png fallback.

Recommendations found at [Blog](http://thoughtfulweb.com/thoughts/on/the-best-way-to-add-an-svg-image-to-your-website/ title="SVG INLINE METHOD") [^2]

1. Must be set up as in-line SVG. In adobe illustrator this is an option when exporting to svg.
2. You need to maniupulate the SVG code, to the the following tags.
3. It is important that you declare xmlns:xlink="http://www.w3.org/1999/xlink" in the svg tag.
4. You can add a CSS class and attempt to style it, note however that I have not been able for this to be adopted by most browsers (more future functionality).

davebeach

GULP Workflow

Steps to set up project.

1. Create project folder. mkdir projectName
2. Initialize npm project. npm init
3. Setup project gulpfile.js:

{

davebeach

##Key Permissions

*OWNER:READ GROUP:READ USER:READ chmod 0444

*OWNER:READ WRITE GROUP:READ USER:NONE chmod 0640

*OWNER:READ-WRITE-EXECUTE GROUP:READ-WRITE-EXECUTE USER:READ-EXECUTE chmod 0775

davebeach

Drupal Important Permission Settings Pre-Install and Post-Install.

Pre-Install or Already Installed but Dumping Database to Reinstall

Create settings.php and the files directory for install.

chmod 644 sites/default/settings.php

chmod -r 755 sites/default

davebeach

ImageMagick Workflow via Command Line

Install - Global

Mac OS X

brew install imagemagick

For LiNUX Cloud Server Command Line

apt-get install imagemagick

davebeach

Various Twig Tips and Tricks

Content

Content Without Title Field

It is possible to pass the content without the title printing. Without title:``` {{ content|without('field_title') }}

With title:```
{{ content| }}

davebeach

Procedure to Recover Instance

Moving Persistent Disk to Another Instance To Regain Access

Procedure for Google Cloud

• Create a snapshot of your instance’s persistent disk. Using the Google cloud console, create a snapshot of the instance. Console Instructions for Snapshot Example: Instance name is disk-bitnami-drupal-dm-3d36. Name the snapshot - snapshot-1

• Create a new persistent disk from this snapshot. From the gcloud console for the project execute command:

davebeach

Misc Commands

• To remove a entry from Known_hosts in .ssh directory

ssh-keygen -R hostname

ssh-keygen -F myhost         # shows myhosts's line in the known_hosts file
ssh-keygen -l -F myhost # additionally shows myhost's fingerprint