jkeck

<!-- Example: http://stanford.edu/~jkeck/sw-search.html -->
<form action="http://searchworks.stanford.edu/" method="get">
  <label for="q">SearchWorks</label>
  <input type="text" name="q" id="q" />
  <input type="submit" value="Search" />
</form>

jkeck

svg {
  width: 100px;
  border-radius: 50%;
  background:yellowgreen; 
  transform: rotate(-90deg);
}
 
circle {
  fill: none;
  stroke-width: 32;

jkeck

require 'faraday'

conn = Faraday.new(url: 'http://localhost:3000') do |faraday|
  faraday.request  :url_encoded
  faraday.response :logger
  faraday.adapter  Faraday.default_adapter
  faraday.request :multipart
end

conn.post do |req|

jkeck

In order to support IIIF cropping of multi-image objects (which is currently supported in a non-IIIF way), we'll need to use IIIF manifests. Storing a list of info.json URLs will not be sufficient since the URL typically contains the file name of the item (at least in our case). This is potentially volatile in the case of remediations that changes file names. A IIIF manifest has references to the images contained within an object (as well as unique identifiers that we can use that will not change during remediation). This will require some changes that are outlined below.

Persisted Data

Currently we persist the URL to the masthead/thumbnail image itself (the act of submitting a crop selection for a masthead/thumbnail causes a fetch of the full image and does the image cropping server side). We still want to persist a URL to an image so we don't have to hit the IIIF service to get the cropped image URL, however we will need to persist some other data from the IIIF manifest to ensure that we're referencin

jkeck

'.source.ruby':
  'initialize':
    'prefix': 'init'
    'body': """
      def initialize($1)
        $2
      end$3
    """
  'require':
    'prefix': 'req'

jkeck

<div>
  <span>Current breakpoint:</span>
  <b class="d-sm-none">XS</b>
  <b class="d-none d-sm-inline d-md-none">SM</b>
  <b class="d-none d-md-inline d-lg-none">MD</b>
  <b class="d-none d-lg-inline d-xl-none">LG</b>
  <b class="d-none d-xl-inline">XL</b>
</div>