Sandbox: Difference between revisions

From MoHA Wiki
mNo edit summary
mNo edit summary
 
(40 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{#ask: [[Program name::CATS+]]
| ?Program short description
| format=list
| link=none
| headers=hide
| mainlabel=-
}}
This is the form class for you:
This is the form class for you:


Line 9: Line 19:
</div>
</div>


 
Test


'''Instructions for start page intro box w/ image''' <br>
'''Instructions for start page intro box w/ image''' <br>
Line 31: Line 41:
'''The following CSS was added to the stylesheet for this element'''
'''The following CSS was added to the stylesheet for this element'''
<pre>
<pre>
/* start page intro image setup */
.moha-start-section {
.moha-start-section {
   display: grid;
   display: grid;
Line 36: Line 47:
}
}


.moha-start-section img {
.moha-start-section > p {
margin-bottom: 0;
}
 
.moha-start-section .image img {
   object-fit: cover;
   object-fit: cover;
   max-width: 100%;
   max-width: 100%;
   height: 100%;
   max-height: 430px;
   padding: 0;
   padding: 0;
   margin: 0;
   margin: 0;
  float: right;
}
}
</pre>
</pre>
Line 53: Line 69:
As first steps we recommend  
As first steps we recommend  
*Joining the [[Newsletter_MoHA|MoHA newsletter]]
*Joining the [[Newsletter_MoHA|MoHA newsletter]]
*Signing up for [[Open_Calls|open call list]]  
*Signing up for [[Volunteer_Opportunity|open call list]]  
*Saying hello on [[Discord]]
*Saying hello on [[Discord]]
<br>
<br>
Line 63: Line 79:
</div>
</div>
</div>
</div>
<img src="[[File:Moha-img-test.jpg|thumb]]" alt="test" role="presentation">
[[File:Moha-img-test crop.jpg]]
</div>
</div>


Here is the quicklink class:
Here is the quicklink class:
Line 80: Line 95:
Java Script Page
Java Script Page
https://moha.wiki/MediaWiki:Common.js
https://moha.wiki/MediaWiki:Common.js
External Redirect
<nowiki>{{#externalredirect: WEBSITE GOES HERE}}
</nowiki>
To edit an external redirected page, use <nowiki>https://moha.wiki/w/index.php?title=PAGE NAME GOES HERE&action=edit</nowiki>
Testing a different way to share jotforms.
<a href="javascript:void(window.open('https://form.jotform.com/231806252064147','blank','scrollbars=yes,toolbar=no,width=700,height=500'))">Open Call - Wizard Registry</a>
Labeled Section Transclusion
<nowiki>{{#lst:articleX|chapter1}}
</nowiki>
{{#lst:About|Staff}}
Import CSV - https://moha.wiki/Special:ImportCSV
# 1) Use Overwrite existing content for new pages and complete replacement of the imported events
# 2) Use Overwrite only fields contained in the file can be used if you upload a single column (the CSV need to be modified then to include the title and only the columns for import)
# 3) Skip - like 1) but prefers the wiki version, rather than Airtable one
# 4) Probably useless in your context Append to existing content: you don't want two instances of the same event on one page.
Batch Upload - https://moha.wiki/Special:BatchUpload
Embed Video - https://www.mediawiki.org/wiki/Extension:EmbedVideo

Latest revision as of 20:14, May 19, 2024

The Collaborative Art + Technology Situation (CATS+) is a residency and community program that encourages thoughtful, critical, creative engagement with technology. The CATS+ Residency Program groups cohorts of artists and tech wizards to learn together, make new projects, and share their process. We host collaborations, artist-led workshops, hangouts, public showcases, and a wiki to remove the mystery from tech and make magic together.


This is the form class for you:

Test

Instructions for start page intro box w/ image
A good option for this is to use the CSS Grid. https://css-tricks.com/snippets/css/complete-guide-grid/

I've marked the necessary HTML and CSS with comments in the Codepen for reference. https://codepen.io/Nick-Sergent/pen/mdQKbaZ

The gist: The client will need to add the image within the "moha-start-section" div of the Artist Start page. Keep in mind that this needs to be after the "moha-start-section-content" div. This will place the text content and image next to one another in the "moha-start-section" div. We then use CSS to set those elements in a grid structure and define column widths that make it responsive for different screens.

That is this line: grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

If the client would like to adjust the breakpoint at which the text content and image break onto two lines they can change the pixel value in that line.

If the client needs a more detailed explanation of what's going on, this article explains the responsive CSS. https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/

The following CSS was added to the stylesheet for this element

/* start page intro image setup */
.moha-start-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.moha-start-section > p {
	margin-bottom: 0;
}

.moha-start-section .image img {
  object-fit: cover;
  max-width: 100%;
  max-height: 430px;
  padding: 0;
  margin: 0;
  float: right;
}

This is your start page intro code:

Below you'll find guides and information for artists interested in getting involved at MoHA.

As first steps we recommend


Moha-img-test crop.jpg

Here is the quicklink class: div class="moha-start-section-quicklinks"

This is the button code:
Internal Link External Link

CSS Page https://moha.wiki/MediaWiki:Common.css

Java Script Page https://moha.wiki/MediaWiki:Common.js

External Redirect

{{#externalredirect: WEBSITE GOES HERE}}

To edit an external redirected page, use https://moha.wiki/w/index.php?title=PAGE NAME GOES HERE&action=edit

Testing a different way to share jotforms.

<a href="javascript:void(window.open('https://form.jotform.com/231806252064147','blank','scrollbars=yes,toolbar=no,width=700,height=500'))">Open Call - Wizard Registry</a>

Labeled Section Transclusion

{{#lst:articleX|chapter1}}


Import CSV - https://moha.wiki/Special:ImportCSV

  1. 1) Use Overwrite existing content for new pages and complete replacement of the imported events
  2. 2) Use Overwrite only fields contained in the file can be used if you upload a single column (the CSV need to be modified then to include the title and only the columns for import)
  3. 3) Skip - like 1) but prefers the wiki version, rather than Airtable one
  4. 4) Probably useless in your context Append to existing content: you don't want two instances of the same event on one page.

Batch Upload - https://moha.wiki/Special:BatchUpload

Embed Video - https://www.mediawiki.org/wiki/Extension:EmbedVideo