Latest Blog Posts https://sitefarm.ucdavis.edu/blog Latest Blog Posts for SiteFarm en "How do I make my bullet lists wrap around images?" https://sitefarm.ucdavis.edu/blog/how-do-i-make-my-bullet-lists-wrap-around-images <span class="field field--name-title field--type-string field--label-hidden">&quot;How do I make my bullet lists wrap around images?&quot;</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <span lang="" about="/user/6" typeof="schema:Person" property="schema:name" datatype="">Jessica Hayes</span> </span> <span class="field field--name-created field--type-created field--label-hidden">December 06, 2019</span> <div class="field field--name-field-sf-primary-image field--type-image field--label-hidden field__item"> <img src="/sites/g/files/dgvnsk511/files/styles/sf_landscape_16x9/public/images/article/window-brick-wall.jpg?h=a01b4b41&amp;itok=eRGVJkrX" width="1280" height="720" alt="Old brick wall with a small, arched, cobweb-covered window." title="Let&#039;s wrap this right up, shall we?" typeof="foaf:Image" class="image-style-sf-landscape-16x9" /> </div> <div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="https://sitefarm.ucdavis.edu/blog/18/feed" addthis:title="" addthis:description="By default images added in your body content&#039;s WYSIWYG are set to keep images and bullet lists separate since, historically, these two elements don&#039;t play nice together. We recommend only one particular workaround for the right-floated images as the left-floated images usually wind up overlapping the bullets and/or text. Even though this conflict exists, we have a workaround to help you achieve your goal. Creating a right-floated text wrap Example Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then Create your right-floated textwrap I created my bullet list first. Then I placed my arrow insertion point at the very beginning of the first bullet in the list. I added an image from my local computer and made sure to configure it to be set to align right and clicked the Save button. After a little manual resizing, I have the list/image balance I&#039;m after with a functioning textwrap effect.   Issues with the left-floated image and list This is the default behavior you&#039;ll see exhibited by your site if you use a left-floated image next to a list. Our lead developer spent a few days attempting to resolve the conflict between left and right floats to give everyone the best possible layout, but in the end, he determined that he couldn&#039;t make one wrap work without sacrificing the fix he had created for the other wrap. Default behavior example Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. Left-float list wrap example This shows how the image will overlay the bullet points or list numbers. We strongly recommend not using a left-aligned image with your lists; if an image needs to be associated with a list, far better for it to be floated on the right. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. Is there any alternative? Within the default SiteFarm offering? No, as this arrangement ensures a base-level adherence to best user experience and visual appearance of content on our sites, especially for people who expect the service to &quot;just work&quot;. That said, if you have the skillsets necessary, you have the option to explore creating a subtheme with your own classes to overwrite the output in the display. "> <a class="addthis_button_facebook"></a> <a class="addthis_button_linkedin"></a> <script> var addthis_share = { templates: { twitter: "By default images added in your body content&#039;s WYSIWYG are set to keep images and bullet lists separate since, historically, these two elements don&#039;t play nice together. We recommend only one particular workaround for the right-floated images as the left-floated images usually wind up overlapping the bullets and/or text. Even though this conflict exists, we have a workaround to help you achieve your goal. " } } </script> <a class="addthis_button_twitter"></a> <a class="addthis_button_email"></a> <a class="addthis_button_compact"></a> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>By default images added in your body content's WYSIWYG are set to keep images and bullet lists separate since, historically, these two elements don't play nice together. We recommend only one particular workaround for the right-floated images as the left-floated images usually wind up overlapping the bullets and/or text. Even though this conflict exists, we have a workaround to help you achieve your goal.</p> <h4>Creating a right-floated text wrap</h4> <p><strong>Example</strong></p> <ul><li><img alt="Stats icon" data-entity-type="file" data-entity-uuid="8c7659b4-f4b5-472c-a990-9069e3c34c04" height="326" src="/sites/g/files/dgvnsk511/files/inline-images/%23Statistics-A.png" width="371" class="align-right" /><em>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</em></li> <li><em>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</em></li> <li><em>A small river named Duden flows by their place and supplies it with the necessary regelialia.</em></li> <li><em>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</em></li> <li><em>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</em></li> <li><em>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</em></li> <li><em>She packed her seven versalia, put her initial into the belt and made herself on the way.</em></li> <li><em>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</em></li> <li><em>Pityful a rethoric question ran over her cheek, then</em></li> </ul><h5>Create your right-floated textwrap</h5> <ol><li>I created my bullet list first.</li> <li><strong>Then I placed my arrow insertion point at the very beginning of the first bullet in the list. </strong></li> <li>I added an image from my local computer and made sure to configure it to be set to <strong>align right</strong> and clicked the <strong>Save</strong> button.</li> <li>After a little manual resizing, I have the list/image balance I'm after with a functioning textwrap effect.</li> </ol><p> </p> <h4>Issues with the left-floated image and list</h4> <p>This is the default behavior you'll see exhibited by your site if you use a left-floated image next to a list. Our lead developer spent a few days attempting to resolve the conflict between left and right floats to give everyone the best possible layout, but in the end, he determined that he couldn't make one wrap work without sacrificing the fix he had created for the other wrap.</p> <p><strong>Default behavior example</strong></p> <p><img alt="cut" data-entity-type="file" data-entity-uuid="f11959a0-42c0-4108-ab6e-d044f7ae1e23" height="248" src="/sites/g/files/dgvnsk511/files/inline-images/%23Cut-away.png" width="271" class="align-left" /></p> <ul><li><em>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</em></li> <li><em>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</em></li> <li><em>A small river named Duden flows by their place and supplies it with the necessary regelialia.</em></li> <li><em>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</em></li> <li><em>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</em></li> <li><em>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</em></li> <li><em>She packed her seven versalia, put her initial into the belt and made herself on the way.</em></li> </ul><p><strong>Left-float list wrap example</strong></p> <p>This shows how the image will overlay the bullet points or list numbers. We strongly recommend not using a left-aligned image with your lists; if an image needs to be associated with a list, far better for it to be floated on the right.</p> <ul><li><img alt="cut" data-entity-type="file" data-entity-uuid="f11959a0-42c0-4108-ab6e-d044f7ae1e23" height="248" src="/sites/g/files/dgvnsk511/files/inline-images/%23Cut-away.png" width="271" class="align-left" /><em>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</em></li> <li><em>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</em></li> <li><em>A small river named Duden flows by their place and supplies it with the necessary regelialia.</em></li> <li><em>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</em></li> <li><em>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</em></li> <li><em>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</em></li> <li><em>She packed her seven versalia, put her initial into the belt and made herself on the way.</em></li> </ul><h4>Is there any alternative?</h4> <p>Within the default SiteFarm offering? No, as this arrangement ensures a base-level adherence to best user experience and visual appearance of content on our sites, especially for people who expect the service to "just work". That said, if you have the skillsets necessary, you have the option to explore creating a subtheme with your own classes to overwrite the output in the display.</p> </div> <div class="field field--name-field-sf-article-category field--type-entity-reference field--label-above"> <div class="field__label">Category</div> <div class="field__item"><a href="/articles/tips" hreflang="en">Tips, Hints, Best Practices</a></div> </div> <div class="field field--name-field-sf-tags field--type-entity-reference field--label-above"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/bullet-lists" hreflang="en">Bullet Lists</a></div> <div class="field__item"><a href="/tags/images" hreflang="en">Images</a></div> </div> </div> Fri, 06 Dec 2019 19:20:21 +0000 Jessica Hayes 4131 at https://sitefarm.ucdavis.edu "My footer image keeps disappearing" https://sitefarm.ucdavis.edu/blog/my-footer-image-keeps-disappearing <span class="field field--name-title field--type-string field--label-hidden">&quot;My footer image keeps disappearing&quot;</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <span lang="" about="/user/6" typeof="schema:Person" property="schema:name" datatype="">Jessica Hayes</span> </span> <span class="field field--name-created field--type-created field--label-hidden">December 05, 2019</span> <div class="field field--name-field-sf-primary-image field--type-image field--label-hidden field__item"> <img src="/sites/g/files/dgvnsk511/files/styles/sf_landscape_16x9/public/images/article/missing-puzzle-piece.jpg?h=29234840&amp;itok=HphSCzj_" width="1280" height="720" alt="A puzzle with a single missing piece" typeof="foaf:Image" class="image-style-sf-landscape-16x9" /> </div> <div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="https://sitefarm.ucdavis.edu/blog/18/feed" addthis:title="" addthis:description="This issue crops up when an image is added in the Site Information WYSIWYG; the image displays for a week or two and then mysteriously breaks for no discernible reason. Let&#039;s explore what&#039;s happening behind the scenes and how to implement a fix. Where the issue occurs If you navigate to Manage » Configuration » System section » Basic site settings, the page gives you a text area WYSIWYG under the label &quot;Site Credit Information.&quot; I created an example that, in the content area, looks like this: When saved, it&#039;s added to the Site Credits block in the Footer region and is displayed on the page like so: Note: display is set at mobile width.What&#039;s your status? Permanent vs. Temporary Now, as far as any reasonable person is concerned, you&#039;ve attached your image to the site and all&#039;s well. Unfortunately, the way Drupal handles file attachments, some Core bugs, and our code base have combined to create a situation where, because the image isn&#039;t attached to a page the file is assigned a status of Temporary instead of Permanent as we would expect. Permanent, as the name suggests, means the file is a permanent entity in the site and should be kept. The Temporary status means the system doesn&#039;t see the file is attached to a page entity and will be slated for a cache clear in the near future  (approximately two weeks) depending on where your site is in its schedule for such system jobs. When the job runs, it removes files labeled &quot;Temporary&quot; from your system resulting in the broken image problem. How to confirm your image&#039;s status If you suspect your site is experiencing this problem, you can confirm if this is the case by viewing the file&#039;s status. Navigate in your Admin panel to Shortcuts » All Content » Files tab. Locate your image in the list and review its Status. An interim fix Having isolated the nature of the problem, our development team is now exploring a suitable fix for this problem, but in the meanwhile we want to give you a way to work around the issue to avoid the need to constantly replace the image. Create a page—the basic page is probably the easiest to use in this case. Consider adding a very clear title and/or body text explaining what this page is being used for and that it shouldn&#039;t be deleted. Add your image to the body WYSIWYG. Do not publish the page. Save it in Draft. This is vital to the process and ensures that, while the image is now a Permanent piece of content in your site, this is obviously not a page you want to show the public. Edit your page. Click on the Source button in the top icon bar and locate the HTML source code representing your image. It will look something like this Copy this information. Navigate to the Basic site settings section noted above, go to the Site Credit Information WYSIWYG. Click on the Source button, paste your code into the field. Click on the Source button again to return to the text interface mode and add any additional text necessary Scroll to the bottom and click the Save configuration button to finish. If you check your Files list now, you&#039;ll see that the Status setting has changed. "> <a class="addthis_button_facebook"></a> <a class="addthis_button_linkedin"></a> <script> var addthis_share = { templates: { twitter: "This issue crops up when an image is added in the Site Information WYSIWYG; the image displays for a week or two and then mysteriously breaks for no discernible reason. Let&#039;s explore what&#039;s happening behind the scenes and how to implement a fix. " } } </script> <a class="addthis_button_twitter"></a> <a class="addthis_button_email"></a> <a class="addthis_button_compact"></a> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>This issue crops up when an image is added in the Site Information WYSIWYG; the image displays for a week or two and then mysteriously breaks for no discernible reason. Let's explore what's happening behind the scenes and how to implement a fix.</p> <h4>Where the issue occurs</h4> <p>If you navigate to <strong>Manage » Configuration » System section » Basic site settings</strong>, the page gives you a text area WYSIWYG under the label "<strong>Site Credit Information</strong>." I created an example that, in the content area, looks like this:</p> <p><img alt="Site credit information as inputted in the wysiwyg." data-entity-type="file" data-entity-uuid="79bf9b42-482f-4ebb-a74d-e941b56d639b" height="284" src="/sites/g/files/dgvnsk511/files/inline-images/site-credit-wysiwyg.png" width="496" /></p> <p>When saved, it's added to the <strong>Site Credits block</strong> in the <strong>Footer region</strong> and is displayed on the page like so:</p> <figure role="group" class="caption caption-img"><img alt="Site credit information displayed in the footer region." data-entity-type="file" data-entity-uuid="6ba51073-c365-4526-ab8b-562701876089" height="312" src="/sites/g/files/dgvnsk511/files/inline-images/site-credit-block-footer.png" width="538" /><figcaption>Note: display is set at mobile width.</figcaption></figure><h4>What's your status? Permanent vs. Temporary</h4> <p>Now, as far as any reasonable person is concerned, you've attached your image to the site and all's well. Unfortunately, the way Drupal handles file attachments, some Core bugs, and our code base have combined to create a situation where, because the image isn't attached to a <strong>page</strong> the file is assigned a status of Temporary instead of Permanent as we would expect.</p> <p><strong>Permanent</strong>, as the name suggests, means the file is a permanent entity in the site and should be kept. The <strong>Temporary</strong> status means the system doesn't see the file is attached to a page entity and will be slated for a cache clear in the near future  (approximately two weeks) depending on where your site is in its schedule for such system jobs. When the job runs, it removes files labeled "Temporary" from your system resulting in the broken image problem.</p> <h4>How to confirm your image's status</h4> <p>If you suspect your site is experiencing this problem, you can confirm if this is the case by viewing the file's status.</p> <ol><li>Navigate in your Admin panel to <strong>Shortcuts » All Content » Files tab</strong>.</li> <li>Locate your image in the list and review its <strong>Status</strong>.</li> </ol><p><img alt="Screenshot of the files page showing the location of the Files tab and the relevant image with the temporary status marker." data-entity-type="file" data-entity-uuid="85483e2b-b9e9-4214-a9ba-590487d0daa5" src="/sites/g/files/dgvnsk511/files/inline-images/site-credit-files-status.png" /></p> <h4>An interim fix</h4> <p>Having isolated the nature of the problem, our development team is now exploring a suitable fix for this problem, but in the meanwhile we want to give you a way to work around the issue to avoid the need to constantly replace the image.</p> <ol><li>Create a page—the basic page is probably the easiest to use in this case.</li> <li>Consider adding a very clear title and/or body text explaining what this page is being used for and that it shouldn't be deleted.</li> <li>Add your image to the body WYSIWYG.</li> <li>Do not publish the page. Save it in <strong>Draft</strong>. This is vital to the process and ensures that, while the image is now a Permanent piece of content in your site, this is obviously not a page you want to show the public.</li> <li><strong>Edit</strong> your page.</li> <li>Click on the <strong>Source</strong> button in the top icon bar and locate the HTML source code representing your image. It will look something like this<br /><strong>&lt;p&gt;&lt;img alt="Site credit information as inputted in the wysiwyg." data-entity-type="file" data-entity-uuid="blah" height="284" src="/sites/g/files/blah/files/inline-images/site-credit-wysiwyg.png" width="496" /&gt;&lt;/p&gt;</strong></li> <li>Copy this information.</li> <li>Navigate to the Basic site settings section noted above, go to the Site Credit Information WYSIWYG.</li> <li>Click on the <strong>Source</strong> button, paste your code into the field.</li> <li>Click on the <strong>Source</strong> button again to return to the text interface mode and add any additional text necessary</li> <li>Scroll to the bottom and click the <strong>Save configuration</strong> button to finish.</li> </ol><p>If you check your Files list now, you'll see that the Status setting has changed.</p> <p><img alt="The file's status has changed from temporary to permanent now that it's attached to a page." data-entity-type="file" data-entity-uuid="23ebcfc6-e7cd-42a0-a0df-b52764d3cd99" src="/sites/g/files/dgvnsk511/files/inline-images/site-credit-files-status-perm.png" /></p> </div> <div class="field field--name-field-sf-article-category field--type-entity-reference field--label-above"> <div class="field__label">Category</div> <div class="field__item"><a href="/articles/tips" hreflang="en">Tips, Hints, Best Practices</a></div> </div> <div class="field field--name-field-sf-tags field--type-entity-reference field--label-above"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/images" hreflang="en">Images</a></div> <div class="field__item"><a href="/tags/broken-images" hreflang="en">Broken Images</a></div> <div class="field__item"><a href="/tags/footer" hreflang="en">Footer</a></div> <div class="field__item"><a href="/tags/site-credits" hreflang="en">Site Credits</a></div> <div class="field__item"><a href="/tags/site-settings" hreflang="en">Site Settings</a></div> </div> </div> Thu, 05 Dec 2019 15:48:13 +0000 Jessica Hayes 4126 at https://sitefarm.ucdavis.edu 10 Tips for Publishing Accessible Content https://sitefarm.ucdavis.edu/blog/10-tips-publishing-accessible-content <span class="field field--name-title field--type-string field--label-hidden">10 Tips for Publishing Accessible Content</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <span lang="" about="/user/6" typeof="schema:Person" property="schema:name" datatype="">Jessica Hayes</span> </span> <span class="field field--name-created field--type-created field--label-hidden">December 03, 2019</span> <div class="field field--name-field-sf-primary-image field--type-image field--label-hidden field__item"> <img src="/sites/g/files/dgvnsk511/files/styles/sf_landscape_16x9/public/images/article/handshake-accessibility.png?h=4ab65ab7&amp;itok=dDg0c99k" width="1280" height="720" alt="Illustrated handshake containing a word cloud related to assisting in communication." title="Bridge divides, be inclusive, build community" typeof="foaf:Image" class="image-style-sf-landscape-16x9" /> </div> <div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="https://sitefarm.ucdavis.edu/blog.rss" addthis:title="Latest Blog Posts" addthis:description="Earlier this year, Alex Brandt of Palantir.net wrote a fantastic article outlining how you, as a content provider, can make your content more accessible to our entire community, whether it&#039;s here on campus or farther afield. Alex outlines practical tips, steps, and helpful links to resources to help you build your communication bridges to the benefit of all. 10 TIPS FOR PUBLISHING ACCESSIBLE CONTENT Content editors can help make the web a more accessible place, one published moment at a time. By Alex Brandt "> <a class="addthis_button_facebook"></a> <a class="addthis_button_linkedin"></a> <script> var addthis_share = { templates: { twitter: "Earlier this year, Alex Brandt of Palantir.net wrote a fantastic article outlining how you, as a content provider, can make your content more accessible to our entire community, whether it&#039;s here on campus or farther afield. Alex outlines practical tips, steps, and helpful links to resources to help you build your communication bridges to the benefit of all. " } } </script> <a class="addthis_button_twitter"></a> <a class="addthis_button_email"></a> <a class="addthis_button_compact"></a> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Earlier this year, Alex Brandt of <a href="https://www.palantir.net/">Palantir.net</a> wrote a fantastic article outlining how you, as a content provider, can make your content more accessible to our entire community, whether it's here on campus or farther afield. Alex outlines practical tips, steps, and helpful links to resources to help you build your communication bridges to the benefit of all.</p> <p><a class="btn--block btn--primary" href="https://www.palantir.net/blog/10-tips-publishing-accessible-content">10 TIPS FOR PUBLISHING ACCESSIBLE CONTENT<br /> Content editors can help make the web a more accessible place, one published moment at a time.<br /> By Alex Brandt</a></p> </div> <div class="field field--name-field-sf-article-category field--type-entity-reference field--label-above"> <div class="field__label">Category</div> <div class="field__item"><a href="/articles/tips" hreflang="en">Tips, Hints, Best Practices</a></div> </div> <div class="field field--name-field-sf-tags field--type-entity-reference field--label-above"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/accessibility" hreflang="en">Accessibility</a></div> <div class="field__item"><a href="/tags/images" hreflang="en">Images</a></div> <div class="field__item"><a href="/tags/alternative-text" hreflang="en">Alternative Text</a></div> <div class="field__item"><a href="/tags/audio" hreflang="en">Audio</a></div> <div class="field__item"><a href="/tags/link-text" hreflang="en">Link Text</a></div> </div> </div> Tue, 03 Dec 2019 16:14:03 +0000 Jessica Hayes 4101 at https://sitefarm.ucdavis.edu Add a branding color to your custom category filter https://sitefarm.ucdavis.edu/blog/add-branding-color-your-custom-category-filter <span class="field field--name-title field--type-string field--label-hidden">Add a branding color to your custom category filter</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <span lang="" about="/user/6" typeof="schema:Person" property="schema:name" datatype="">Jessica Hayes</span> </span> <span class="field field--name-created field--type-created field--label-hidden">November 05, 2019</span> <div class="field field--name-field-sf-primary-image field--type-image field--label-hidden field__item"> <img src="/sites/g/files/dgvnsk511/files/styles/sf_landscape_16x9/public/images/article/colored-pencils.jpg?h=670c6903&amp;itok=00bcLBQK" width="1280" height="720" alt="An array of colored pencils lined up side-by-side on a table." title="Bring some color into your life and your category filters! Photo credit: Pixabay" typeof="foaf:Image" class="image-style-sf-landscape-16x9" /> </div> <div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="https://sitefarm.ucdavis.edu/blog/721/feed" addthis:title="" addthis:description="It may have occurred to you that it would be nice to display a colorful, custom category filter that links to information pages, but on creating it you no doubt discovered that custom vocabularies don&#039;t offer anywhere to set a branding color like the Article or Event Category lists do. This write-up will show you how to incorporate it into your own custom taxonomies to get that same effect and presentation. Please note that a Site Builder role is required in order to complete these steps. Create your custom vocabulary Navigate to Shortcuts » Taxonomy. Click the + Add vocabulary button. Enter a Name for your vocabulary and click Save. Click on the Manage fields tab. Click the + Add field button. From under the Re-use an existing field menu, select the List (text): field_sf_brand_color option. Click the Save and continue button. Once it saves, you will be on the Brand Color settings for page. Use the breadcrumbs to return to your main vocabulary page: Click on the Manage display tab. Locate the Brand Color field in the list and, using its pull handle located to the left of the entry, drag it it into the Disabled section below. Click the Save button to finish. Click on the List tab and use the + Add term button to add term entries to your custom vocabulary. You will see that the Add term page now includes an option to add a Branding color selection. Configure the URL alias pattern Select one of your terms and click its Edit button. Scroll down until you see the checkmark labeled Generate automatic URL alias. In its description text, you will see a link for Configure URL alias patterns. Click the link to continue. On the Patterns screen, click the + Add Pathauto pattern. Pattern type: Taxonomy term Path pattern: /[term:name] Example: authors/[term:name]Note: there is no preceding / in front of your vocabulary name Vocabulary: check the related custom vocabulary Label: a name that will help you identify your custom pattern in the list Click Save to finish. Create a View block for your vocabulary Navigate to Manage » Structure » Views. Locate the Articles Category Filter View and use its Duplicate button. Duplicating this existing View means you&#039;re getting a View with the majority of the settings and classes already included, leaving you with only a few areas that need to be customized to achieve your goal. Provide a new View name and click the Duplicate button. Delete the Block - Blog and Block - Term displays. Save your changes before continuing. Customize the remain Block - News display with your own details:Display name: Block - FIELDS » Taxonomy term: Name Expand the REWRITE RESULTS label Update Link path to /vocabularyname/{{ name }} Example: /authors/{{ name }} Check the box for Replace spaces with dashes Click Apply. FILTER CRITERIA » Taxonomy term: Vocabulary Click this link, uncheck the unneeded box and then select your custom vocabulary Click Apply. BONUS: If you want to have a weighted sort, include the SORT CRITERIA and use the Add button to include Taxonomy term: Weight (asc). Click Save to finish. Attach your new View block to a page Locate the page where the block will be displayed. Click the page&#039;s Place Block button. Use the dialog box&#039;s search filter region to search for your View name. Click its corresponding Place Block button. In the block&#039;s Visibility | Pages section consider also adding the pathway to your vocabulary pages if you want this block to display in conjunction with the terms. Example: for my Authors list, I&#039;m using these paths: /custom-branding-colors /authors/*  "> <a class="addthis_button_facebook"></a> <a class="addthis_button_linkedin"></a> <script> var addthis_share = { templates: { twitter: "It may have occurred to you that it would be nice to display a colorful, custom category filter that links to information pages, but on creating it you no doubt discovered that custom vocabularies don&#039;t offer anywhere to set a branding color like the Article or Event Category lists do. This write-up will show you how to incorporate it into your own custom taxonomies to get that same effect and presentation. " } } </script> <a class="addthis_button_twitter"></a> <a class="addthis_button_email"></a> <a class="addthis_button_compact"></a> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>It may have occurred to you that it would be nice to display a colorful, custom category filter that links to information pages, but on creating it you no doubt discovered that custom vocabularies don't offer anywhere to set a branding color like the Article or Event Category lists do. This write-up will show you how to incorporate it into your own custom taxonomies to get that same effect and presentation.</p> <p><strong>Please note that a Site Builder role is required in order to complete these steps.</strong></p> <h4><span><span>Create your custom vocabulary</span></span></h4> <ol><li>Navigate to <strong>Shortcuts » Taxonomy</strong>.</li> <li>Click the <strong>+ Add vocabulary</strong> button.</li> <li>Enter a <strong>Name</strong> for your vocabulary and click <strong>Save</strong>.</li> <li>Click on the <strong>Manage fields</strong> tab.<br /><img alt="Location of the Manage fields tab on our new Authors category vocabulary." data-entity-type="file" data-entity-uuid="dccaf6f6-3d39-44b3-941c-93e55673ae43" height="215" src="/sites/g/files/dgvnsk511/files/inline-images/catfilter-manage-fields.png" width="610" /></li> <li>Click the <strong>+ Add field</strong> button.</li> <li>From under the <strong>Re-use an existing field</strong> menu, select the <strong>List (text): field_sf_brand_color</strong> option.<br /><img alt="Use the existing field_sf_brand_color option." data-entity-type="file" data-entity-uuid="7df450fb-fc85-43e0-9078-040eefc1324c" height="229" src="/sites/g/files/dgvnsk511/files/inline-images/catfilter-add-sf-brand-color-field.png" width="635" /></li> <li>Click the <strong>Save and continue</strong> button.</li> <li>Once it saves, you will be on the <strong><em>Brand Color</em> settings for &lt;your vocabulary&gt;</strong> page. Use the breadcrumbs to return to your main vocabulary page:<br /><img alt="Use the breadcrumb link on the Brand Color page to return to the main page for your vocabulary." data-entity-type="file" data-entity-uuid="53e83d6f-9ad5-41cd-8107-12742e6c5083" height="207" src="/sites/g/files/dgvnsk511/files/inline-images/catfilter-return-to-vocab.png" width="598" /></li> <li>Click on the <strong>Manage display</strong> tab.<br /><img alt="Click on the Manage display tab." data-entity-type="file" data-entity-uuid="f6bbdce9-c63d-4405-9736-54bf938ffa79" height="200" src="/sites/g/files/dgvnsk511/files/inline-images/catfilter-manage-display.png" width="629" /></li> <li>Locate the <strong>Brand Color</strong> field in the list and, using its pull handle located to the left of the entry, drag it it into the <strong>Disabled</strong> section below.</li> <li>Click the <strong>Save</strong> button to finish.</li> <li>Click on the <strong>List</strong> tab and use the <strong>+ Add term</strong> button to add term entries to your custom vocabulary. You will see that the <em>Add term</em> page now includes an option to add a Branding color selection.</li> </ol><h4>Configure the URL alias pattern</h4> <ol><li>Select one of your terms and click its <strong>Edit</strong> button.</li> <li>Scroll down until you see the checkmark labeled <strong>Generate automatic URL alias</strong>. In its description text, you will see a link for <strong>Configure URL alias patterns</strong>. Click the link to continue.</li> <li>On the <em>Patterns</em> screen, click the <strong>+ Add Pathauto pattern</strong>. <ul><li><strong>Pattern type</strong>: Taxonomy term</li> <li><strong>Path pattern</strong>: &lt;vocab name&gt;/[term:name]<br /> Example: <strong>authors/[term:name]</strong><br /><strong>Note</strong>: there is no preceding / in front of your vocabulary name</li> <li><strong>Vocabulary</strong>: check the related custom vocabulary</li> <li><strong>Label</strong>: a name that will help you identify your custom pattern in the list</li> </ul></li> <li>Click <strong>Save</strong> to finish.</li> </ol><h4><span><span>Create a View block for your vocabulary</span></span></h4> <ol><li>Navigate to <strong>Manage » Structure » Views</strong>.</li> <li>Locate the <strong>Articles Category Filter</strong> View and use its <strong>Duplicate</strong> button. Duplicating this existing View means you're getting a View with the majority of the settings and classes already included, leaving you with only a few areas that need to be customized to achieve your goal.</li> <li>Provide a new <strong>View name</strong> and click the <strong>Duplicate</strong> button.</li> <li>Delete the <em>Block - Blog</em> and <em>Block - Term</em> displays.<br /><img alt="Delete the unneeded View displays." data-entity-type="file" data-entity-uuid="58445558-fe6c-4ca0-be05-6206e19ce631" src="/sites/g/files/dgvnsk511/files/inline-images/catfilter-delete-unneeded-view-displays.png" /></li> <li><strong>Save</strong> your changes before continuing.</li> <li>Customize the remain Block - News display with your own details:<img alt="A screenshot showing the highlighted areas requiring an update so as to display your custom vocabulary in the filter list." data-entity-type="file" data-entity-uuid="543a81fe-0d83-4a40-98e7-67185f14fe84" height="484" src="/sites/g/files/dgvnsk511/files/inline-images/catfilter-view-settings.png" width="443" /><ul><li><strong>Display name</strong>: Block - &lt;vocabulary name&gt;</li> <li><strong>FIELDS » Taxonomy term: Name</strong> <ul><li>Expand the REWRITE RESULTS label</li> <li>Update Link path to <span><span>/vocabularyname/{{ name }}<br /> Example: /authors/{{ name }}</span></span></li> <li><span><span>Check the box for Replace spaces with dashes</span></span></li> <li><span><span>Click Apply.</span></span></li> </ul></li> <li><strong><span><span>FILTER CRITERIA </span></span>» Taxonomy term: Vocabulary</strong> <ul><li>Click this link, uncheck the unneeded box and then select your custom vocabulary</li> <li>Click Apply.</li> </ul></li> <li><strong>BONUS</strong>: If you want to have a weighted sort, include the SORT CRITERIA and use the Add button to include Taxonomy term: Weight (asc).</li> </ul></li> <li>Click <strong>Save</strong> to finish.</li> </ol><h4><span><span>Attach your new View block to a page</span></span></h4> <ol><li>Locate the page where the block will be displayed.</li> <li>Click the page's <strong>Place Block</strong> button.</li> <li>Use the dialog box's search filter region to <strong>search</strong> for your View name.</li> <li>Click its corresponding <strong>Place Block</strong> button.</li> <li>In the block's <strong>Visibility | Pages</strong> section consider also adding the pathway to your vocabulary pages if you want this block to display in conjunction with the terms. Example: for my Authors list, I'm using these paths:<br /> /custom-branding-colors<br /> /authors/*  &lt;-- wildcard will include all term pages that fall in this pathway.</li> <li>Click the <strong>Save block</strong> button to finish.</li> <li>Click on the <strong>Back to site</strong> button in your admin bar to return to the page. You may find it necessary to use <strong>Clear Cache</strong> if you're not seeing your changes right away.</li> </ol><h4>Page example with the block attached</h4> <p><img alt="Example of a page with the custom vocabulary displaying branding colors." data-entity-type="file" data-entity-uuid="f5d9f84b-2a60-4b86-9e28-e332ca748c6a" src="/sites/g/files/dgvnsk511/files/inline-images/catfilter-page-block.png" /></p> <p> </p> <h4>Taxonomy term page with the block attached</h4> <p><img alt="Example of a term page with the color branded category filter block on the right side of the page." data-entity-type="file" data-entity-uuid="9bdd87b9-ece8-4ba9-8042-185dbb86dcb8" src="/sites/g/files/dgvnsk511/files/inline-images/catfilter-term-page-example.png" /></p> </div> <div class="field field--name-field-sf-article-category field--type-entity-reference field--label-above"> <div class="field__label">Category</div> <div class="field__item"><a href="/articles/site-building" hreflang="en">Site Building</a></div> </div> <div class="field field--name-field-sf-tags field--type-entity-reference field--label-above"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/views" hreflang="en">Views</a></div> <div class="field__item"><a href="/tags/taxonomy" hreflang="en">Taxonomy</a></div> <div class="field__item"><a href="/tags/term" hreflang="en">term</a></div> <div class="field__item"><a href="/tags/pathauto" hreflang="en">Pathauto</a></div> <div class="field__item"><a href="/tags/custom-blocks" hreflang="en">Custom Blocks</a></div> <div class="field__item"><a href="/tags/building-blocks" hreflang="en">Building Blocks</a></div> </div> </div> Tue, 05 Nov 2019 15:57:20 +0000 Jessica Hayes 4061 at https://sitefarm.ucdavis.edu Intranet: Register non-UC Davis users with moderated approval https://sitefarm.ucdavis.edu/blog/intranet-register-nonucdavis-with-approval <span class="field field--name-title field--type-string field--label-hidden">Intranet: Register non-UC Davis users with moderated approval</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <span lang="" about="/user/6" typeof="schema:Person" property="schema:name" datatype="">Jessica Hayes</span> </span> <span class="field field--name-created field--type-created field--label-hidden">October 30, 2019</span> <div class="field field--name-field-sf-primary-image field--type-image field--label-hidden field__item"> <img src="/sites/g/files/dgvnsk511/files/styles/sf_landscape_16x9/public/images/article/secure-data.jpg?h=3b47d908&amp;itok=uoEV3v5Z" width="1280" height="720" alt="A keyboard with the Return key text replaced with a thumb print." typeof="foaf:Image" class="image-style-sf-landscape-16x9" /> </div> <div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="https://sitefarm.ucdavis.edu/blog.rss" addthis:title="Latest Blog Posts" addthis:description="Scenario A SiteFarm client is using their site to host information and links related to an annual conference. The site storehouses embedded links to videos recorded from the conference, but in order to access them, public visitors need to pay a registration fee through a different payment gateway before being granted access to the site&#039;s content. The client had the following requirements: Lock the site as an intranet Allow the public to create their own user accounts Keep those accounts as &quot;pending&quot; until a site manager could cross-reference the account information to the payment information Assign an appropriate role to these visitors to distinguish them from regular site Contributors, Editors, or Site Managers, and give them read-only privileges to the content Make sure they didn&#039;t require CAS to log in Provide login and logout mechanisms Who can complete this configuration? Certain steps in this process can only be completed by a member of the SiteFarm team, and the rest will depend upon whether you have a Site Manager role or the Site Manager AND Site Builder role. When each step is described, a note will be included as to which group has the ability to complete the step. If in doubt, drop us a note at sitefarm@ucdavis.edu. Configuring Your Site Settings Create the new user role for public visitors Can be completed by: SiteFarm Team only A new role needs to be created in order to easily identify the visitors who are being given access to the site. In our use case, the client opted to name them &quot;Virtual Attendees&quot; (VA). The new role is then placed directly after the Authenticated User in the Roles permission list in order to inherit the Authenticated User base permissions. The new role is intended to provide READ-ONLY privileges to your authenticated visitors. They will NOT be able to edit any content on your site. Reorganize the user permissions Can be completed by: SiteFarm Team only This step reconfigures the site&#039;s entire permission structure to make it inaccessible to the public. Any permissions provided under Anonymous User in your default site offering are removed. Include the new Role as an option for Site Managers to apply Can be completed by: SiteFarm Team only The new Virtual Attendee has been checked.In the image to the left, the list of available Roles a Site Manager can select has been updated to include the new Virtual Attendee role. When a visitor submits an account request, this option will now show up for Site Managers in the People section.               Configure user account handling Can be completed by: SiteFarm Team, Site Builder The image on the left is the default settings that come with SiteFarm out of the box. The image on the right is our guide for the changes to make to your settings for this section.Navigate to Manage » Configuration » SiteFarm section » CAS Settings » USER ACCOUNT HANDLING label. Make the following changes: Uncheck Prevent normal login No change to Restrict email management Check Automatically register users Select Use a CAS attribute under Email address assignment Email attribute: Insert the token [user:mail]. Make sure to use this same email address in your Basic Site Configuration contact information and your Contact form located at this pathway in your site: /admin/structure/contact and titled &quot;Website Feedback&quot;. Check Automatically assign roles on user registration and select the created Role. In this case, it was Virtual Attendee. Configure Forced Login Can be completed by: SiteFarm Team, Site Manager, Site Builder This section is what locks your site into an intranet configuration, but allows you to exclude specific pages in order to allow for basic functionality, like having a homepage to land on and options for creating an account and logging in and out of that account. The screenshot on the right shows the necessary settings to provide basic functionality: Enable - Checked. By default, if only this box is checked, the entire site is locked. Negate the condition - Checked. By enabling this feature, it allows you to explicitly state which pages CAN be viewed by the public. Pages - Specify pages by using their paths. Enter one path per line. The &#039;*&#039; character is a wildcard. An example path is /user/* for every user page.  is the front page. In this use case, we are listing: - homepage /user/login - the page available by default to allow visitors to choose to login with an existing account, create a new account, or request a password reset /user/register - the page available by default that allows visitors to create an account /user/password - the page available by default that allows visitors to request a password reset If other pages need to be made public, they can be added here as well. Configure Log Out Behavior Can be completed by: SiteFarm Team, Site Manager, Site Builder Navigate to Manage » Configuration » SiteFarm section » CAS Settings » LOG OUT BEHAVIOR label. Locate the Log out destination field. Enter a backslash: / Doing so will send the visitor back to the homepage, which has been set to be visible and accessible to the public. Scroll to the bottom and click the Save configuration button to finish. Account and Email settings Configure Account Settings Can be completed by: SiteFarm Team, Site Manager, Site Builder The following settings deal with how accounts will be generated and what messages will be sent depending upon what part of the account creation process is triggered.  The image on the left is the default settings that come with SiteFarm out of the box. The image on the right is our guide for the changes to make to your settings for this section.Navigate to Manage » Configuration » SiteFarm section » Account Settings » CONTACT SETTINGS label. Uncheck the Enable the personal contact form... box. Navigate down to the REGISTRATION AND CANCELLATION label. Change Who can register accounts to Visitors, but administrator approval is required. Check the Send emails to new users created by Administrators box. Enter an official site email address in the Notification email address field. Configure Email Settings Can be completed by: SiteFarm Team, Site Manager, Site Builder Navigate down to the REGISTRATION AND CANCELLATION » Email section. Click on the tab labeled &quot;Welcome (New user created by an administrator)&quot;. We will offer an example of the verbiage to use, but feel free to update it according to your needs. Update the Subject field to (excluding quotation marks): &quot;You have created an account at [site:name]&quot; Update the Body field to (excluding quotation marks):  &quot;[user:display-name], Thank you for registering at [site:name]. Your application for an account is currently pending approval. Once it has been approved, you will receive another email confirmation with instructions for viewing the live stream. --  [site:name] team Click on the tab labeled &quot;Welcome (awaiting approval)&quot;. We will offer an example of the verbiage to use, but feel free to update it according to your needs. Update the Subject field to (excluding quotation marks): &quot;Account details for [user:display-name] at [site:name] (pending admin approval)&quot; Update the Body field to (excluding quotation marks):  &quot;[user:display-name], Thank you for registering at [site:name]. Your application for an account is currently pending approval. Once it has been approved, you will receive another email containing information about how to log in, set your password, and other details.&quot; Click on the tab labeled &quot;Account activation&quot;. We will offer an example of the verbiage to use, but feel free to update it according to your needs. Check the Notify user when account is activated box if it isn&#039;t already. Update the Subject field to (excluding quotation marks): &quot;Account details for [user:display-name] at [site:name] (approved)&quot; Update the Body field to (excluding quotation marks): &quot;[user:display-name], Your account at [site:name] has been activated. You may now log in by clicking this link or copying and pasting it into your browser: [site:login-url] username: [user:account-name] password: Your password You will be able to view the website only while logged in. If you have any questions, please let us know at [site:mail]. --  [site:name] team&quot; Scroll to the bottom of the page and click the Save configuration button to finish. Add Login and Logout Menu Links Can be completed by: Site Manager Navigate to Shortcuts » Main Menu. Add two new links and make sure they are positioned at the bottom of your list so they will appear on the far right of the main navigation bar: Login link = /user/login Logout link = /user/logout Click the Save button to finish. Note: only one of these links will appear on the main menu bar at a time depending on whether the person has logged in yet or not. User Account Maintenance Process for Activating account requests Can be completed by: Site Manager When someone creates an account, the email account associated with your site will receive an automated notification. These can be updated further in Manage » Configuration » People section » Account Settings if the messages need to provide more information for ease of processing for your internal staff. Navigate to your Manage » People section and locate the name of the person indicated in the email notification received. You will see an entry for them, but they will be listed as Blocked and not have a Role assigned to them.Example of a pending account. Click on the account&#039;s corresponding Edit button. Change the account&#039;s Status to Active and assign the appropriate Role, which in this example is Virtual Attendee. Scroll to the bottom and click the Save button to finish. An automated message will be sent to the new account holder to provide them with the login information you entered in the Email Settings section. Filter accounts by Role Can be completed by: Site Manager You may need to do some housekeeping with your list, either to remove all of the users or to modify/delete specific ones. Using the filter option makes this much easier. Navigate to Manage » People. From the Filter, use the Role&#039;s drop-down menu to select your desired Role (our example is Virtual Attendee) and click the Filter button. Delete a user account Can be completed by: Site Manager Navigate to Manage » People. Locate the user account in the list and click the corresponding Edit button. From the user&#039;s profile screen, scroll to the bottom of the page and click the Cancel account link located next to the Save button. On the Are you sure you want to cancel the account for ? page, select Delete the account and its content. Click the Cancel account button to finish. Final Comments We STRONGLY recommend thoroughly testing your registration process before making it live. You can keep it in limbo by waiting to enable the login and log out links. Test the creation and automated response steps by attempting to create a fake account using a browser&#039;s incognito mode. If you decide to implement this kind of intranet/registration system, let us know the name of the Role you would like to implement when you email us or complete the Service Request Form. "> <a class="addthis_button_facebook"></a> <a class="addthis_button_linkedin"></a> <script> var addthis_share = { templates: { twitter: "We had a recent request asking how a SiteFarm client could set up their site for visitors outside UC Davis, but restrict their access pending a Site Manager&#039;s ability to approve the account. It posed an interesting use case and touches on similar requests we&#039;ve received in the past. Here&#039;s a formal breakdown of the steps we took to create a self-registering intranet with manager approval. " } } </script> <a class="addthis_button_twitter"></a> <a class="addthis_button_email"></a> <a class="addthis_button_compact"></a> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><h2 class="heading--underline">Scenario</h2> <p>A SiteFarm client is using their site to host information and links related to an annual conference. The site storehouses embedded links to videos recorded from the conference, but in order to access them, public visitors need to pay a registration fee through a different payment gateway before being granted access to the site's content.</p> <p>The client had the following requirements:</p> <ul><li>Lock the site as an intranet</li> <li>Allow the public to create their own user accounts</li> <li>Keep those accounts as "pending" until a site manager could cross-reference the account information to the payment information</li> <li>Assign an appropriate role to these visitors to distinguish them from regular site Contributors, Editors, or Site Managers, and give them read-only privileges to the content</li> <li>Make sure they didn't require CAS to log in</li> <li>Provide login and logout mechanisms</li> </ul><h4>Who can complete this configuration?</h4> <p>Certain steps in this process can only be completed by a member of the SiteFarm team, and the rest will depend upon whether you have a Site Manager role or the Site Manager AND Site Builder role. When each step is described, a note will be included as to which group has the ability to complete the step.</p> <p>If in doubt, drop us a note at <a href="mailto:sitefarm@ucdavis.edu">sitefarm@ucdavis.edu</a>.</p> <hr /><h2 class="heading--underline">Configuring Your Site Settings</h2> <h4>Create the new user role for public visitors</h4> <p><em><strong>Can be completed by: SiteFarm Team only</strong></em></p> <p>A new role needs to be created in order to easily identify the visitors who are being given access to the site. In our use case, the client opted to name them "Virtual Attendees" (VA). The new role is then placed directly after the Authenticated User in the Roles permission list in order to inherit the Authenticated User base permissions.</p> <div class="alert">The new role is intended to provide <strong>READ-ONLY</strong> privileges to your authenticated visitors. They will NOT be able to edit any content on your site.</div> <h4>Reorganize the user permissions</h4> <p><strong><em>Can be completed by: </em></strong><em><strong>SiteFarm Team</strong></em><strong><em> only</em></strong></p> <p>This step reconfigures the site's entire permission structure to make it inaccessible to the public. Any permissions provided under Anonymous User in your default site offering are removed.</p> <h4>Include the new Role as an option for Site Managers to apply</h4> <p><strong><em>Can be completed by: </em></strong><em><strong>SiteFarm Team</strong></em><strong><em> only</em></strong></p> <figure role="group" class="caption caption-img align-left"><img alt="A screenshot of the list of roles available with the new Virtual Attendee role selected to add to the available list for Site Managers." data-entity-type="file" data-entity-uuid="ded777f3-549d-4632-a1ca-4d116f6f21b1" height="299" src="/sites/g/files/dgvnsk511/files/inline-images/intranet-public-config-role-selection.png" width="328" /><figcaption>The new Virtual Attendee has been checked.</figcaption></figure><p>In the image to the left, the list of available Roles a Site Manager can select has been updated to include the new Virtual Attendee role. When a visitor submits an account request, this option will now show up for Site Managers in the People section.</p> <h4> </h4> <h4> </h4> <h4> </h4> <h4> </h4> <h4> </h4> <h4> </h4> <h4> </h4> <h4>Configure user account handling</h4> <p><strong><em>Can be completed by: </em></strong><em><strong>SiteFarm Team</strong></em><strong><em>, Site Builder</em></strong></p> <figure role="group" class="caption caption-img"><img alt="Screenshot showing the Account Handling section before and after configuration." data-entity-type="file" data-entity-uuid="d88e5333-01b6-45a3-8e73-1a43f970d631" src="/sites/g/files/dgvnsk511/files/inline-images/intranet-public-config-sitefarm-user-acct-handling.png" /><figcaption>The image on the left is the default settings that come with SiteFarm out of the box. The image on the right is our guide for the changes to make to your settings for this section.</figcaption></figure><ol><li>Navigate to <strong>Manage » Configuration » SiteFarm section » CAS Settings » USER ACCOUNT HANDLING </strong>label.</li> <li>Make the following changes: <ul><li>Uncheck Prevent normal login</li> <li>No change to Restrict email management</li> <li>Check Automatically register users</li> <li>Select Use a CAS attribute under Email address assignment</li> <li>Email attribute: Insert the token <strong>[user:mail]</strong>. Make sure to use this same email address in your <a href="/training/managers/site-configuration">Basic Site Configuration contact information</a> and your Contact form located at this pathway in your site: /admin/structure/contact and titled "Website Feedback".</li> <li>Check Automatically assign roles on user registration and select the created Role. In this case, it was Virtual Attendee.</li> </ul></li> </ol><h4>Configure Forced Login</h4> <p><strong><em>Can be completed by: </em></strong><em><strong>SiteFarm Team</strong></em><strong><em>, Site Manager, Site Builder</em></strong></p> <p>This section is what locks your site into an intranet configuration, but allows you to exclude specific pages in order to allow for basic functionality, like having a homepage to land on and options for creating an account and logging in and out of that account.</p> <p><img alt="Forced login options to restrict access." data-entity-type="file" data-entity-uuid="02532d15-a352-42af-bf5c-13c6ad55a2cd" height="276" src="/sites/g/files/dgvnsk511/files/inline-images/intranet-public-config-sitefarm-forced-login.png" width="298" class="align-right" />The screenshot on the right shows the necessary settings to provide basic functionality:</p> <p><strong>Enable</strong> - Checked. By default, if only this box is checked, the entire site is locked.</p> <p><strong>Negate the condition</strong> - Checked. By enabling this feature, it allows you to explicitly state which pages CAN be viewed by the public.</p> <p><strong>Pages</strong> - Specify pages by using their paths. Enter one path per line. The '*' character is a wildcard. An example path is <em>/user/*</em> for every user page. <em>&lt;front&gt;</em> is the front page.</p> <p>In this use case, we are listing:<br /> &lt;front&gt; - homepage<br /> /user/login - the page available by default to allow visitors to choose to login with an existing account, create a new account, or request a password reset<br /> /user/register - the page available by default that allows visitors to create an account<br /> /user/password - the page available by default that allows visitors to request a password reset</p> <p>If other pages need to be made public, they can be added here as well.</p> <h4>Configure Log Out Behavior</h4> <p><strong><em>Can be completed by: </em></strong><em><strong>SiteFarm Team</strong></em><strong><em>, Site Manager, Site Builder</em></strong></p> <ol><li>Navigate to <strong>Manage » Configuration » SiteFarm section » CAS Settings » LOG OUT BEHAVIOR </strong>label.</li> <li>Locate the <strong>Log out destination</strong> field.</li> <li>Enter a backslash: / <ul><li>Doing so will send the visitor back to the homepage, which has been set to be visible and accessible to the public.</li> </ul></li> <li>Scroll to the bottom and click the <strong>Save configuration</strong> button to finish.</li> </ol><hr /><h2 class="heading--underline">Account and Email settings</h2> <h4>Configure Account Settings</h4> <p><strong><em>Can be completed by: </em></strong><em><strong>SiteFarm Team</strong></em><strong><em>, Site Manager, Site Builder</em></strong></p> <p>The following settings deal with how accounts will be generated and what messages will be sent depending upon what part of the account creation process is triggered. </p> <figure role="group" class="caption caption-img"><img alt="A screenshot showing which settings in user account creation need to be changed in order to allow visitors to initiate an account request for approval by a Site Manager." data-entity-type="file" data-entity-uuid="c553ecae-608c-4fe7-8936-5692ee7314f8" height="690" src="/sites/g/files/dgvnsk511/files/inline-images/intranet-public-config-acct-settings-people.png" width="779" /><figcaption>The image on the left is the default settings that come with SiteFarm out of the box. The image on the right is our guide for the changes to make to your settings for this section.</figcaption></figure><ol><li>Navigate to <strong>Manage » Configuration » SiteFarm section » Account Settings » CONTACT SETTINGS </strong>label.</li> <li>Uncheck the Enable the personal contact form... box.</li> <li>Navigate down to the <strong>REGISTRATION AND CANCELLATION</strong> label.</li> <li>Change Who can register accounts to Visitors, but administrator approval is required.</li> <li>Check the Send emails to new users created by Administrators box.</li> <li>Enter an official site email address in the Notification email address field.</li> </ol><h4>Configure Email Settings</h4> <p><strong><em>Can be completed by: </em></strong><em><strong>SiteFarm Team</strong></em><strong><em>, Site Manager, Site Builder</em></strong></p> <ol><li>Navigate down to the <strong>REGISTRATION AND CANCELLATION » Email</strong> section.</li> <li>Click on the tab labeled "<strong>Welcome (New user created by an administrator)</strong>". We will offer an example of the verbiage to use, but feel free to update it according to your needs. <ul><li><strong>Update the Subject</strong> field to (excluding quotation marks):<br /> "You have created an account at [site:name]"</li> <li><strong>Update the Body </strong>field to (excluding quotation marks): <br /> "[user:display-name],<br /><br /> Thank you for registering at [site:name]. Your application for an account is currently pending approval. Once it has been approved, you will receive another email confirmation with instructions for viewing the live stream.<br /><br /> --  [site:name] team</li> </ul></li> <li>Click on the tab labeled "<strong>Welcome (awaiting approval)</strong>". We will offer an example of the verbiage to use, but feel free to update it according to your needs. <ul><li><strong>Update the Subject</strong> field to (excluding quotation marks):<br /> "Account details for [user:display-name] at [site:name] (pending admin approval)"</li> <li><strong>Update the Body </strong>field to (excluding quotation marks): <br /> "[user:display-name], <p>Thank you for registering at [site:name]. Your application for an account is currently pending approval. Once it has been approved, you will receive another email containing information about how to log in, set your password, and other details."</p> </li> </ul></li> <li> <p>Click on the tab labeled "<strong>Account activation</strong>". We will offer an example of the verbiage to use, but feel free to update it according to your needs.</p> <ul><li>Check the <strong>Notify user when account is activated</strong> box if it isn't already.</li> <li>Update the <strong>Subject</strong> field to (excluding quotation marks):<br /> "Account details for [user:display-name] at [site:name] (approved)"</li> <li>Update the <strong>Body</strong> field to (excluding quotation marks):<br /> "[user:display-name],<br /><br /> Your account at [site:name] has been activated.<br /><br /> You may now log in by clicking this link or copying and pasting it into your browser:<br /><br /> [site:login-url]<br /><br /> username: [user:account-name]<br /> password: Your password<br /><br /> You will be able to view the website only while logged in. If you have any questions, please let us know at [site:mail].<br /><br /> --  [site:name] team"</li> </ul></li> <li> <p>Scroll to the bottom of the page and click the <strong>Save configuration</strong> button to finish.</p> </li> </ol><hr /><h4>Add Login and Logout Menu Links</h4> <p><strong><em>Can be completed by: </em></strong><strong><em>Site Manager</em></strong></p> <ol><li>Navigate to <strong>Shortcuts » Main Menu</strong>.</li> <li>Add two new links and make sure they are positioned at the bottom of your list so they will appear on the far right of the main navigation bar: <ul><li>Login link = <strong>/user/login</strong></li> <li>Logout link = <strong>/user/logout</strong></li> </ul></li> <li>Click the <strong>Save</strong> button to finish.</li> </ol><p><strong>Note</strong>: only one of these links will appear on the main menu bar at a time depending on whether the person has logged in yet or not.</p> <hr /><h2 class="heading--underline">User Account Maintenance</h2> <h4>Process for Activating account requests</h4> <p><strong><em>Can be completed by: </em></strong><strong><em>Site Manager</em></strong></p> <ol><li>When someone creates an account, the email account associated with your site will receive an automated notification. These can be updated further in <strong>Manage » Configuration » People section » Account Settings</strong> if the messages need to provide more information for ease of processing for your internal staff.</li> <li>Navigate to your Manage <strong>» People</strong> section and locate the name of the person indicated in the email notification received. You will see an entry for them, but they will be listed as Blocked and not have a Role assigned to them.<figure role="group" class="caption caption-img"><img alt="Example of a pending account." data-entity-type="file" data-entity-uuid="de76b488-5f2c-4ec2-957a-f552a08953c6" src="/sites/g/files/dgvnsk511/files/inline-images/intranet-public-pending-account-blocked.png" /><figcaption>Example of a pending account.</figcaption></figure></li> <li>Click on the account's corresponding <strong>Edit</strong> button.</li> <li>Change the account's <strong>Status</strong> to <strong>Active</strong> and assign the appropriate Role, which in this example is Virtual Attendee.<br /><img alt="A sample account showing the status set to active and the example Role assigned." data-entity-type="file" data-entity-uuid="ab05f9e3-0cd2-461a-9f49-6ea3e5624328" height="531" src="/sites/g/files/dgvnsk511/files/inline-images/intranet-public-activate-user-acct.png" width="321" /></li> <li>Scroll to the bottom and click the <strong>Save</strong> button to finish. An automated message will be sent to the new account holder to provide them with the login information you entered in the Email Settings section.</li> </ol><hr /><h4>Filter accounts by Role</h4> <p><strong><em>Can be completed by: </em></strong><strong><em>Site Manager</em></strong></p> <p>You may need to do some housekeeping with your list, either to remove all of the users or to modify/delete specific ones. Using the filter option makes this much easier.</p> <ol><li>Navigate to Manage » People.</li> <li>From the Filter, use the Role's drop-down menu to select your desired Role (our example is Virtual Attendee) and click the Filter button.<br /><img alt="Filter users by Role." data-entity-type="file" data-entity-uuid="e347ce96-e4d9-40da-8744-897faba2a97e" height="320" src="/sites/g/files/dgvnsk511/files/inline-images/intranet-public-filter-accts-by-role.png" width="532" /></li> </ol><hr /><h4>Delete a user account</h4> <p><strong><em>Can be completed by: </em></strong><strong><em>Site Manager</em></strong></p> <ol><li>Navigate to <strong>Manage » People</strong>.</li> <li>Locate the user account in the list and click the corresponding <strong>Edit</strong> button.</li> <li>From the user's profile screen, scroll to the bottom of the page and click the <strong>Cancel account</strong> link located next to the Save button.</li> <li>On the<em> Are you sure you want to cancel the account for &lt;user&gt;?</em> page, select <strong>Delete the account and its content</strong>.</li> <li>Click the <strong>Cancel account</strong> button to finish.<br /><img alt="Make the selection for what to do with the account and click the Cancel account button." data-entity-type="file" data-entity-uuid="2dd35307-1cb8-4719-86aa-09222c25d313" height="237" src="/sites/g/files/dgvnsk511/files/inline-images/intranet-public-delete-user-acct1.png" width="470" /></li> </ol><hr /><h2 class="heading--underline">Final Comments</h2> <ol><li>We STRONGLY recommend thoroughly testing your registration process before making it live. You can keep it in limbo by waiting to enable the login and log out links. Test the creation and automated response steps by attempting to create a fake account using a browser's incognito mode.</li> <li>If you decide to implement this kind of intranet/registration system, let us know the name of the Role you would like to implement when you email us or complete the <a href="/form/service-request-form">Service Request Form</a>.</li> </ol></div> <div class="field field--name-field-sf-article-category field--type-entity-reference field--label-above"> <div class="field__label">Category</div> <div class="field__item"><a href="/articles/site-building" hreflang="en">Site Building</a></div> </div> <div class="field field--name-field-sf-tags field--type-entity-reference field--label-above"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/intranet" hreflang="en">Intranet</a></div> <div class="field__item"><a href="/tags/roles" hreflang="en">Roles</a></div> <div class="field__item"><a href="/tags/accounts" hreflang="en">Accounts</a></div> </div> </div> Wed, 30 Oct 2019 16:04:54 +0000 Jessica Hayes 4046 at https://sitefarm.ucdavis.edu Take in the View: Exclude the page you're on from a related content list https://sitefarm.ucdavis.edu/blog/take-view-exclude-page-youre-related-content-list <span class="field field--name-title field--type-string field--label-hidden">Take in the View: Exclude the page you&#039;re on from a related content list</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <span lang="" about="/user/6" typeof="schema:Person" property="schema:name" datatype="">Jessica Hayes</span> </span> <span class="field field--name-created field--type-created field--label-hidden">October 30, 2019</span> <div class="field field--name-field-sf-primary-image field--type-image field--label-hidden field__item"> <img src="/sites/g/files/dgvnsk511/files/styles/sf_landscape_16x9/public/images/article/ostraining-ContextualFilters.jpg?h=7aefd044&amp;itok=vxB1l27m" width="1280" height="720" alt="A hand is holding up a lense filter against a landscape background." title="Image credit: OSTraining.com" typeof="foaf:Image" class="image-style-sf-landscape-16x9" /> </div> <div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="https://sitefarm.ucdavis.edu/blog/721/feed" addthis:title="" addthis:description="OSTraining has put together a great use case showing how to use a View&#039;s contextual filters to ensure that the page you&#039;re on is not included in an attached block displaying related content. The article takes you step-by-step through the process and includes instructive screenshots to help keep you oriented through the process. If you&#039;re interested in building Views for your site, click through and take a look. How to use contextual filters in Drupal 8 Written by Jorge Montoya | OSTraining.com "> <a class="addthis_button_facebook"></a> <a class="addthis_button_linkedin"></a> <script> var addthis_share = { templates: { twitter: "OSTraining has put together a great use case showing how to use a View&#039;s contextual filters to ensure that the page you&#039;re on is not included in an attached block displaying related content. The article takes you step-by-step through the process and includes instructive screenshots to help keep you oriented through the process. If you&#039;re interested in building Views for your site, click through and take a look. " } } </script> <a class="addthis_button_twitter"></a> <a class="addthis_button_email"></a> <a class="addthis_button_compact"></a> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>OSTraining has put together a great use case showing how to use a View's contextual filters to ensure that the page you're on is not included in an attached block displaying related content. The article takes you step-by-step through the process and includes instructive screenshots to help keep you oriented through the process. If you're interested in building Views for your site, click through and take a look.</p> <p><a class="btn--alt" href="https://www.ostraining.com/blog/drupal/how-to-use-contextual-filters-in-drupal-8/">How to use contextual filters in Drupal 8</a></p> <p>Written by Jorge Montoya | <a href="https://www.ostraining.com/">OSTraining.com</a></p> </div> <div class="field field--name-field-sf-article-category field--type-entity-reference field--label-above"> <div class="field__label">Category</div> <div class="field__item"><a href="/articles/site-building" hreflang="en">Site Building</a></div> </div> <div class="field field--name-field-sf-tags field--type-entity-reference field--label-above"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/views" hreflang="en">Views</a></div> <div class="field__item"><a href="/tags/contextual-filters" hreflang="en">Contextual Filters</a></div> </div> </div> Wed, 30 Oct 2019 15:04:30 +0000 Jessica Hayes 4041 at https://sitefarm.ucdavis.edu "Why did my webform create multiple entries of the same submission?" https://sitefarm.ucdavis.edu/blog/why-did-my-webform-create-multiple-entries-same-submission <span class="field field--name-title field--type-string field--label-hidden">&quot;Why did my webform create multiple entries of the same submission?&quot;</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <span lang="" about="/user/6" typeof="schema:Person" property="schema:name" datatype="">Jessica Hayes</span> </span> <span class="field field--name-created field--type-created field--label-hidden">October 21, 2019</span> <div class="field field--name-field-sf-primary-image field--type-image field--label-hidden field__item"> <img src="/sites/g/files/dgvnsk511/files/styles/sf_landscape_16x9/public/images/article/stormtrooper-duplicate-entries.jpg?h=29234840&amp;itok=vxiUMseB" width="1280" height="720" alt="A row of Lego Stormtroopers, all of them facing away from the viewer except for a single one facing forward.&quot;" typeof="foaf:Image" class="image-style-sf-landscape-16x9" /> </div> <div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="https://sitefarm.ucdavis.edu/blog.rss" addthis:title="Latest Blog Posts" addthis:description="You&#039;ve set up your webform, it&#039;s live, people are beginning to submit responses, you go to check the results, and instead of one entry per person, you see three. Or five. Or eight. What is going on here? It took some investigation, but it appears it&#039;s possible that a few different combinations of settings in a webform can trigger a specific line of render code to repeat itself. When this happens, the triggered code creates multiple entries in your Results screen. An example of a submission affected by the triggered code resulting in four duplicate entries by the same person. IP address obscured for privacy.  Inline Confirmation is enabled It&#039;s possible that the manner you&#039;ve chosen to notify the person submitting your form that the process has completed successfully may be at fault. Something in the page refresh triggers the above-mentioned render code repeatedly. You can avoid this by taking the following steps: Navigate to Manage » Structure » Webforms or go directly to the page with your webform attached and use its contextual menu to Edit the form settings. In your form, click on the Settings » Confirmation submenu link. Under the Confirmation Type label, change your setting from Inline to Page. Scroll to the bottom of the screen and click the Save button to finish. Multiple Webforms on the same page The presence of two or more webforms on the same page may cause multiple entries. Verify that you haven&#039;t added the same webform as a block on a page with the full webform node. If you have multiple webform blocks on the page, consider testing if reducing them or restructuring how people access the webforms resolves the problem. Example: instead of having the forms all on one page, can you link to each one on their own page instead?  As needed, this article will be updated as more triggers and their solutions are identified.  "> <a class="addthis_button_facebook"></a> <a class="addthis_button_linkedin"></a> <script> var addthis_share = { templates: { twitter: "You&#039;ve set up your webform, it&#039;s live, people are beginning to submit responses, you go to check the results and instead of one entry per person you see three. Or five. Or eight. What is going on here? " } } </script> <a class="addthis_button_twitter"></a> <a class="addthis_button_email"></a> <a class="addthis_button_compact"></a> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>You've set up your webform, it's live, people are beginning to submit responses, you go to check the results, and instead of one entry per person, you see three. Or five. Or <em>eight</em>. What is going on here?</p> <p>It took some investigation, but it appears it's possible that a few different combinations of settings in a webform can trigger a specific line of render code to repeat itself. When this happens, the triggered code creates multiple entries in your Results screen.</p> <figure role="group" class="caption caption-img align-center"><img alt="A screenshot of a result set of five entries from the same person." data-entity-type="file" data-entity-uuid="0bc43206-ba94-4031-b6ff-4708535c2743" src="/sites/g/files/dgvnsk511/files/inline-images/webform-duplicate-triggered-entries.png" /><figcaption>An example of a submission affected by the triggered code resulting in four duplicate entries by the same person. IP address obscured for privacy.</figcaption></figure><p> </p> <h4>Inline Confirmation is enabled</h4> <p>It's possible that the manner you've chosen to notify the person submitting your form that the process has completed successfully may be at fault. Something in the page refresh triggers the above-mentioned render code repeatedly. You can avoid this by taking the following steps:</p> <ol><li>Navigate to <strong>Manage » Structure » Webforms</strong> or go directly to the page with your webform attached and use its <strong>contextual menu to Edit</strong> the form settings.</li> <li>In your form, click on the <strong>Settings » Confirmation</strong> submenu link.</li> <li>Under the <strong>Confirmation Type</strong> label, change your setting from <strong>Inline</strong> to <strong>Page</strong>.</li> <li>Scroll to the bottom of the screen and click the <strong>Save</strong> button to finish.</li> </ol><h4>Multiple Webforms on the same page</h4> <p>The presence of two or more webforms on the same page may cause multiple entries. Verify that you haven't added the same webform as a block on a page with the full webform node. If you have multiple webform blocks on the page, consider testing if reducing them or restructuring how people access the webforms resolves the problem. Example: instead of having the forms all on one page, can you link to each one on their own page instead? </p> <hr /><p>As needed, this article will be updated as more triggers and their solutions are identified. </p> </div> <div class="field field--name-field-sf-article-category field--type-entity-reference field--label-above"> <div class="field__label">Category</div> <div class="field__item"><a href="/articles/tips" hreflang="en">Tips, Hints, Best Practices</a></div> </div> <div class="field field--name-field-sf-tags field--type-entity-reference field--label-above"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/webforms" hreflang="en">Webforms</a></div> </div> </div> Mon, 21 Oct 2019 15:48:01 +0000 Jessica Hayes 3931 at https://sitefarm.ucdavis.edu "There was a problem logging in" https://sitefarm.ucdavis.edu/blog/there-was-problem-logging <span class="field field--name-title field--type-string field--label-hidden">&quot;There was a problem logging in&quot;</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <span lang="" about="/user/6" typeof="schema:Person" property="schema:name" datatype="">Jessica Hayes</span> </span> <span class="field field--name-created field--type-created field--label-hidden">August 30, 2019</span> <div class="field field--name-field-sf-primary-image field--type-image field--label-hidden field__item"> <img src="/sites/g/files/dgvnsk511/files/styles/sf_landscape_16x9/public/images/article/registration-login.jpg?h=bf5d81ba&amp;itok=c9IEMASO" width="1280" height="720" alt="A man looking at a tablet screen with very large fields for a username and password." typeof="foaf:Image" class="image-style-sf-landscape-16x9" /> </div> <div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="https://sitefarm.ucdavis.edu/blog/18/feed" addthis:title="" addthis:description="You thought you set up your site for CAS for the campus community, but your visitors are seeing &quot;There was a problem logging, please contact the site administrator&quot; even though they did log in and can see the content. What&#039;s going on here? Why the message shows up in the first place The Drupal application comes with its own built-in login system. If you decided to download and install Drupal for your own personal use, you would create a custom account name and password for your secure profile. Drupal looks for this information by default. Now, here at UC Davis, we use our Kerberos IDs and passwords to authenticate through CAS, and this requires the use of an extra module in Drupal that adds a different security doorway through which we SiteFarm users enter. Users have accounts on the site with their Kerberos information integrated directly into their profiles. When Site Managers lock specific pages or their entire site behind CAS—the create an intranet or secure certain pages to the campus community—people without accounts on your site are logging in through that CAS doorway. Drupal&#039;s default login process becomes confused saying there was a problem because this person logged in, but no account for them already exists or has been generated during their login and it triggers the error message. This creates a confusing experience for visitors who realize, &quot;Hey, why am I seeing this message when I&#039;m clearly in the site successfully and can read the content.&quot; Where are the messages coming from? Behind the scenes, your site&#039;s Configuration has a section specifically for alert messages to notify your users of system processes, some of which can legitimately involve login errors. The issue is that every field related to your error messages says the exact same thing by default when your site is generated. How can you fix this in order to avoid confusing your visitors? There was a problem...with the same message being used in each field!Modify your error message handling Please note these steps require you to have a Site Manager role in your SiteFarm site. Navigate to Manage » Configuration » SiteFarm section » CAS Settings. Expand the Error Handling label. It&#039;s a suggestion to review these in general, but specifically, in this use case we want to look at Local account does not exist. Update this message to something more like: &quot;You have authenticated through CAS to view this page&quot; and at least the ribbon will serve as a confirmation. You could always extend it, if necessary, to include &quot;If you are meant to have editing rights, but don&#039;t see them, contact us at {{enter contact info for your visitor}}&quot;. For possible future error handling, you may want to customize the other messages to at least have a better chance of determining what issue may have triggered the associated error message. Scroll to the bottom and click the Save configuration button to finish. "> <a class="addthis_button_facebook"></a> <a class="addthis_button_linkedin"></a> <script> var addthis_share = { templates: { twitter: "You thought you set up your site for CAS for the campus community, but your visitors are seeing &quot;There was a problem logging, please contact the site administrator&quot; even though they did log in and can see the content. What&#039;s going on here? " } } </script> <a class="addthis_button_twitter"></a> <a class="addthis_button_email"></a> <a class="addthis_button_compact"></a> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>You thought you set up your site for CAS for the campus community, but your visitors are seeing "There was a problem logging, please contact the site administrator" even though they <strong>did</strong> log in and <strong>can</strong> see the content. What's going on here?</p> <h4>Why the message shows up in the first place</h4> <p>The Drupal application comes with its own built-in login system. If you decided to download and install Drupal for your own personal use, you would create a custom account name and password for your secure profile. Drupal looks for this information by default. Now, here at UC Davis, we use our Kerberos IDs and passwords to authenticate through CAS, and this requires the use of an extra module in Drupal that adds a different security doorway through which we SiteFarm users enter. Users have accounts on the site with their Kerberos information integrated directly into their profiles.</p> <p>When Site Managers lock specific pages or their entire site behind CAS—the create an intranet or secure certain pages to the campus community—people <strong>without accounts on your site</strong> are logging in through that CAS doorway. Drupal's default login process becomes confused saying there was a problem because this person logged in, but no account for them already exists or has been generated during their login and it triggers the error message. This creates a confusing experience for visitors who realize, "Hey, why am I seeing this message when I'm clearly in the site successfully and can read the content."</p> <h4>Where are the messages coming from?</h4> <p>Behind the scenes, your site's Configuration has a section specifically for alert messages to notify your users of system processes, some of which can legitimately involve login errors. The issue is that every field related to your error messages <strong>says the exact same thing by default</strong> when your site is generated. How can you fix this in order to avoid confusing your visitors?</p> <figure role="group" class="caption caption-img"><img alt="A screenshot of the Error Handling section of CAS Settings, showing the repetition of the same error message regardless of the error case." data-entity-type="file" data-entity-uuid="9b3f5aba-ee28-4931-abb9-eba821784db8" height="774" src="/sites/g/files/dgvnsk511/files/inline-images/error-handling.png" width="422" /><figcaption>There was a problem...with the same message being used in each field!</figcaption></figure><h4>Modify your error message handling</h4> <p>Please note these steps require you to have a <strong>Site Manager</strong> role in your SiteFarm site.</p> <ol><li>Navigate to <strong>Manage » Configuration » SiteFarm section » CAS Settings</strong>.</li> <li>Expand the <strong>Error Handling</strong> label.</li> <li>It's a suggestion to review these in general, but specifically, in this use case we want to look at <strong>Local account does not exist</strong>. Update this message to something more like: "You have authenticated through CAS to view this page" and at least the ribbon will serve as a confirmation. You could always extend it, if necessary, to include "If you are meant to have editing rights, but don't see them, contact us at {{enter contact info for your visitor}}".</li> <li>For possible future error handling, you may want to customize the other messages to at least have a better chance of determining what issue may have triggered the associated error message.</li> <li>Scroll to the bottom and click the <strong>Save configuration</strong> button to finish.</li> </ol></div> <div class="field field--name-field-sf-article-category field--type-entity-reference field--label-above"> <div class="field__label">Category</div> <div class="field__item"><a href="/articles/tips" hreflang="en">Tips, Hints, Best Practices</a></div> </div> <div class="field field--name-field-sf-tags field--type-entity-reference field--label-above"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/configuration" hreflang="en">Configuration</a></div> <div class="field__item"><a href="/tags/errors" hreflang="en">Errors</a></div> </div> </div> Fri, 30 Aug 2019 16:06:21 +0000 Jessica Hayes 3896 at https://sitefarm.ucdavis.edu SiteFarm 6.2.0 Released https://sitefarm.ucdavis.edu/blog/sitefarm-620-released <span class="field field--name-title field--type-string field--label-hidden">SiteFarm 6.2.0 Released</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <span lang="" about="/user/6" typeof="schema:Person" property="schema:name" datatype="">Jessica Hayes</span> </span> <span class="field field--name-created field--type-created field--label-hidden">May 02, 2019</span> <div class="field field--name-field-sf-primary-image field--type-image field--label-hidden field__item"> <img src="/sites/g/files/dgvnsk511/files/styles/sf_landscape_16x9/public/images/article/illustrated-computer-support-service.jpg?h=c673cd1c&amp;itok=CrqOjJLK" width="1280" height="720" alt="Illustrated image of a person&#039;s workdesk, a laptop showing a split screen of computer code and a background wall showing how busy the person is." typeof="foaf:Image" class="image-style-sf-landscape-16x9" /> </div> <div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="https://sitefarm.ucdavis.edu/blog.rss" addthis:title="Latest Blog Posts" addthis:description="A minor release containing several bug fixes, small upgrades, and Drupal-released security patches was implemented on Sunday, April 28, 2019. If any of these changes fail to display/work for you, please clear both your browser&#039;s cache/history and your site&#039;s cache. Feature Updates Fancy File Delete permissions - Site Builders will now have the ability to add this module themselves; the update now includes assigning the appropriate user permissions to the site instance when enabled. JSON API updated - We have updated our JSON API module, and also included the new Subrequests module for users who customize and sub-theme their site. Lullabot has written an article titled Incredible Decoupled Performance with Subrequests, written by Mateu Aguiló Bosch explaining how this feature works. Honeypot Spam Filter - Many of you noticed a striking increase in spam a couple of months ago. We discovered hackers had figured out a way to identify and circumvent Honeypot&#039;s default values used to fool bots looking to autocomplete forms for spamming purposes. Our latest update changed those values to something unique to SiteFarm and we hope this greatly reduces the spam received. Bug Fixes Google custom search sort button - The word &quot;Relevance&quot; in the box was being broken and forced into a second line. The button&#039;s appearance is fixed. Menu links / Entity Clone conflict - Users reported that they were unable to edit their sites&#039; submenu block links. On further investigation, we discovered these sites also had the Entity Clone module enabled and it was introducing a code conflict resulting in a &quot;Temporarily Unavailable&quot; screen when attempting to  What&#039;s in the Pipeline? Drupal 8.7 Released on May 1, 2019 - The latest version of Drupal has dropped and, at long last, the Layout Builder initiative has been labeled &quot;stable&quot; for use. What this means is that the next step involves our developers evaluating the code and how/if this functionality can be added to SiteFarm. If it&#039;s feasible to include Layout Builder, the development will begin on this project and, as soon as possible, we&#039;ll also develop training material to assist users in understanding how this new functionality can be used and how it fits into the existing layout options. In the meanwhile, take a look at this demo video provided by the Drupal Community: "> <a class="addthis_button_facebook"></a> <a class="addthis_button_linkedin"></a> <script> var addthis_share = { templates: { twitter: "A minor release containing several bug fixes, small upgrades, and Drupal-released security patches was implemented on Sunday, April 28, 2019. " } } </script> <a class="addthis_button_twitter"></a> <a class="addthis_button_email"></a> <a class="addthis_button_compact"></a> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>A minor release containing several bug fixes, small upgrades, and Drupal-released security patches was implemented on Sunday, April 28, 2019. <strong>If any of these changes fail to display/work for you, please clear both your browser's cache/history and your site's cache.</strong></p> <h4>Feature Updates</h4> <ul><li><strong>Fancy File Delete permissions</strong> - Site Builders will now have the ability to add this module themselves; the update now includes assigning the appropriate user permissions to the site instance when enabled.</li> <li><strong>JSON API updated</strong> - We have updated our JSON API module, and also included the new Subrequests module for users who customize and sub-theme their site. Lullabot has written an article titled <a href="https://www.lullabot.com/articles/incredible-decoupled-performance-with-subrequests">Incredible Decoupled Performance with Subrequests</a>, written <span>by </span>Mateu Aguiló Bosch<span> explaining</span><span> how this feature works.</span></li> <li><span><strong>Honeypot Spam Filter</strong> - Many of you noticed a striking increase in spam a couple of months ago. We discovered hackers had figured out a way to identify and circumvent Honeypot's default values used to fool bots looking to autocomplete forms for spamming purposes. Our latest update changed those values to something unique to SiteFarm and we hope this greatly reduces the spam received.</span></li> </ul><h4>Bug Fixes</h4> <ul><li><strong>Google custom search sort button</strong> - The word "Relevance" in the box was being broken and forced into a second line. The button's appearance is fixed.</li> <li><strong>Menu links / Entity Clone conflict</strong> - Users reported that they were unable to edit their sites' submenu block links. On further investigation, we discovered these sites also had the Entity Clone module enabled and it was introducing a code conflict resulting in a "Temporarily Unavailable" screen when attempting to </li> </ul><h4>What's in the Pipeline?</h4> <ul><li><strong>Drupal 8.7 Released on May 1, 2019</strong> - The latest version of Drupal has dropped and, at long last, the Layout Builder initiative has been labeled "stable" for use. What this means is that the next step involves our developers evaluating the code and how/if this functionality can be added to SiteFarm. If it's feasible to include Layout Builder, the development will begin on this project and, as soon as possible, we'll also develop training material to assist users in understanding how this new functionality can be used and how it fits into the existing layout options. In the meanwhile, take a look at this demo video provided by the Drupal Community: <div class="responsive-embed" style="padding-bottom: 56.25%"><iframe width="480" height="270" src="https://www.youtube.com/embed/oB28lfIUcNU?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div> </li> </ul></div> <div class="field field--name-field-sf-article-category field--type-entity-reference field--label-above"> <div class="field__label">Category</div> <div class="field__item"><a href="/articles/changelog" hreflang="en">Changelogs</a></div> </div> <div class="field field--name-field-sf-tags field--type-entity-reference field--label-above"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/sitefarm-620" hreflang="en">SiteFarm 6.2.0</a></div> </div> </div> Thu, 02 May 2019 15:22:52 +0000 Jessica Hayes 3646 at https://sitefarm.ucdavis.edu Use Twig to create interactive webform calculations https://sitefarm.ucdavis.edu/blog/use-twig-create-interactive-webform-calculations <span class="field field--name-title field--type-string field--label-hidden">Use Twig to create interactive webform calculations</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <span lang="" about="/user/6" typeof="schema:Person" property="schema:name" datatype="">Jessica Hayes</span> </span> <span class="field field--name-created field--type-created field--label-hidden">April 01, 2019</span> <div class="field field--name-field-sf-primary-image field--type-image field--label-hidden field__item"> <img src="/sites/g/files/dgvnsk511/files/styles/sf_landscape_16x9/public/images/article/twig-form-calcs.jpg?h=c673cd1c&amp;itok=FJRY29ab" width="1280" height="720" alt="A single branch from a tree in focus with a blurred sunny background." title="Twig to the possibilities and expand what your forms can do." typeof="foaf:Image" class="image-style-sf-landscape-16x9" /> </div> <div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="https://sitefarm.ucdavis.edu/blog/721/feed" addthis:title="" addthis:description="We recently spoke with Ryan Jones from TAPS goClub group about a fascinating project to show commuters just how much pollution they are individually contributing to the environment. In addition to the eye-opening data it provides, the webform created by Ryan and his colleague Ramon Zavala also provides a perfect example of how you can incorporate calculations into your forms and share them with your users. The method for incorporating Twig into your webforms is worth knowing and we&#039;ll recreate Ryan and Ramon&#039;s form for you so you can understand the process. First, what is Twig? Twig is a template engine specifically for the PHP programming language. This probably doesn&#039;t do much to clear this up for you, so, to put this more simply, Twig allows you to create reusable snippets of code containing placeholder tokens that can be saved as templates to output information in a structured way.  Example with tokens in bold: {{ content_title }} Create a Webform The process begins by creating a basic webform. If you haven&#039;t done one before, we recommend you begin with Understanding Webforms, available in the Training for Everyone section. Navigate to Manage » Structure » Webforms. Click the + Add webform button. Provide a title. We&#039;ll use their original name and call ours &#039;Commute Calculator&#039;. Click Save to continue. From within your new form&#039;s Build tab, add the following using the + Add element button: Text field - titled Roundtrip Miles Per Day Change Key [Edit} - commute_distance (this is the machine name of your field) Limited: 1 Min/Max Length: 1 / 3 Size: 3 Input mask: Decimal Field is required Text field - titled Fuel Efficiency Limited: 1 Min/Max Length: 1 / 2 Input mask: Decimal Field is required Text field - titled Price Per Gallon of Gas Change Key [Edit} - price_for_gas Limited: 1 Min/Max Length: 1 / 6 Placeholder: $ Input mask: Decimal Field is required Text field - titled Days of Commuting Per Month Change Key [Edit] - days_of_work Limited: 1 Min/Max Length: 1 / 2 Placeholder: Number of days Field is required This outputs the following elements in your form&#039;s list: Note the KEY name; this will be integral to the calculation process.   Understanding how to read and write Twig calculations Here is an example of one of the calculations we&#039;re going to use: {{ (data.commute_distance / data.fuel_efficiency)|round(1, &#039;ceil&#039;) }} gal used per day As the calculation term suggests, this is actually a mathematical equation, so we have to keep that fact in mind as we proceed and understand how our elements are written and structured so we get the output we expect to see. What follows is a breakdown of each of the parts that make up the above calculation. {{ token }}  When you see double braces, this a token or a placeholder. The token, if referencing a specific form field, should include the field&#039;s Key machine name. In programming, we would call this a variable; a container for a value we want, but we won&#039;t know what it is until the equation is calculated.  {{ data.token }} We declare the type of object this information represents. We&#039;re telling the template engine that the content we&#039;re pulling from the specific form field is of the Data object type. If you&#039;re not sure which to use, you can reference the list in the Help with Twig list below or via the link by the same title directly in the Computer Twig field type in your webform. Help with Twig Learn about Twig and how it is used in Drupal. The following variables are available: {{ webform }} {{ webform_submission }} {{ elements }} {{ elements_flattened }} {{ data.element_key }} {{ data.element_key.delta }} {{ data.composite_element_key.subelement_key }} {{ data.composite_element_key.delta.subelement_key }} {{ serial }} {{ sid }} {{ uuid }} {{ token }} {{ uri }} {{ created }} {{ completed }} {{ changed }} {{ in_draft }} {{ current_page }} {{ remote_addr }} {{ uid }} {{ langcode }} {{ webform_id }} {{ entity_type }} {{ entity_id }} {{ locked }} {{ sticky }} {{ notes }} You can also output tokens using the webform_token() function. {{ webform_token(&#039;[webform_submission:values:element_value]&#039;, webform_submission, [], options) }} {{ ( data.token / data.token ) }}  Just like in math equations, we have to respect the order of operations. In the example, we eventually want to make sure our final number is rounded up to a whole value, but without a way to separate the equation from the roundup function, we might still arrive at a number with a decimal. We want to calculate distance commuted divided by the fuel efficiency first, so we isolate this using brackets, after which it will apply any additional instructions, such as the |round syntax described below to round the number up to a whole number. {{ ( data.token / data.token ) }} plain text Anything you add outside of the double braces will be printed out as plain text. In our specific example here, the number outputted by our calculation will be followed by &#039;gal used per day&#039; to make it clearer for the submitter what the data total is referencing. {{ ( data.token / data.token ) | round(1, &#039;ceil&#039;) }} plain text Next, we want to make sure we get a whole number from this equation, so we&#039;ll add some additional syntax that instructs the engine to round up so we avoid having any decimal points in our output. Add Twig to perform the calculations While in the Build tab, click on the + Add element button, then search for the Computed Twig element to add each of the following Computed Twig elements: Computed Twig - titled Gallons Per Day Display on: Both form and viewed submission Mode: Auto-detect Computed value/markup: {{(data.commute_distance / data.fuel_efficiency)|round(1, &#039;ceil&#039;)}} gal used per day Automatically update the computed value using Ajax: Check Computed Twig - titled Cost of Fuel Per Day Display on: Both form and view submissions Mode: Auto-detect Computed value/markup: ${{(data.commute_distance * data.price_for_gas / data.fuel_efficiency)|number_format(2, &#039;.&#039;, &#039;,&#039;)}} spent per day Automatically update the computed value using Ajax: Check Computed Twig - titled Cost of Fuel Per Month Display on: Both form and view submissions Mode: Auto-detect Computed value/markup: ${{(data.commute_distance * data.price_for_gas * data.days_of_work / data.fuel_efficiency)|number_format(2)}} spent per month Automatically update the computed value using Ajax: Check Computed Twig - titled KG of Pollution Display on: Both form and view submissions Mode: Auto-detect Computed value/markup: {{(8.89 * data.commute_distance * data.days_of_work / data.fuel_efficiency)|round(1, &#039;ceil&#039;)}} kg of co2 Automatically update the computed value using Ajax: Check Presentation Change To pretty up ours, we created a container using the Fieldset element and nested all the Computer Twig fields inside of it, but otherwise this represents almost the exact form built by the goClub site. Final Thoughts This is a great way to add dynamic functionality to your webforms; it provides instant gratification to your visitors and, on submission, will store the submitted data for your use. As with all other webforms, you can configure email handlers to submit the data to the location or email account of your choice, or leave it in your site&#039;s database to export at a later time.  "> <a class="addthis_button_facebook"></a> <a class="addthis_button_linkedin"></a> <script> var addthis_share = { templates: { twitter: "We recently spoke with Ryan Jones from TAPS goClub group about a fascinating project to show commuters just how much pollution they are individually contributing to the environment. In addition to the eye-opening data it provides, the webform created by Ryan and his colleague Ramon Zavala also provides a perfect example of how you can incorporate calculations into your forms and share them with your users. " } } </script> <a class="addthis_button_twitter"></a> <a class="addthis_button_email"></a> <a class="addthis_button_compact"></a> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>We recently spoke with Ryan Jones from TAPS <a href="https://goclub.ucdavis.edu/">goClub</a> group about a fascinating project to show commuters just how much pollution they are individually contributing to the environment. In addition to the eye-opening data it provides, the webform created by Ryan and his colleague Ramon Zavala also provides a perfect example of how you can incorporate calculations into your forms and share them with your users.</p> <p>The method for incorporating Twig into your webforms is worth knowing and we'll recreate Ryan and Ramon's form for you so you can understand the process.</p> <h3>First, what is Twig?</h3> <p>Twig is a <a href="https://en.wikipedia.org/wiki/Twig_(template_engine)">template engine specifically for the PHP programming language</a>. This probably doesn't do much to clear this up for you, so, to put this more simply, Twig allows you to create reusable snippets of code containing placeholder tokens that can be saved as templates to output information in a structured way. </p> <blockquote> <p>Example with tokens in bold:<br /> &lt;p&gt;&lt;a href="<strong>{{ id }}</strong>"&gt;<strong>{{ content_title }}</strong>&lt;/a&gt;&lt;/p&gt;</p> </blockquote> <h3>Create a Webform</h3> <p>The process begins by creating a basic webform. If you haven't done one before, we recommend you begin with <a href="/training/all/understanding-web-forms">Understanding </a><a href="/training/all/understanding-web-forms">Webforms</a>, available in the <a href="/training/all">Training for Everyone</a> section.</p> <ol><li>Navigate to <strong>Manage » Structure » </strong><strong>Webforms</strong>.</li> <li>Click the <strong>+ Add webform</strong> button.</li> <li>Provide a <strong>title</strong>. We'll use their original name and call ours '<strong>Commute Calculator</strong>'.</li> <li>Click <strong>Save</strong> to continue.</li> <li>From within your new form's <strong>Build</strong> tab, add the following using the <strong>+ Add element</strong> button: <ul><li><strong>Text field - titled Roundtrip Miles Per Day</strong> <ul><li>Change Key [Edit} - commute_distance (this is the machine name of your field)</li> <li>Limited: 1</li> <li>Min/Max Length: 1 / 3</li> <li>Size: 3</li> <li>Input mask: Decimal</li> <li>Field is required</li> </ul></li> <li><strong>Text field - titled Fuel Efficiency</strong> <ul><li>Limited: 1</li> <li>Min/Max Length: 1 / 2</li> <li>Input mask: Decimal</li> <li>Field is required</li> </ul></li> <li><strong>Text field - titled Price Per Gallon of Gas</strong> <ul><li>Change Key [Edit} - price_for_gas</li> <li>Limited: 1</li> <li>Min/Max Length: 1 / 6</li> <li>Placeholder: $</li> <li>Input mask: Decimal</li> <li>Field is required</li> </ul></li> <li><strong>Text field - titled Days of Commuting Per Month</strong> <ul><li>Change Key [Edit] - days_of_work</li> <li>Limited: 1</li> <li>Min/Max Length: 1 / 2</li> <li>Placeholder: Number of days</li> <li>Field is required</li> </ul></li> </ul></li> </ol><p>This outputs the following elements in your form's list:</p> <figure role="group" class="caption caption-img"><img alt="A screenshot of our list of form fields, their type and key name." data-entity-type="file" data-entity-uuid="c94a9a98-01dc-4efd-8aba-1b6d94e603d6" src="/sites/g/files/dgvnsk511/files/inline-images/twig-form-textfields_0.png" /><figcaption>Note the KEY name; this will be integral to the calculation process.</figcaption></figure><p>  </p> <h3>Understanding how to read and write Twig calculations</h3> <p>Here is an example of one of the calculations we're going to use:</p> <blockquote> <p>{{ (data.commute_distance / data.fuel_efficiency)|round(1, 'ceil') }} gal used per day</p> </blockquote> <p>As the calculation term suggests, this is actually a mathematical equation, so we have to keep that fact in mind as we proceed and understand how our elements are written and structured so we get the output we expect to see. What follows is a breakdown of each of the parts that make up the above calculation.</p> <p><strong>{{ token }}</strong> </p> <p>When you see double braces, this a token or a placeholder. The token, if referencing a specific form field, should include the field's Key machine name. In programming, we would call this a variable; a container for a value we want, but we won't know what it is until the equation is calculated. </p> <p>{{ <strong>data</strong>.token }}</p> <p>We declare the type of object this information represents. We're telling the template engine that the content we're pulling from the specific form field is of the Data object type. If you're not sure which to use, you can reference the list in the Help with Twig list below or via the link by the same title directly in the Computer Twig field type in your webform.</p> <ul class="list--accordion"><li>Help with Twig</li> <li>Learn about <a href="https://twig.sensiolabs.org/">Twig</a> and how it is used in <a href="https://www.drupal.org/docs/8/theming/twig">Drupal</a>.<br /><br /> The following variables are available:<br /> {{ webform }}<br /> {{ webform_submission }}<br /> {{ elements }}<br /> {{ elements_flattened }}<br /> {{ data.element_key }}<br /> {{ data.element_key.delta }}<br /> {{ data.composite_element_key.subelement_key }}<br /> {{ data.composite_element_key.delta.subelement_key }}<br /> {{ serial }}<br /> {{ sid }}<br /> {{ uuid }}<br /> {{ token }}<br /> {{ uri }}<br /> {{ created }}<br /> {{ completed }}<br /> {{ changed }}<br /> {{ in_draft }}<br /> {{ current_page }}<br /> {{ remote_addr }}<br /> {{ uid }}<br /> {{ langcode }}<br /> {{ webform_id }}<br /> {{ entity_type }}<br /> {{ entity_id }}<br /> {{ locked }}<br /> {{ sticky }}<br /> {{ notes }}<br /> You can also output tokens using the webform_token() function.<br /><br /> {{ webform_token('[webform_submission:values:element_value]', webform_submission, [], options) }}</li> </ul><p>{{ <strong>( <em>data</em>.<em>token / data.token </em>)</strong> }} </p> <p>Just like in math equations, we have to respect the order of operations. In the example, we eventually want to make sure our final number is rounded up to a whole value, but without a way to separate the equation from the roundup function, we might still arrive at a number with a decimal. We want to calculate distance commuted divided by the fuel efficiency first, so we isolate this using brackets, after which it will apply any additional instructions, such as the <strong>|round</strong> syntax described below to round the number up to a whole number.</p> <p>{{ ( <em>data.token / data.token </em>) }} <strong><em>plain text</em></strong></p> <p>Anything you add outside of the double braces will be printed out as plain text. In our specific example here, the number outputted by our calculation will be followed by 'gal used per day' to make it clearer for the submitter what the data total is referencing.</p> <p>{{ ( <em>data.token / data.token </em>) <strong>| round(1, 'ceil')</strong> }} <em>plain text</em></p> <p>Next, we want to make sure we get a whole number from this equation, so we'll add some additional syntax that instructs the engine to round up so we avoid having any decimal points in our output.</p> <h3>Add Twig to perform the calculations</h3> <ol><li>While in the <strong>Build</strong> tab, click on the <strong>+ Add element</strong> button, then search for the <strong>Computed Twig</strong> element to add each of the following Computed Twig elements: <ol><li><strong>Computed Twig - titled Gallons Per Day</strong> <ol><li>Display on: Both form and viewed submission</li> <li>Mode: Auto-detect</li> <li>Computed value/markup:<br /> {{(data.commute_distance / data.fuel_efficiency)|round(1, 'ceil')}} gal used per day</li> <li>Automatically update the computed value using Ajax: Check</li> </ol></li> <li><strong>Computed Twig - titled Cost of Fuel Per Day</strong> <ol><li>Display on: Both form and view submissions</li> <li>Mode: Auto-detect</li> <li>Computed value/markup:<br /> ${{(data.commute_distance * data.price_for_gas / data.fuel_efficiency)|number_format(2, '.', ',')}} spent per day</li> <li>Automatically update the computed value using Ajax: Check</li> </ol></li> <li><strong>Computed Twig - titled Cost of Fuel Per Month</strong> <ol><li>Display on: Both form and view submissions</li> <li>Mode: Auto-detect</li> <li>Computed value/markup:<br /> ${{(data.commute_distance * data.price_for_gas * data.days_of_work / data.fuel_efficiency)|number_format(2)}} spent per month</li> <li>Automatically update the computed value using Ajax: Check</li> </ol></li> <li><strong>Computed Twig - titled KG of Pollution</strong> <ol><li>Display on: Both form and view submissions</li> <li>Mode: Auto-detect</li> <li>Computed value/markup:<br /> {{(8.89 * data.commute_distance * data.days_of_work / data.fuel_efficiency)|round(1, 'ceil')}} kg of co2</li> <li>Automatically update the computed value using Ajax: Check</li> </ol></li> </ol></li> </ol><h3>Presentation Change</h3> <p>To pretty up ours, we created a container using the Fieldset element and nested all the Computer Twig fields inside of it, but otherwise this represents almost the exact form built by the goClub site.</p> <h3>Final Thoughts</h3> <p>This is a great way to add dynamic functionality to your webforms; it provides instant gratification to your visitors and, on submission, will store the submitted data for your use. As with all other webforms, you can configure email handlers to submit the data to the location or email account of your choice, or leave it in your site's database to export at a later time. </p> </div> <div class="field field--name-field-sf-article-category field--type-entity-reference field--label-above"> <div class="field__label">Category</div> <div class="field__item"><a href="/articles/site-building" hreflang="en">Site Building</a></div> </div> <div class="field field--name-field-sf-tags field--type-entity-reference field--label-above"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/webforms" hreflang="en">Webforms</a></div> <div class="field__item"><a href="/tags/recipes" hreflang="en">Recipes</a></div> <div class="field__item"><a href="/tags/calculations" hreflang="en">Calculations</a></div> <div class="field__item"><a href="/tags/development" hreflang="en">Development</a></div> </div> </div> Mon, 01 Apr 2019 15:49:19 +0000 Jessica Hayes 3626 at https://sitefarm.ucdavis.edu Take in the View: Create a multi-tag filter system for visitors https://sitefarm.ucdavis.edu/blog/take-view-create-multi-tag-filter-system-visitors <span class="field field--name-title field--type-string field--label-hidden">Take in the View: Create a multi-tag filter system for visitors</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <span lang="" about="/user/6" typeof="schema:Person" property="schema:name" datatype="">Jessica Hayes</span> </span> <span class="field field--name-created field--type-created field--label-hidden">March 06, 2019</span> <div class="field field--name-field-sf-primary-image field--type-image field--label-hidden field__item"> <img src="/sites/g/files/dgvnsk511/files/styles/sf_landscape_16x9/public/images/article/socialmedia-word-cloud.png?h=6992355f&amp;itok=U1n_fdbx" width="1280" height="720" alt="Social media word cloud" title="Help your visitors find connected content" typeof="foaf:Image" class="image-style-sf-landscape-16x9" /> </div> <div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="https://sitefarm.ucdavis.edu/blog.rss" addthis:title="Latest Blog Posts" addthis:description="Project Scope We recently had a feature request from a client looking for a visitor-facing tag filter system to find content that shares more than one tag. As this is a niche request, the View won&#039;t be added to the service, but it&#039;s an interesting exercise in creating a user interface that allows your visitors to drill down to the specific topic content they want to see. Project Outline Create a new View Design it as a table with all listed content linked to its content Allow the visitor to see an exposed filter system Let that person select one or more tags from the list Steps Create your custom View Navigate to Manage » Structure » Views. Click the + Add View button. On the Add View screen, provide the following: View name: Tag Filter (name it however you please, but this will be the name used in this recipe) View settings: Show Content of type All tagged with sorted by Unsorted Page settings: check the box Page title: Tag Filter Path: /tag-filter Page display settings: Table Click the Save and edit button. Add the new Fields to your content list Locate the FIELDS section in the first column of your View and click the Add button. Add the following with the indicated configurations: ID: Content Exclude from display: Check the box Tags: Content No changes needed Click the downward arrow next to the FIELDS Add button and click Rearrange. Use the pull handle to drag the fields into the following order: ID, Title, Tags, then click Apply. Scroll to the bottom and click the Save button. Configure the filter for your View Locate the FILTER CRITERIA section in the first column of your View. By default, the section already includes Published ( = Yes) that we will continue to use, but we still need one for our tags. Click the Add button for the FILTER CRITERIA section. Select Tags (field_sf_tags) from the list. Click the Add and configure filter criteria button. In the Configure extra settings for filter criterion Content: Tags (field_sf_tags) dialog box, select the following options: Vocabulary: Tags Selection type (Note: what you choose here is up to you. Consider that a dropdown menu might be unwieldy if it&#039;s particularly long but has the benefit of showing a visitor what is actually available versus a cleaner autocomplete but requires the visitor to know what tags to type in): Dropdown Autocomplete Click Apply and continue. In the Configure filter criterion: Content: Tags (field_sf_tags) dialog box, select the following options: Checked: Expose this filter to visitors, to allow them to change it Filter type to expose: Single filter Label: Select one of more Tags Operator: Is one of Expose Operator: Select terms from vocabulary : Leave unchanged Checked: Allow multiple selections Checked: Reduce duplicates Click Apply. Scroll to the bottom and click the Save button. Update the Pager Setting In the Page display, locate the PAGER section in the middle column. Click on Use pager: Mini. Change to: Paged output, full pager. Click Apply (all displays). Click the Apply button. Scroll to the bottom and click the Save button. Add a Block to the View Creating the block expands how the View can be used and helps implement the exposed filter block option. Under Displays, click the + Add button and select Block from the menu. Scroll to the bottom and click the Save button. Configure the Exposed Filter Block Return to the Page display. Click the Advanced label in the third column to expand it. Change EXPOSED FORM » Exposed form in block: No to Yes, then click the Apply button. Return to the Block display. Locate the PAGER section in the middle column. Change the Link Display and set the following configuration: For: This block setting From None to Custom URL Custom URL: the pathway where your page is located. In our example, that would be &#039;tag-filter&#039; but in this case, it is essential to leave off the preceding slash. Click the Apply (this display) button. Click on EXPOSED FORM » Exposed form style » Settings and, in the dialog box, check the box for Include reset button (resets all applied exposed filters) to include a Reset button. Click Apply.  Locate and expand the ADVANCED section and change the following: Locate and click Use AJAX. Check Use AJAX. Click Apply (all displays) to finish. Scroll to the bottom and click the Save button. Test your new Tag Filter View page Navigate to your View page by either typing in the URL you created (example: adding /tag-filter to my site&#039;s domain name) or, while in your View&#039;s Page display mode, look to the far right for the View page button. Add your tag filter operator: While on your View page, click the Place block button in the upper right corner. Click the + symbol for the Second Sidebar region. Please note, you can select whatever region you prefer, but we&#039;ll use the Sidebar for this example. Being typing &#039;Exposed form&#039; and look for a block name that matches what you named your View. In this example, I&#039;m looking for Exposed form: tag_filter-page_1. Click Place block to select the appropriate block. Click Save block. Review and test your work by selecting one or more tags from the list and clicking the Apply button. Final Thoughts This particular View example was built from scratch, but it just as easily could have been created by duplicating an existing View, such as Articles Latest News or Articles Latest Blog. The difference between these would be that our example here uses a table for its page display output, but one of these copied Views would output a list of familiar teasers instead. It&#039;s worth experimenting with the outputs to see what kind of listing works best for the type of information you want to share with your visitors. "> <a class="addthis_button_facebook"></a> <a class="addthis_button_linkedin"></a> <script> var addthis_share = { templates: { twitter: "We recently had a feature request from a client looking for a visitor-facing tag filter system to find content that shares more than one tag. As this is a niche request, the View won&#039;t be added to the service, but it&#039;s an interesting exercise in creating a user interface that allows your visitors to drill down to the specific topic content they want to see. " } } </script> <a class="addthis_button_twitter"></a> <a class="addthis_button_email"></a> <a class="addthis_button_compact"></a> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><h2 class="heading--underline">Project Scope</h2> <p>We recently had a feature request from a client looking for a visitor-facing tag filter system to find content that shares more than one tag. As this is a niche request, the View won't be added to the service, but it's an interesting exercise in creating a user interface that allows your visitors to drill down to the specific topic content they want to see.</p> <h2 class="heading--underline">Project Outline</h2> <ul><li>Create a new View</li> <li>Design it as a table with all listed content linked to its content</li> <li>Allow the visitor to see an exposed filter system</li> <li>Let that person select one or more tags from the list</li> </ul><h2 class="heading--underline">Steps</h2> <h4>Create your custom View</h4> <ol><li>Navigate to <strong>Manage » Structure » Views</strong>.</li> <li>Click the <strong>+ Add View</strong> button.</li> <li>On the <strong>Add View</strong> screen, provide the following: <ul><li><strong>View name</strong>: Tag Filter (name it however you please, but this will be the name used in this recipe)</li> <li><strong>View settings</strong>: Show <strong>Content</strong> of type <strong>All</strong> tagged with <strong>&lt;empty&gt;</strong> sorted by <strong>Unsorted</strong></li> <li><strong>Page settings:</strong> check the box <ul><li><strong>Page title</strong>: Tag Filter</li> <li><strong>Path</strong>: /tag-filter</li> <li><strong>Page display settings</strong>: Table</li> </ul></li> </ul></li> <li>Click the <strong>Save and edit</strong> button.</li> </ol><h4>Add the new Fields to your content list</h4> <ol><li>Locate the <strong>FIELDS</strong> section in the first column of your View and click the <strong>Add</strong> button.</li> <li>Add the following with the indicated configurations: <ul><li><strong>ID: Content</strong> <ul><li>Exclude from display: Check the box</li> </ul></li> <li><strong>Tags: Content</strong> <ul><li>No changes needed</li> </ul></li> </ul></li> <li>Click the <strong>downward arrow</strong> next to the FIELDS Add button and click <strong>Rearrange</strong>.</li> <li>Use the pull handle to drag the fields into the following order: ID, Title, Tags, then click Apply.</li> <li>Scroll to the bottom and click the <strong>Save</strong> button.</li> </ol><h4>Configure the filter for your View</h4> <ol><li>Locate the <strong>FILTER CRITERIA</strong> section in the first column of your View. By default, the section already includes <strong>Published ( = Yes)</strong> that we will continue to use, but we still need one for our tags.</li> <li>Click the <strong>Add </strong>button for the FILTER CRITERIA section.</li> <li>Select <strong>Tags (field_sf_tags)</strong> from the list.</li> <li>Click the <strong>Add and configure filter criteria</strong> button.</li> <li>In the <strong>Configure extra settings for filter criterion Content: Tags (field_sf_tags)</strong> dialog box, select the following options: <ul><li><strong>Vocabulary</strong>: Tags</li> <li><strong>Selection type</strong> (Note: what you choose here is up to you. Consider that a dropdown menu might be unwieldy if it's particularly long but has the benefit of showing a visitor what is actually available versus a cleaner autocomplete but requires the visitor to know what tags to type in): <ul><li>Dropdown</li> <li>Autocomplete</li> </ul></li> <li>Click <strong>Apply and continue.</strong></li> </ul></li> <li>In the <strong>Configure filter criterion: Content: Tags (field_sf_tags)</strong> dialog box, select the following options: <ol><li><strong>Checked</strong>: Expose this filter to visitors, to allow them to change it</li> <li><strong>Filter type to expose</strong>: Single filter</li> <li><strong>Label</strong>: Select one of more Tags</li> <li><strong>Operator</strong>: Is one of</li> <li><strong>Expose Operator</strong>: &lt;optional&gt;</li> <li><strong>Select terms from vocabulary &lt;your preferred vocabulary&gt;</strong>: Leave unchanged</li> <li><strong>Checked</strong>: Allow multiple selections</li> <li><strong>Checked</strong>: Reduce duplicates</li> <li>Click <strong>Apply</strong>.</li> </ol></li> <li>Scroll to the bottom and click the <strong>Save</strong> button.</li> </ol><h4>Update the Pager Setting</h4> <ol><li>In the <strong>Page</strong> display, locate the <strong>PAGER</strong> section in the middle column.</li> <li>Click on <strong>Use pager: Mini</strong>.</li> <li>Change to: <strong>Paged output, full pager.</strong></li> <li>Click <strong>Apply (all displays)</strong>.</li> <li>Click the <strong>Apply</strong> button.</li> <li>Scroll to the bottom and click the <strong>Save</strong> button.</li> </ol><h4>Add a Block to the View</h4> <p>Creating the block expands how the View can be used and helps implement the exposed filter block option.</p> <ol><li>Under <strong>Displays</strong>, click the <strong>+ Add </strong>button and select <strong>Block</strong> from the menu.</li> <li>Scroll to the bottom and click the <strong>Save</strong> button.</li> </ol><h4>Configure the Exposed Filter Block</h4> <ol><li>Return to the <strong>Page</strong> display. <ul><li>Click the <strong>Advanced</strong> label in the third column to expand it.</li> <li>Change <strong>EXPOSED FORM » Exposed form in block: No</strong> to <strong>Yes</strong>, then click the <strong>Apply</strong> button.</li> </ul></li> <li>Return to the <strong>Block</strong> display. <ul><li>Locate the <strong>PAGER</strong> section in the middle column. Change the <strong>Link Display</strong> and set the following configuration: <ul><li><strong>For</strong>: This block setting</li> <li><strong>From None to Custom URL </strong> <ul><li><strong>Custom URL</strong>: the pathway where your page is located. In our example, that would be 'tag-filter' but in this case, it is essential to leave off the preceding slash.<br /><img alt="An example of the custom URL field showing that the preceding slash has been deliberately omitted." data-entity-type="file" data-entity-uuid="dd3062bb-1fdd-4b4a-bc04-8140b467d9ed" height="157" src="/sites/g/files/dgvnsk511/files/inline-images/view-recipe-tag-filter-custom-url.png" width="321" /></li> </ul></li> <li>Click the <strong>Apply (this display)</strong> button.</li> </ul></li> <li>Click on <strong>EXPOSED FORM » Exposed form style » Settings</strong> and, in the dialog box, check the box for <strong>Include reset button (resets all applied exposed filters)</strong> to include a Reset button. Click <strong>Apply</strong>. </li> <li>Locate and expand the <strong>ADVANCED</strong> section and change the following: <ul><li>Locate and click <strong>Use AJAX</strong>.</li> <li><strong>Check</strong> Use AJAX.</li> <li>Click <strong>Apply (all displays)</strong> to finish.</li> </ul></li> <li>Scroll to the bottom and click the <strong>Save</strong> button.</li> </ul></li> </ol><h4>Test your new Tag Filter View page</h4> <ol><li>Navigate to your View page by either typing in the URL you created (example: adding /tag-filter to my site's domain name) or, while in your View's Page display mode, look to the far right for the <strong>View page</strong> button.</li> <li>Add your tag filter operator: <ul><li>While on your View page, click the <strong>Place block</strong> button in the upper right corner.</li> <li>Click the <strong>+</strong> symbol for the <strong>Second Sidebar</strong> region. Please note, you can select whatever region you prefer, but we'll use the Sidebar for this example.</li> <li>Being typing '<strong>Exposed form</strong>' and look for a block name that matches what you named your View. In this example, I'm looking for <strong>Exposed form: tag_filter-page_1</strong>.</li> <li>Click <strong>Place block</strong> to select the appropriate block.</li> <li>Click <strong>Save block</strong>.</li> </ul></li> <li>Review and test your work by selecting one or more tags from the list and clicking the <strong>Apply</strong> button.</li> </ol><h2 class="heading--underline">Final Thoughts</h2> <p>This particular View example was built from scratch, but it just as easily could have been created by duplicating an existing View, such as Articles Latest News or Articles Latest Blog. The difference between these would be that our example here uses a table for its page display output, but one of these copied Views would output a list of familiar teasers instead. It's worth experimenting with the outputs to see what kind of listing works best for the type of information you want to share with your visitors.</p> </div> <div class="field field--name-field-sf-article-category field--type-entity-reference field--label-above"> <div class="field__label">Category</div> <div class="field__item"><a href="/articles/site-building" hreflang="en">Site Building</a></div> </div> <div class="field field--name-field-sf-tags field--type-entity-reference field--label-above"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/recipes" hreflang="en">Recipes</a></div> <div class="field__item"><a href="/tags/views" hreflang="en">Views</a></div> <div class="field__item"><a href="/tags/development" hreflang="en">Development</a></div> <div class="field__item"><a href="/tags/site-builder" hreflang="en">Site Builder</a></div> <div class="field__item"><a href="/tags/meta-tags" hreflang="en">Meta tags</a></div> </div> </div> Wed, 06 Mar 2019 15:58:11 +0000 Jessica Hayes 3501 at https://sitefarm.ucdavis.edu Building Blocks: Creating a custom sorted list of people for your directory https://sitefarm.ucdavis.edu/blog/building-blocks-creating-a-custom-list-of-people-for-your-directory <span class="field field--name-title field--type-string field--label-hidden">Building Blocks: Creating a custom sorted list of people for your directory</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <span lang="" about="/user/6" typeof="schema:Person" property="schema:name" datatype="">Jessica Hayes</span> </span> <span class="field field--name-created field--type-created field--label-hidden">February 26, 2019</span> <div class="field field--name-field-sf-primary-image field--type-image field--label-hidden field__item"> <img src="/sites/g/files/dgvnsk511/files/styles/sf_landscape_16x9/public/images/article/hierarchy.jpg?h=b7a3d141&amp;itok=Ftc3g5rT" width="1280" height="720" alt="Stone figures arrayed in a pyramid shape, the single red one at the front, followed by a half dozen yellow figures, and then the remaining base in blue." title="Arrange your directory to accurately reflect the organization of your departmental leadership." typeof="foaf:Image" class="image-style-sf-landscape-16x9" /> </div> <div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="https://sitefarm.ucdavis.edu/blog.rss" addthis:title="Latest Blog Posts" addthis:description="The ability to have fine-tuned lists of people within a specific person Type category has been a long-sought request from the SiteFarm user community. We had hoped to find a Drupal community module capable of offering the kind of secure, stable functionality that would meld well with the SiteFarm platform, but the module candidates we&#039;ve considered are either not ready yet or present user-interface challenges or functionality issues that make us reluctant to add them in. Instead, we&#039;ve hit on a solution we hope will work well for you since it utilizes existing features in SiteFarm. We&#039;re going to show you how you can create a custom Person List block in the same mold as the other custom blocks available to you in the Custom Block Library. This means: the block will appear in the Custom Block Library list just as the Marketing Highlight block and other blocks do you&#039;ll be able to create more than one instance OR reuse a single block created from the Person List block in multiple the same permissions set for the other blocks will apply to this one and Editors will be able to create, edit, place, and delete them as usual Caveats for this project You must have the Site Builder role in order to create this block, though once created, Site Managers and Editors will be able to use it the same way they use other items in the Custom Block Library. If you have more than one site in which you would like to use this block, you will have to create a unique instance on each site The contents of the block—however many people you list—will be visible to Google search and other search engines, but the Search/Filter block normally associated with the People directory will not see them because search/filter is associated with View content (default output), not your new block content. When attached to your /people page, this block will statically live on the page and be independent of the pagination element on the bottom of the page if you have more than ten people in your directory Create the Person List block (Site Builder role required) Navigate to Shortcuts » Blocks » Custom Block Library tab » Block Types tab. Click the + Add custom block type button. Provide a label: Person List Provide a description: A custom list of people content you can drag &#039;n&#039; drop into your preferred order Click Save to finish, after which the system will return you to the Custom block types list. Setting the Fields Locate Person List and click its Manage Fields button. By default, the block comes with a Body field. Use the Operations button to delete the Body field. When the system asks you to confirm the deletion, click the Delete button to continue. When you return to the Manage Fields screen, click the + Add fields button. On the Add Field screen, use the menu under Add a new field to select Reference: Content. A label field will appear. Type in &quot;Person&quot; and then click the Save and continue button. The new Person screen will appear. Change the Allowed number of values from Limited: 1, to Unlimited. Click the Save field button. On the Person settings for Person List page, scroll to the bottom and locate the Reference type » Content type section. Check the box for the Person content type. Click the Save settings button. Manage form display tab On the Manage form display page use the pull handle on the left side to drag the Person field listing underneath the Block description field. Click Save to finish. Manage display tab On the Manage display page, update the Person field display settings to: Label: from Above to - Visually hidden - Format: from Label to Rendered entity Cogwheel View mode: from Default to Teaser Click the Update button Click the Save button to finish. Your block is now created, configured, and ready for use. Use your new Person List block Whichever people are going to be added to your specific person list, you should first edit these pages and, under Additional Options » Promotion Options, check the box to Hide from Directory to avoid having the person show up twice on your page. You can either create the block through the Custom Block Library path or use the Place block button option. From your Custom Block Library, select the Person List block from the list. Provide the following information: Block description (title) - this will be the Person type group you would have assigned your people People&#039;s names as entered previously in a Person content type. Each field will autocomplete the name to assist you in your selection Continue to use the Add another item button until you have enough fields to add the select group of people you need to manually organize If necessary, use the pull handles on the left side to drag &#039;n&#039; drop the names into the order you want them to display on the pageUse the pull handles on the left to drag &#039;n&#039; drop the people into your preferred order. Click Save to continue. On the Configure block page, scroll down and locate the Visibility | Pages field. Enter in /people so the block will appear on the correct page. Assign the correct region. Please note that if you add it to the Content region, you may need to adjust the block&#039;s position in the Block Layout page if you want it to appear over top of the default people listing. Click Save block to finish and review your work. Example of Final Output  In the image on the left, you&#039;ll see an example of a People directory that includes a custom Person List block titled &quot;Executive Group.&quot; Without this block, the three people included would have been included in the original, default directory, but in alphabetical order by last name instead of in our preferred order with the Executive Director, Regina Tyson, listed first. Likewise, we can say in our scenario that Sara Knowles has seniority in the Assistant Director position and we want her listed next followed by Dennis Jones. The remainder of the regular listing follows after, denoted by the visual break between our Executive Group block (custom Person List block) and the beginning of the section for Principal Investigators from the regular People directory that comes standard in your SiteFarm site. "> <a class="addthis_button_facebook"></a> <a class="addthis_button_linkedin"></a> <script> var addthis_share = { templates: { twitter: "When the default directory listing isn&#039;t as granular as you need it to be to clearly denote the hierarchical order of your unit, especially as it relates to your leadership, consider creating your own custom Person List block to help you achieve your goal. " } } </script> <a class="addthis_button_twitter"></a> <a class="addthis_button_email"></a> <a class="addthis_button_compact"></a> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>The ability to have fine-tuned lists of people within a specific person Type category has been a long-sought request from the SiteFarm user community. We had hoped to find a Drupal community module capable of offering the kind of secure, stable functionality that would meld well with the SiteFarm platform, but the module candidates we've considered are either not ready yet or present user-interface challenges or functionality issues that make us reluctant to add them in.</p> <p>Instead, we've hit on a solution we hope will work well for you since it utilizes existing features in SiteFarm. We're going to show you how you can create a custom Person List block in the same mold as the other custom blocks available to you in the Custom Block Library. This means:</p> <ul><li>the block will appear in the Custom Block Library list just as the Marketing Highlight block and other blocks do</li> <li>you'll be able to create more than one instance OR reuse a single block created from the Person List block in multiple</li> <li>the same permissions set for the other blocks will apply to this one and Editors will be able to create, edit, place, and delete them as usual</li> </ul><h5>Caveats for this project</h5> <ul><li>You must have the Site Builder role in order to create this block, though once created, Site Managers and Editors will be able to use it the same way they use other items in the Custom Block Library.</li> <li>If you have more than one site in which you would like to use this block, you will have to create a unique instance on each site</li> <li>The contents of the block—however many people you list—will be visible to Google search and other search engines, but the Search/Filter block normally associated with the People directory will not see them because search/filter is associated with View content (default output), not your new block content.</li> <li>When attached to your /people page, this block will statically live on the page and be independent of the pagination element on the bottom of the page if you have more than ten people in your directory</li> </ul><h2 class="heading--underline">Create the Person List block (Site Builder role required)</h2> <ol><li>Navigate to <strong>Shortcuts » Blocks » Custom Block Library tab » Block Types</strong> tab.<br /><img alt="Location of the custom block tab." data-entity-type="file" data-entity-uuid="586ddf03-d82b-4571-8b99-f3e04e343920" height="165" src="/sites/g/files/dgvnsk511/files/inline-images/person-list-custom-block.png" width="301" /></li> <li>Click the <strong>+ Add custom block type</strong> button.</li> <li>Provide a label: <strong>Person List</strong></li> <li>Provide a description: <strong>A custom list of people content you can drag 'n' drop into your preferred order</strong></li> <li>Click <strong>Save to finish</strong>, after which the system will return you to the Custom block types list.</li> </ol><h5>Setting the Fields</h5> <ol><li>Locate <strong>Person List</strong> and click its <strong>Manage Fields</strong> button.</li> <li>By default, the block comes with a Body field. Use the Operations button to <strong>delete the Body </strong>field.</li> <li>When the system asks you to confirm the deletion, click the <strong>Delete</strong> button to continue.</li> <li>When you return to the Manage Fields screen, click the <strong>+ Add fields</strong> button.</li> <li>On the Add Field screen, use the menu under <strong>Add a new field</strong> to select <strong>Reference: Content</strong>.<br /><img alt="Select Reference: Content from the field list." data-entity-type="file" data-entity-uuid="1aaff85b-7f87-4147-b3ab-54ceca1ed7d1" height="200" src="/sites/g/files/dgvnsk511/files/inline-images/person-list-reference-content.png" width="251" /></li> <li>A label field will appear. Type in "<strong>Person</strong>" and then click the <strong>Save and continue</strong> button.</li> <li>The new Person screen will appear. Change the <strong>Allowed number of values</strong> from Limited: 1, to <strong>Unlimited</strong>.</li> <li>Click the <strong>Save field</strong> button.</li> <li>On the <em>Person</em> settings for <em>Person List page</em>, scroll to the bottom and locate the <strong>Reference type » <strong>Content type</strong></strong> section. <strong>Check the box</strong> for the <strong>Person</strong> content type.</li> <li>Click the <strong>Save settings</strong> button.</li> </ol><h5>Manage form display tab</h5> <ol><li>On the Manage form display page<strong> use the pull handle</strong> on the left side to drag the <strong>Person</strong> field listing <strong>underneath the Block description</strong> field.</li> <li>Click <strong>Save</strong> to finish.</li> </ol><h5>Manage display tab</h5> <ol><li>On the Manage display page, update the Person field display settings to: <ol><li><strong>Label</strong>: from <em>Above</em> to <em>- Visually hidden -</em></li> <li><strong>Format</strong>: from <em>Label</em> to <em>Rendered entity</em></li> <li><strong>Cogwheel</strong> <ol><li><strong>View mode</strong>: from <em>Default</em> to <em>Teaser</em></li> <li>Click the <strong>Update</strong> button</li> </ol></li> </ol></li> <li>Click the <strong>Save</strong> button to finish.</li> <li>Your block is now created, configured, and ready for use.</li> </ol><h2 class="heading--underline">Use your new Person List block</h2> <ol><li>Whichever people are going to be added to your specific person list, you should first edit these pages and, under <strong>Additional Options » Promotion Options</strong>, <strong>check the box to Hide from Directory</strong> to avoid having the person show up twice on your page.</li> <li>You can either create the block through the <a href="/training/all/creating-custom-blocks">Custom Block Library</a> path or use the <a href="/training/all/placing-blocks">Place block button</a> option.</li> <li>From your <strong>Custom Block Library</strong>, select the <strong>Person List block</strong> from the list.</li> <li>Provide the following information: <ol><li><strong>Block description (title)</strong> - this will be the Person type group you would have assigned your people</li> <li><strong>People's names</strong> as entered previously in a Person content type. Each field will autocomplete the name to assist you in your selection</li> <li>Continue to use the <strong>Add another item</strong> button until you have enough fields to add the select group of people you need to manually organize</li> <li>If necessary, use the <strong>pull handles</strong> on the left side to drag 'n' drop the names into the order you want them to display on the page<figure role="group" class="caption caption-img"><img alt="The user interface screen for adding a block description and the fields for your individual people." data-entity-type="file" data-entity-uuid="bf6ec495-5cdd-41e3-9c88-15d0842ef5fc" height="341" src="/sites/g/files/dgvnsk511/files/inline-images/person-list-add-people.png" width="389" /><figcaption>Use the pull handles on the left to drag 'n' drop the people into your preferred order.</figcaption></figure></li> </ol></li> <li>Click <strong>Save</strong> to continue.</li> <li>On the <strong>Configure block</strong> page, scroll down and locate the <strong>Visibility | Pages</strong> field. Enter in <strong>/people</strong> so the block will appear on the correct page.</li> <li>Assign the correct region. Please note that if you add it to the Content region, you may need to adjust the block's position in the Block Layout page if you want it to appear over top of the default people listing.</li> <li>Click <strong>Save block</strong> to finish and review your work.</li> </ol><h2 class="heading--underline">Example of Final Output</h2> <p><img alt="The custom Person list block listed above the default people directory." data-entity-type="file" data-entity-uuid="17668e3a-ff2a-42cf-8159-f76d6ddc4d8e" height="741" src="/sites/g/files/dgvnsk511/files/inline-images/person-list-final.png" width="384" class="align-left" /> In the image on the left, you'll see an example of a People directory that includes a custom Person List block titled "Executive Group." Without this block, the three people included would have been included in the original, default directory, but in alphabetical order by last name instead of in our preferred order with the Executive Director, Regina Tyson, listed first. Likewise, we can say in our scenario that Sara Knowles has seniority in the Assistant Director position and we want her listed next followed by Dennis Jones.</p> <p>The remainder of the regular listing follows after, denoted by the visual break between our Executive Group block (custom Person List block) and the beginning of the section for Principal Investigators from the regular People directory that comes standard in your SiteFarm site.</p> </div> <div class="field field--name-field-sf-article-category field--type-entity-reference field--label-above"> <div class="field__label">Category</div> <div class="field__item"><a href="/articles/site-building" hreflang="en">Site Building</a></div> </div> <div class="field field--name-field-sf-tags field--type-entity-reference field--label-above"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/site-builder" hreflang="en">Site Builder</a></div> <div class="field__item"><a href="/tags/custom-blocks" hreflang="en">Custom Blocks</a></div> <div class="field__item"><a href="/tags/people" hreflang="en">People</a></div> <div class="field__item"><a href="/tags/custom-list" hreflang="en">Custom List</a></div> <div class="field__item"><a href="/tags/recipes" hreflang="en">Recipes</a></div> <div class="field__item"><a href="/tags/building-blocks" hreflang="en">Building Blocks</a></div> </div> </div> Tue, 26 Feb 2019 18:25:54 +0000 Jessica Hayes 3496 at https://sitefarm.ucdavis.edu "Where did the AddThis social share buttons go?" https://sitefarm.ucdavis.edu/blog/where-did-addthis-social-share-buttons-go <span class="field field--name-title field--type-string field--label-hidden">&quot;Where did the AddThis social share buttons go?&quot;</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <span lang="" about="/user/6" typeof="schema:Person" property="schema:name" datatype="">Jessica Hayes</span> </span> <span class="field field--name-created field--type-created field--label-hidden">February 25, 2019</span> <div class="field field--name-field-sf-primary-image field--type-image field--label-hidden field__item"> <img src="/sites/g/files/dgvnsk511/files/styles/sf_landscape_16x9/public/images/article/missing-social-share-firefox.jpg?h=c673cd1c&amp;itok=SVVVQx41" width="1280" height="720" alt="Missing social share buttons in FireFox" title="The mystery of the disappearing social scene" typeof="foaf:Image" class="image-style-sf-landscape-16x9" /> </div> <div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="https://sitefarm.ucdavis.edu/blog.rss" addthis:title="Latest Blog Posts" addthis:description="Firefox users have reported issues with a large blank space in an article where they would have expected the Share This buttons to live. What happened to them? How do you get them back? What&#039;s going on and why are the Share This icons not displaying? At some point in the not too distant past, an update by Mozilla (the creators and maintainers of Firefox) released a version of their browser that introduced a privacy shield related to third-party tracking software. AddThis, the company responsible for the ShareThis icons used by SiteFarm, is considered a tracking service and, as such, Firefox&#039;s default privacy settings disallow them from appearing on a page as a courtesy to the person using the Firefox browser. If you&#039;re using Firefox, either on Mac or Windows, and there&#039;s a gaping white space between an article&#039;s primary image and the authored on date, then your browser has these privacy settings enabled. How to change your Firefox browser settings to allow the icons to display While in your Firefox browser, click on the hamburger menu on the far right side to access your Content Block. The default option is Standard, but if having the social share buttons is important to you, you will need to change this setting to Custom and then uncheck the Trackers checkbox. Firefox will save your changes automatically. Return to an article and refresh your page if necessary to view the icons. "> <a class="addthis_button_facebook"></a> <a class="addthis_button_linkedin"></a> <script> var addthis_share = { templates: { twitter: "Firefox users have reported issues with a large blank space in an article where they would have expected the Share This buttons to live. What happened to them? How do you get them back? " } } </script> <a class="addthis_button_twitter"></a> <a class="addthis_button_email"></a> <a class="addthis_button_compact"></a> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Firefox users have reported issues with a large blank space in an article where they would have expected the Share This buttons to live. What happened to them? How do you get them back?</p> <h4>What's going on and why are the <em>Share </em><em>This</em> icons not displaying?</h4> <p>At some point in the not too distant past, an update by Mozilla (the creators and maintainers of Firefox) released a version of their browser that introduced a privacy shield related to third-party tracking software. AddThis, the company responsible for the ShareThis icons used by SiteFarm, is considered a tracking service and, as such, Firefox's default privacy settings disallow them from appearing on a page as a courtesy to the person using the Firefox browser. If you're using Firefox, either on Mac or Windows, and there's a gaping white space between an article's primary image and the <em>authored on</em> date, then your browser has these privacy settings enabled.</p> <h4>How to change your Firefox browser settings to allow the icons to display</h4> <ol><li>While in your Firefox browser, click on the <strong>hamburger menu</strong> on the far right side to access your <strong>Content Block</strong>.<br /><img alt="Screenshot of the location of the hamburger menu to access Content Blocking." data-entity-type="file" data-entity-uuid="59f90b91-68ca-4973-a59a-578cd4510e9e" height="255" src="/sites/g/files/dgvnsk511/files/inline-images/firefox-privacy-settings-socialshare_0.png" width="261" /></li> <li>The default option is Standard, but if having the social share buttons is important to you, you will need to <strong>change this setting to Custom</strong> and then <strong>uncheck</strong> the <strong>Trackers</strong> checkbox.</li> <li>Firefox will save your changes automatically. Return to an article and refresh your page if necessary to view the icons.</li> </ol></div> <div class="field field--name-field-sf-article-category field--type-entity-reference field--label-above"> <div class="field__label">Category</div> <div class="field__item"><a href="/articles/tips" hreflang="en">Tips, Hints, Best Practices</a></div> </div> Mon, 25 Feb 2019 18:11:51 +0000 Jessica Hayes 3491 at https://sitefarm.ucdavis.edu Take in the View: Extending the All content page to filter by Terms https://sitefarm.ucdavis.edu/blog/take-view-extending-all-content-page-filter-terms <span class="field field--name-title field--type-string field--label-hidden">Take in the View: Extending the All content page to filter by Terms</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <span lang="" about="/user/6" typeof="schema:Person" property="schema:name" datatype="">Jessica Hayes</span> </span> <span class="field field--name-created field--type-created field--label-hidden">February 21, 2019</span> <div class="field field--name-field-sf-primary-image field--type-image field--label-hidden field__item"> <img src="/sites/g/files/dgvnsk511/files/styles/sf_landscape_16x9/public/images/article/lens-view-ocean.jpg?h=1c9b88c9&amp;itok=qrPA0k2h" width="1280" height="720" alt="A person&#039;s hand hold up a camera lens through which you can see a crisp view of the ocean and steep hillsides while the area outside the lens is blurred." title="Focus in on what you want to see" typeof="foaf:Image" class="image-style-sf-landscape-16x9" /> </div> <div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="https://sitefarm.ucdavis.edu/blog.rss" addthis:title="Latest Blog Posts" addthis:description="Project Scope A few of you have inquired as to whether we could incorporate a way to filter content in the All content page by tags or vocabularies. While we don&#039;t have plans to incorporate this functionality across the entire service, we would love to show you how you can do this for your own site if having a way to administer your content based on associated tags or categories would make your work easier and more efficient.  Project Outline Clone the All content View to create a new, custom version Disable the original All content View Build a relationship to article categories Add columns each for tags and article categories Add filtering options for each tags and article categories WARNING: By creating your own All content View you are taking this page out of the upgrade path the SiteFarm service provides you; meaning, if we make changes to the default All content View in the future, your version will not receive these updates. This is why the lesson encourages you to clone the original and then disable it instead of directly editing the original View or deleting it out of hand. Discussion on dealing with the upgrade path will follow below. Steps Create your custom View Navigate to Manage » Structure » Views. Locate the entry labeled: Content content Find and manage content. Page (/admin/content) Click the downward arrow next to its corresponding Edit button and select Duplicate. When prompted for a View name, enter something that will make this unique and easily identified. Our example will use Content with Tags. Click the Duplicate button to continue. Disable the original Content View Navigate to Manage » Structure » Views. Locate the original Content View in the list and, using its corresponding Edit button, use the downward pointing arrow and select Disable from the list. This will move the View to the bottom of your Views page under the Disabled section. Build the Taxonomy Relationship into your View Locate your new View and click Edit. Look at the right-most column and expand the Advanced tab. Locate the Relationships section and click the Add button. Consider filtering the list by typing in &#039;sf_article&#039; and then checking the boxes for: Taxonomy term referenced from field_sf_article_category Taxonomy term referenced from field_sf_tags Click the Add and configure relationships button. Click Apply and continue for both; we won&#039;t require the relationship in order for this process to work. Save your View. Add the new Fields to your content list Locate the FIELDS section in the first column of your View and click the Add button. Search and check the boxes for &#039;Tags&#039; and &#039;Category&#039; (the one that appears in content with sf_articles). Click the Add and configure fields button. Click the Apply and continue buttons for both. Your two new entries will appear at the bottom of the list of FIELDS. However, we want to make sure the Operations Links field appears last because this is the Edit/Delete button available in our All content screen. Click on the downward arrow next to the Add button and click Rearrange. Drag and drop &#039;Content: Operations links Operations&#039; down to the bottom of the list.  Click the Apply button. Save your View. Add filters to your View specifically for your Terms Locate the FILTER CRITERIA section in the first column of your View and click the Add button. Locate and check the boxes for &#039;Tags&#039; and &#039;Category (field_sf_article_category)&#039;. Click the Add and configure filter criteria button. Configurations Category (field_sf_article_category) Vocabulary: Article Categories Selection type: dropdown Click Apply and continue Check the box for Expose this filter to visitors, to allow them to change it Label: Change &#039;Category (field_sf_article_category)&#039; to &#039;Category&#039; Click Apply Tags (field_sf_tags) Vocabulary: Tags Selection type: dropdown Click Apply and continue Check the box for Expose this filter to visitors, to allow them to change it Label: Change &#039;Tags (field_sf_tags)&#039; to &#039;Tags&#039; Click Apply Save your View. Update the Table Format for Sorting Locate the FORMAT section in the first column of your View and, next to Table, click Settings. In the Sortable column, scroll down and locate the Category row and check its box. Unfortunately, it doesn&#039;t appear that the system allows for Tags to be sortable. Click Apply. Save your View. Review your work by navigating to Shortcuts » All content. Final Output Addressing the upgrade path issue While it&#039;s not likely to happen frequently, there is always the chance that future updates to either Drupal Core or SiteFarm may result in a modification to the default All content View that comes standard with all sites. If a site is using the default View, our update process includes two sets of code instructions—add this change to all new sites created from this point forward AND revert all current sites to incorporate this change into the existing structure. By creating your own custom All content View you would miss out on the latter of the instructions. How do you keep your custom functionality while benefitting from the upgrade? This is why we recommend at the beginning of this lesson to make a copy of the original and then disable that original. Once you become aware of the update, you can follow this workflow, which includes the original creation of your custom View: Original All content View - duplicate and create Custom All content View 1 Disable Original All content View Complete work on Custom All content View 1 Receive notice of changes to Original All content View Re-enable Original All content View Disable Custom All content View 1 Duplicate Original All content View and create Custom All content View 2 Complete work on Custom All content View 2 Disable Original All content View Delete Custom All content View 1 (optional) "> <a class="addthis_button_facebook"></a> <a class="addthis_button_linkedin"></a> <script> var addthis_share = { templates: { twitter: "A new View recipe showing you how to extend and leverage your All Content page View to maximize your users&#039; ability to find and maintain your site&#039;s content by including taxonomy categories and tags. " } } </script> <a class="addthis_button_twitter"></a> <a class="addthis_button_email"></a> <a class="addthis_button_compact"></a> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><h2 class="heading--underline">Project Scope</h2> <p>A few of you have inquired as to whether we could incorporate a way to filter content in the All content page by tags or vocabularies. While we don't have plans to incorporate this functionality across the entire service, we would love to show you how you can do this for your own site if having a way to administer your content based on associated tags or categories would make your work easier and more efficient. </p> <h2 class="heading--underline">Project Outline</h2> <ul><li>Clone the All content View to create a new, custom version</li> <li>Disable the original All content View</li> <li>Build a relationship to article categories</li> <li>Add columns each for tags and article categories</li> <li>Add filtering options for each tags and article categories</li> </ul><div class="alert alert--warning"><strong>WARNING</strong>: By creating your own All content View you are taking this page out of the upgrade path the SiteFarm service provides you; meaning, if we make changes to the default All content View in the future, your version will not receive these updates. This is why the lesson encourages you to clone the original and then disable it instead of directly editing the original View or deleting it out of hand. Discussion on dealing with the upgrade path will follow below.</div> <h2 class="heading--underline">Steps</h2> <h4>Create your custom View</h4> <ol><li>Navigate to <strong>Manage » Structure » Views</strong>.</li> <li>Locate the entry labeled: <table><tbody><tr><td>Content</td> <td>content</td> <td>Find and manage content.</td> <td>Page (<a href="/admin/content">/admin/content</a>)</td> </tr></tbody></table></li> <li>Click the <strong>downward arrow</strong> next to its corresponding <strong>Edit</strong> button and select <strong>Duplicate</strong>.</li> <li>When prompted for a <strong>View name</strong>, enter something that will make this unique and easily identified. Our example will use <em><strong>Content with Tags</strong></em>. Click the <strong>Duplicate</strong> button to continue.</li> </ol><h4>Disable the original Content View</h4> <ol><li>Navigate to <strong>Manage » Structure » Views</strong>.</li> <li>Locate the original Content View in the list and, using its corresponding Edit button, use the downward pointing arrow and select <strong>Disable</strong> from the list. This will move the View to the bottom of your Views page under the Disabled section.</li> </ol><h4>Build the Taxonomy Relationship into your View</h4> <ol><li>Locate your new View and click <strong>Edit</strong>.</li> <li>Look at the right-most column and expand the <strong>Advanced</strong> tab.</li> <li>Locate the <strong>Relationships</strong> section and click the <strong>Add</strong> button.</li> <li>Consider filtering the list by typing in '<strong>sf_article</strong>' and then checking the boxes for: <ul><li><strong>Taxonomy term referenced from field_sf_article_category</strong></li> <li><strong>Taxonomy term referenced from field_sf_tags</strong></li> </ul></li> <li>Click the <strong>Add and configure relationships</strong> button.</li> <li>Click <strong>Apply and continue </strong>for both; we won't require the relationship in order for this process to work.</li> <li><strong>Save</strong> your View.</li> </ol><h4>Add the new Fields to your content list</h4> <ol><li>Locate the <strong>FIELDS</strong> section in the first column of your View and click the <strong>Add</strong> button.</li> <li>Search and check the boxes for '<strong>Tags</strong>' and '<strong>Category</strong>' (the one that appears in <strong>content with sf_articles</strong>).</li> <li>Click the <strong>Add and configure fields</strong> button.</li> <li>Click the <strong>Apply and continue</strong> buttons for both.</li> <li>Your two new entries will appear at the bottom of the list of FIELDS. However, we want to make sure the Operations Links field appears last because this is the Edit/Delete button available in our All content screen. Click on the <strong>downward arrow</strong> next to the Add button and click <strong>Rearrange</strong>.</li> <li>Drag and drop <strong>'Content: Operations links Operations'</strong> down to the bottom of the list. </li> <li>Click the <strong>Apply</strong> button.</li> <li><strong>Save</strong> your View.</li> </ol><h4>Add filters to your View specifically for your Terms</h4> <ol><li>Locate the <strong>FILTER CRITERIA</strong> section in the first column of your View and click the <strong>Add</strong> button.</li> <li>Locate and check the boxes for '<strong>Tags</strong>' and '<strong>Category (field_sf_article_category)</strong>'.</li> <li>Click the <strong>Add and configure filter criteria</strong> button.</li> <li>Configurations <ul><li><strong>Category (field_sf_article_category)</strong> <ul><li><strong>Vocabulary</strong>: Article Categories</li> <li><strong>Selection type:</strong> dropdown</li> <li>Click <strong>Apply and continue</strong></li> <li>Check the box for <strong>Expose this filter to visitors, to allow them to change it</strong></li> <li><strong>Label</strong>: Change 'Category (field_sf_article_category)' to 'Category'</li> <li>Click <strong>Apply</strong></li> </ul></li> <li><strong>Tags (field_sf_tags)</strong> <ul><li><strong>Vocabulary</strong>: Tags</li> <li><strong>Selection type</strong>: dropdown</li> <li>Click <strong>Apply and continue</strong></li> <li>Check the box for <strong>Expose this filter to visitors, to allow them to change it</strong></li> <li><strong>Label</strong>: Change 'Tags (field_sf_tags)' to 'Tags'</li> <li>Click <strong>Apply</strong></li> </ul></li> </ul></li> <li><strong>Save</strong> your View.</li> </ol><h4>Update the Table Format for Sorting</h4> <ol><li>Locate the <strong>FORMAT</strong> section in the first column of your View and, next to Table, click <strong>Settings</strong>.</li> <li>In the <strong>Sortable</strong> column, scroll down and locate the <strong>Category</strong> row and <strong>check its box</strong>. Unfortunately, it doesn't appear that the system allows for Tags to be sortable.</li> <li>Click <strong>Apply</strong>.</li> <li><strong>Save</strong> your View.</li> <li>Review your work by navigating to <strong>Shortcuts » All content</strong>.</li> </ol><h2 class="heading--underline">Final Output</h2> <p><img alt="The final output from all the configurations describe above, including the two new filter options for tags and categories, and two columns displaying any tags and categories affiliated with content." data-entity-type="file" data-entity-uuid="3b978c63-edb6-4d7e-b658-f6c06a202f9e" src="/sites/g/files/dgvnsk511/files/inline-images/view-tags-custom-content-view.png" /></p> <h2 class="heading--underline">Addressing the upgrade path issue</h2> <p>While it's not likely to happen frequently, there is always the chance that future updates to either Drupal Core or SiteFarm may result in a modification to the default <strong>All content</strong> View that comes standard with all sites. If a site is using the default View, our update process includes two sets of code instructions—add this change to all new sites created from this point forward AND revert all current sites to incorporate this change into the existing structure. By creating your own custom All content View you would miss out on the latter of the instructions.</p> <p><strong>How do you keep your custom functionality while benefitting from the upgrade?</strong></p> <p>This is why we recommend at the beginning of this lesson to make a copy of the original and then disable that original. Once you become aware of the update, you can follow this workflow, which includes the original creation of your custom View:</p> <ul><li>Original All content View - duplicate and create Custom All content View 1</li> <li>Disable Original All content View</li> <li>Complete work on Custom All content View 1</li> <li>Receive notice of changes to Original All content View</li> <li>Re-enable Original All content View</li> <li>Disable Custom All content View 1</li> <li>Duplicate Original All content View and create Custom All content View 2</li> <li>Complete work on Custom All content View 2</li> <li>Disable Original All content View</li> <li>Delete Custom All content View 1 (optional)</li> </ul></div> <div class="field field--name-field-sf-article-category field--type-entity-reference field--label-above"> <div class="field__label">Category</div> <div class="field__item"><a href="/articles/site-building" hreflang="en">Site Building</a></div> </div> <div class="field field--name-field-sf-tags field--type-entity-reference field--label-above"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/recipes" hreflang="en">Recipes</a></div> <div class="field__item"><a href="/tags/development" hreflang="en">Development</a></div> <div class="field__item"><a href="/tags/views" hreflang="en">Views</a></div> <div class="field__item"><a href="/tags/site-builder" hreflang="en">Site Builder</a></div> <div class="field__item"><a href="/tags/taxonomy" hreflang="en">Taxonomy</a></div> </div> </div> Thu, 21 Feb 2019 17:17:26 +0000 Jessica Hayes 3486 at https://sitefarm.ucdavis.edu Take in the View: Making a custom recent article block https://sitefarm.ucdavis.edu/blog/take-view-making-custom-recent-article-block <span class="field field--name-title field--type-string field--label-hidden">Take in the View: Making a custom recent article block</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <span lang="" about="/user/6" typeof="schema:Person" property="schema:name" datatype="">Jessica Hayes</span> </span> <span class="field field--name-created field--type-created field--label-hidden">February 19, 2019</span> <div class="field field--name-field-sf-primary-image field--type-image field--label-hidden field__item"> <img src="/sites/g/files/dgvnsk511/files/styles/sf_landscape_16x9/public/images/article/woman-on-balcony.jpg?h=b8884246&amp;itok=uKtD3xSl" width="1280" height="720" alt="A woman on a balcony with her arms outstretched as she takes in the vista of the city below." typeof="foaf:Image" class="image-style-sf-landscape-16x9" /> </div> <div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="https://sitefarm.ucdavis.edu/blog.rss" addthis:title="Latest Blog Posts" addthis:description="This isn&#039;t a step-by-step how-to; scenarios vary far too much for things to be identical and a certain amount of basic Views knowledge is required for this to make sense. If this topic is entirely new to you, take some time to learn about Views first. These write-ups are meant to show you what&#039;s possible so we can set free your imaginations to discover new methods for presenting your content to the world. Project Scope We recently had a request from a user asking how she might have more control over how recent articles are listed in a block. Display the author on this version, display more teaser info on that one, and so on. This View walk-through will show you how you can take the available field entities and assemble them to output exactly the available default information to whatever degree you prefer and use it as a stepping stone to more custom work. Project Outline Include the following from the Article content types Primary image Title Author name Authored on date Teaser/body snippet Branding details Sort the output by Authored on date, descending order Display only published Articles Make the primary image a thumbnail and display the branding color bar for it, if assigned Make the title a link to the related content Make the block responsive Necessary Components At least a handful of published Articles to test your output A single View with at least one Block display mode (your number may vary depending on how many versions you would like to use on your site) Custom Block output using replacement patterns or tokens Custom block display names Build a Relationship to branding taxonomy Configuration Building your output in the Custom Text field Create additional versions with modifications A link to SiteFarm PatternLab code/style guide A single View with at least one Block display mode Navigate to Manage » Structure » Views. Click the + Add View button. Provide the following: View Name Example: &quot;Custom Recent Articles&quot; Description - this will be helpful if anyone else is working on your site at this level and needs a quick glance aid in knowing what this View is meant to do. Example: &quot;An alternate block with more granular field option settings for choosing to display specific elements available from Articles&quot; View Settings - set this for: Content of type Article tagged with sorted by Block Settings - check You can set the Block Title now if you want, or leave it blank Page Display Settings - Unformatted list | Fields Click Save and Edit to finish. Custom Block output using replacement patterns or tokens Whether you&#039;re planning on having a single display mode output or several, it&#039;s easiest to start with the version that contains the most complete version of the elements you want to show on the page. Afterward, you can duplicate the display mode and remove the sections you want to skip. Custom Block Display Names Once you&#039;ve created your initial View structure, you can move on to configuring its settings. Let&#039;s start with supposing that you will eventually have few versions of this block you want to display, perhaps on separate pages. This means each block in your View will need its own Block Display. If you look under the Display title you&#039;ll see: Click on the Block text next to &quot;Display name.&quot; In the dialog box that appears, provide a distinctive Administrative name. Example: &quot;Full version&quot; Click Apply. Click Save. Build a Relationship to branding taxonomy In your View, expand the Advanced label in the third column on the right. Locate the Relationships section and click the Add button. Search for &#039;Taxonomy&#039; and check the box for the entry reading &quot;Taxonomy term referenced from field_sf_article_category&quot; Click the Add and configure relationships button. Do not make the relationship required. Click Apply to finish. Click Save to save this View change Configurations TITLE Title that will display on the block FORMAT Grid » Settings: use the defaults with no changes Field » Settings: use the defaults with no changes FIELDS In the Fields section, click the Add button and select the following options: Title : Content Authored by : Content Authored on : Content Body : Content Primary Image : Content Branding color : Taxonomy Custom text : Global Click the Add and configure fields button. Configure the fields as follows for the example, but note that you can make any changes you wish to customize your output. After each, click Apply and continue. Title Check: exclude from display Authored by Check: exclude from display Uncheck: Link label to the referenced entity Authored on Check: exclude from display Body Check: exclude from display Formatter menu: set to Summary or Trimmed Trimmed limit: 140 Primary image Check: exclude from display Formatter: Image Image style: Thumbnail Link image to: Content Style settings Check: Customize field HTML HTML element: use default Check: Create a CSS class CSS Class: image-style-sf-thumbnail Branding color Check: exclude from display Custom text Style settings Check: Customize field and label wrapper HTML Wrapper HTML element:  SECTION Check: Create a CSS class CSS Class: article-list Click Save to save your progress. Building your output in the Custom Text field  In order for this project to work, it&#039;s essential for the Custom text field to be the very last entry in the list. If necessary, click on the downward arrow next to the Field&#039;s Add button and choose Rearrange. Drag and drop the Custom text field in the last position below all the rest of the field entries. We do this to make sure the information in those fields are entered in the specific order so the Custom text field can &quot;see&quot; them all. If any fields are listed after Custom text, the information they contain won&#039;t be accessible to our Custom text field. You will be creating a combination of HTML, CSS, Token Replacements, and Twig entries. Click on the Custom text field and paste the following into the Text field: {% set brand = &#039;category-brand--&#039; ~ field_sf_brand_color|replace(&#039; &#039;, &#039;-&#039;)|lower %}           {{ field_sf_primary_image }}             {{ title }}               by {{ uid }}         {{ created }}             {{ body }}   Explanation of the code {% set brand = &#039;category-brand--&#039; ~ field_sf_brand_color|replace(&#039; &#039;, &#039;-&#039;)|lower %} --This is Twig code (a code template engine), which instructs the code convert the branding color field information, which is provided in title case (California Poppy). It will make it lowercase and insert a hyphen between the first and second word before appending it to &#039;category-brand--&#039; and assigning the result to the brand variable. This piece of code is required if you wish to include the vertical color band alongside the image to denote its category affiliation.{{ token }} --the curly braces denote a Replacement Token, which is a placeholder for information held in the content field for that token. As the system loops through the available content, it replaces the token with the actual title, author, date, etc. The token is required for to allow for the dynamic population of information to your block if you want it to update automatically as you create new content on your site.HTML/CSS example {{ body }} --The structure for our output is taken directly from SiteFarm&#039;s PatternLab instance, in this case for a teaser listing. Click Apply to finish. Create additional versions with modifications Once you&#039;ve created your first full block display mode, you&#039;re now in a position to riff off the original, deciding if you want to streamline the entries by omitting the teaser, or perhaps the primary images. Create a new version from your existing full version: Edit your View and look over on the righthand side of the screen. Two drop-down menus are available. The top one has options for the entire view. The bottom one has options for the specific Display Mode you&#039;re viewing. Use the bottom one and select Duplicate from the menu. The system will update the list of Display Modes, in this case duplicating the entire Display Mode view you created, including its name. You can rename this Display by clicking on the Display name&#039;s name link. A dialog box will open and allow you to change the name and provide a description. Apply the changes Save your View. Edit your View and navigate to your second Display mode to begin making your new version. It is essential to change All displays to This block (override) or else you&#039;ll be applying any changes you make to every single Display mode version, undoing previous work. When done, save your changes.Avoid extreme sadness by triple-checking that you&#039;ve set the changes to &quot;This block (override).&quot; The blocks attached in the second sidebar of this article are created from our first, titled Demo 2 and Demo 3. Both started with all the original code we added, before having any references removed. You, too, can customize your work, whether to adjust the code provided in this example, or get creative in what content is called via tokens and what styles—from Patternlab or of your own making in CSS Editor—you decide to create and add, you have a powerful tool for expressing your site&#039;s message to your audience. "> <a class="addthis_button_facebook"></a> <a class="addthis_button_linkedin"></a> <script> var addthis_share = { templates: { twitter: "Learn how to customize your Recent Article lists by taking control of the View&#039;s display mode output to offer your visitors exactly the details they need. " } } </script> <a class="addthis_button_twitter"></a> <a class="addthis_button_email"></a> <a class="addthis_button_compact"></a> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p><em>This isn't a step-by-step how-to; scenarios vary far too much for things to be identical and a certain amount of basic Views knowledge is required for this to make sense. If this topic is entirely new to you, take some time to learn about Views first. These write-ups are meant to show you <strong>what's possible</strong> so we can set free your imaginations to discover new methods for presenting your content to the world.</em></p> <h2 class="heading--underline">Project Scope</h2> <p>We recently had a request from a user asking how she might have more control over how recent articles are listed in a block. Display the author on this version, display more teaser info on that one, and so on. This View walk-through will show you how you can take the available field entities and assemble them to output exactly the available default information to whatever degree you prefer and use it as a stepping stone to more custom work.</p> <h2 class="heading--underline">Project Outline</h2> <ul><li>Include the following from the Article content types <ul><li>Primary image</li> <li>Title</li> <li>Author name</li> <li>Authored on date</li> <li>Teaser/body snippet</li> <li>Branding details</li> </ul></li> <li>Sort the output by Authored on date, descending order</li> <li>Display only published Articles</li> <li>Make the primary image a thumbnail and display the branding color bar for it, if assigned</li> <li>Make the title a link to the related content</li> <li>Make the block responsive</li> </ul><h2 class="heading--underline">Necessary Components</h2> <ul><li>At least a handful of published Articles to test your output</li> <li><a href="#singleview">A single View with at least one Block display mode</a> (your number may vary depending on how many versions you would like to use on your site)</li> <li><a href="#customblock">Custom Block output using replacement patterns or tokens</a> <ul><li><a href="#displaynames">Custom block display names</a></li> <li><a href="#relationship">Build a Relationship to branding taxonomy</a></li> <li><a href="#config">Configuration</a></li> <li><a href="#buildingoutput">Building your output in the Custom Text field</a></li> </ul></li> <li><a href="#newversion">Create additional versions with modifications</a></li> <li><a href="http://ucd-one-patternlab.s3-website-us-west-1.amazonaws.com/">A link to SiteFarm PatternLab code/style guide</a></li> </ul><h2 class="heading--underline"><a id="singleview" name="singleview"></a>A single View with at least one Block display mode</h2> <ol><li>Navigate to <strong>Manage » Structure » Views</strong>.</li> <li>Click the <strong>+ Add View</strong> button.</li> <li>Provide the following: <ol><li><strong>View Name</strong><br /> Example: "Custom Recent Articles"</li> <li><strong>Description</strong> - this will be helpful if anyone else is working on your site at this level and needs a quick glance aid in knowing what this View is meant to do.<br /> Example: "An alternate block with more granular field option settings for choosing to display specific elements available from Articles"</li> <li><strong>View Settings</strong> - set this for: <ul><li>Content of type <strong>Article</strong> tagged with &lt;<strong>blank</strong>&gt; sorted by &lt;<strong>Newest first</strong>&gt;</li> <li><strong>Block Settings</strong> - <strong>check</strong> <ul><li>You can set the Block Title now if you want, or leave it blank</li> <li><strong>Page Display Settings</strong> - <strong>Unformatted list</strong> | <strong>Fields</strong></li> </ul></li> </ul></li> </ol></li> <li>Click <strong>Save and Edit</strong> to finish.</li> </ol><h2 class="heading--underline"><a id="customblock" name="customblock"></a>Custom Block output using replacement patterns or tokens</h2> <p>Whether you're planning on having a single display mode output or several, it's easiest to start with the version that contains the most complete version of the elements you want to show on the page. Afterward, you can duplicate the display mode and remove the sections you want to skip.</p> <h4><a id="displaynames" name="displaynames"></a>Custom Block Display Names</h4> <p>Once you've created your initial View structure, you can move on to configuring its settings. Let's start with supposing that you will eventually have few versions of this block you want to display, perhaps on separate pages. This means each block in your View will need its own Block Display. If you look under the Display title you'll see:</p> <p><img alt="The View's option to provide the Display Mode a specific name" data-entity-type="file" data-entity-uuid="e861f54b-6afe-4752-bb33-6a75eb22c064" height="137" src="/sites/g/files/dgvnsk511/files/inline-images/display-node-block-name.png" width="231" /></p> <ol><li>Click on the Block text next to "Display name."</li> <li>In the dialog box that appears, provide a distinctive <strong>Administrative name.</strong><br /> Example: "Full version"</li> <li>Click <strong>Apply</strong>.</li> <li>Click <strong>Save</strong>.</li> </ol><h4><a id="relationship" name="relationship"></a>Build a Relationship to branding taxonomy</h4> <ol><li>In your View, expand the <strong>Advanced</strong> label in the third column on the right.</li> <li>Locate the <strong>Relationships</strong> section and click the <strong>Add</strong> button.</li> <li>Search for 'Taxonomy' and check the box for the entry reading "Taxonomy term referenced from field_sf_article_category"</li> <li>Click the <strong>Add and configure relationships</strong> button.</li> <li>Do not make the relationship required. Click <strong>Apply</strong> to finish.</li> <li>Click <strong>Save</strong> to save this View change</li> </ol><h4><a id="config" name="config"></a>Configurations</h4> <p><strong>TITLE</strong></p> <ul><li>Title that will display on the block</li> </ul><p><strong>FORMAT</strong></p> <ul><li>Grid » Settings: use the defaults with no changes</li> <li>Field » Settings: use the defaults with no changes <ul></ul></li> </ul><p><strong>FIELDS</strong></p> <ol><li>In the Fields section, click the <strong>Add</strong> button and select the following options: <ul><li>Title : Content</li> <li>Authored by : Content</li> <li>Authored on : Content</li> <li>Body : Content</li> <li>Primary Image : Content</li> <li>Branding color : Taxonomy</li> <li>Custom text : Global</li> </ul></li> <li>Click the <strong>Add and configure fields</strong> button.</li> <li>Configure the fields as follows for the example, but note that you can make any changes you wish to customize your output. After each, click <strong>Apply and continue.</strong> <ul><li>Title <ul><li>Check: exclude from display</li> </ul></li> <li>Authored by <ul><li>Check: exclude from display</li> <li>Uncheck: Link label to the referenced entity</li> </ul></li> <li>Authored on <ul><li>Check: exclude from display</li> </ul></li> <li>Body <ul><li>Check: exclude from display</li> <li>Formatter menu: set to Summary or Trimmed</li> <li>Trimmed limit: 140</li> </ul></li> <li>Primary image <ul><li>Check: exclude from display</li> <li>Formatter: Image</li> <li>Image style: Thumbnail</li> <li>Link image to: Content</li> <li>Style settings <ul><li>Check: Customize field HTML</li> <li>HTML element: <strong>use default</strong></li> <li>Check: Create a CSS class</li> <li>CSS Class: <strong>image-style-</strong><strong>sf</strong><strong>-thumbnail</strong></li> </ul></li> </ul></li> <li>Branding color <ul><li>Check: exclude from display</li> </ul></li> <li>Custom text <ul><li>Style settings <ul><li>Check: Customize field and label wrapper HTML</li> <li>Wrapper HTML element:  <strong>SECTION</strong></li> <li>Check: Create a CSS class</li> <li>CSS Class: <strong>article-list</strong></li> </ul></li> </ul></li> </ul></li> <li>Click <strong>Save</strong> to save your progress.</li> </ol><h2 class="heading--underline"><a id="buildingoutput" name="buildingoutput"></a>Building your output in the Custom Text field </h2> <ol><li>In order for this project to work, it's essential for the Custom text field to be the very last entry in the list. If necessary, click on the downward arrow next to the Field's <strong>Add</strong> button and choose <strong>Rearrange</strong>.</li> <li>Drag and drop the Custom text field in the last position below all the rest of the field entries. We do this to make sure the information in those fields are entered in the specific order so the Custom text field can "see" them all. If any fields are listed after Custom text, the information they contain won't be accessible to our Custom text field.</li> <li>You will be creating a combination of HTML, CSS, Token Replacements, and Twig entries. Click on the Custom text field and paste the following into the Text field: <blockquote> <p>{% set brand = 'category-brand--' ~ field_sf_brand_color|replace(' ', '-')|lower %}</p> <p>&lt;article class="{{ brand }} o-media vm-teaser"&gt;<br />     &lt;div class="o-media__figure vm-teaser__figure category category-brand__thumbnail"&gt;<br />       &lt;a href="#" class="category-brand__thumbnail"&gt;{{ field_sf_primary_image }}&lt;/a&gt;<br />     &lt;/div&gt;<br />   &lt;div class="o-media__body"&gt;<br />       &lt;h3 class="vm-teaser__title"&gt;{{ title }}&lt;/h3&gt;<br />       &lt;ul class="vm-teaser__byline"&gt;<br />         &lt;li&gt;&lt;span class="byline"&gt;by {{ uid }}&lt;/span&gt;&lt;/li&gt;<br />         &lt;li&gt;{{ created }}&lt;/li&gt;<br />       &lt;/ul&gt;<br />       &lt;div class="vm-teaser__summary"&gt;{{ body }}&lt;/div&gt;<br />   &lt;/div&gt;<br /> &lt;/article&gt;</p> </blockquote> <h5>Explanation of the code</h5> <strong>{% set brand = 'category-brand--' ~ field_sf_brand_color|replace(' ', '-')|lower %}</strong><br /> --This is <a href="https://twig.symfony.com/">Twig code (a code template engine)</a>, which instructs the code convert the branding color field information, which is provided in title case (California Poppy). It will make it lowercase and insert a hyphen between the first and second word before appending it to 'category-brand--' and assigning the result to the brand variable. This piece of code is required if you wish to include the vertical color band alongside the image to denote its category affiliation.<br /><br /><strong>{{ token }}</strong><br /> --the curly braces denote a Replacement Token, which is a placeholder for information held in the content field for that token. As the system loops through the available content, it replaces the token with the actual title, author, date, etc. The token is required for to allow for the dynamic population of information to your block if you want it to update automatically as you create new content on your site.<br /><br /><strong>HTML/CSS example &lt;div class="vm-teaser__summary"&gt;{{ body }}&lt;/div&gt;</strong><br /> --The structure for our output is taken directly from <a href="http://ucd-one-patternlab.s3-website-us-west-1.amazonaws.com/">SiteFarm's PatternLab</a> instance, in this case for a teaser listing.</li> <li>Click <strong>Apply</strong> to finish.</li> </ol><p>Create additional versions with modifications</p> <p>Once you've created your first full block display mode, you're now in a position to riff off the original, deciding if you want to streamline the entries by omitting the teaser, or perhaps the primary images.</p> <h2 class="heading--underline"><a id="newversion" name="newversion"></a>Create a new version from your existing full version:</h2> <ol><li>Edit your View and look over on the righthand side of the screen. Two drop-down menus are available. The top one has options for the entire view. The bottom one has options for the specific Display Mode you're viewing. Use the bottom one and select <strong>Duplicate &lt;name of your display mode&gt;</strong> from the menu.<br /><img alt="Duplicate option from the Display Mode." data-entity-type="file" data-entity-uuid="76ba842f-2316-40d9-a148-13c476e69a78" height="225" src="/sites/g/files/dgvnsk511/files/inline-images/display-node-block-duplicate.png" width="499" /></li> <li>The system will update the list of Display Modes, in this case duplicating the entire Display Mode view you created, including its name. You can rename this Display by clicking on the Display name's name link.<br /><img alt="A screenshot of the View with the name &quot;Full version&quot; displayed twice, representing the original mode and the new duplicated mode." data-entity-type="file" data-entity-uuid="8cd95ed9-8848-4a53-bca9-7d174efc895c" height="219" src="/sites/g/files/dgvnsk511/files/inline-images/display-node-block-rename-mode.png" width="355" /></li> <li>A dialog box will open and allow you to change the name and provide a description. Apply the changes</li> <li>Save your View.</li> <li>Edit your View and navigate to your second Display mode to begin making your new version. <strong>It is essential to change All displays to This block (override) or else you'll be applying any changes you make to every single Display mode version, undoing previous work.</strong> When done, save your changes.<figure role="group" class="caption caption-img"><img alt="Avoid messing up your other views by indicating that the changes you're making should only apply to the block display mode you're currently working." data-entity-type="file" data-entity-uuid="3a3edde5-f9f4-4316-b738-9bc625e87fce" height="224" src="/sites/g/files/dgvnsk511/files/inline-images/display-node-block-this-block.png" width="354" /><figcaption>Avoid extreme sadness by triple-checking that you've set the changes to "This block (override)."</figcaption></figure></li> <li>The blocks attached in the second sidebar of this article are created from our first, titled Demo 2 and Demo 3. Both started with all the original code we added, before having any references removed. You, too, can customize your work, whether to adjust the code provided in this example, or get creative in what content is called via tokens and what styles—from Patternlab or of your own making in CSS Editor—you decide to create and add, you have a powerful tool for expressing your site's message to your audience.</li> </ol></div> <div class="field field--name-field-sf-article-category field--type-entity-reference field--label-above"> <div class="field__label">Category</div> <div class="field__item"><a href="/articles/site-building" hreflang="en">Site Building</a></div> </div> <div class="field field--name-field-sf-tags field--type-entity-reference field--label-above"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/recipes" hreflang="en">Recipes</a></div> <div class="field__item"><a href="/tags/site-builder" hreflang="en">Site Builder</a></div> <div class="field__item"><a href="/tags/development" hreflang="en">Development</a></div> <div class="field__item"><a href="/tags/views" hreflang="en">Views</a></div> </div> </div> Tue, 19 Feb 2019 22:53:25 +0000 Jessica Hayes 3481 at https://sitefarm.ucdavis.edu SiteFarm 6.1.0 Released https://sitefarm.ucdavis.edu/blog/sitefarm-610-released <span class="field field--name-title field--type-string field--label-hidden">SiteFarm 6.1.0 Released</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <span lang="" about="/user/6" typeof="schema:Person" property="schema:name" datatype="">Jessica Hayes</span> </span> <span class="field field--name-created field--type-created field--label-hidden">February 12, 2019</span> <div class="field field--name-field-sf-primary-image field--type-image field--label-hidden field__item"> <img src="/sites/g/files/dgvnsk511/files/styles/sf_landscape_16x9/public/images/article/laptop-notepad-pen_1.jpg?h=1c9b88c9&amp;itok=aXFnW8jo" width="1280" height="720" alt="Laptop" typeof="foaf:Image" class="image-style-sf-landscape-16x9" /> </div> <div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="https://sitefarm.ucdavis.edu/blog.rss" addthis:title="Latest Blog Posts" addthis:description="A minor release containing several bug fixes, small upgrades, and Drupal-released security patches. If any of these changes fail to display/work for you, please clear both your browser&#039;s cache/history and your site&#039;s cache. New Features Past Events / Event Archives view is now available - A link to a View displaying expired event content It will show by default in brand new sites. Site Managers who would like to include this feature in existing sites can do so by creating a main menu link pointing to ‘/events-archive’ pathway. Person References - users can now associate a Person page with a Basic Page under the Additional Options » Related Content section. Documentation. Receptive widget - a link has been added to the admin toolbar allowing users with Receptive.io accounts to submit feature requests to our new feedback/request system. Documentation. Entity Clone - pages and blocks, now considered &quot;entities&quot; by the Drupal community, can be duplicated. This module can be enabled by Site Builders and the permissions will automatically be assigned or you can submit the Service Request Form to request it be added to your site(s). Documentation. Bug Fixes Taxonomy Term Page RSS Links - The URL for Taxonomy term RSS feeds were reported as providing broken links, excluding the /news or /blog URL alias pathways. This has been fixed to include the necessary sections to correct the malformed links. Teaser Link Box link redirects - If the page a Teaser Link Box link points to updates its URL pathway, a redirect will now automatically be added so the Link Box’s link won’t break or direct to a 404. Related Content Block Duplications - The related content block no longer shows content twice when the currently viewed page shares more than one of the same tag with the related pages. Multilingual Duplications - Sites using Multilingual features will no longer list the same article in every language the site is designed to show; instead, the system will detect the user’s language preferences to filter content to the single designed language for display purposes.   "> <a class="addthis_button_facebook"></a> <a class="addthis_button_linkedin"></a> <script> var addthis_share = { templates: { twitter: "A minor release containing several bug fixes, small upgrades, and Drupal-released security patches. " } } </script> <a class="addthis_button_twitter"></a> <a class="addthis_button_email"></a> <a class="addthis_button_compact"></a> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>A minor release containing several bug fixes, small upgrades, and Drupal-released security patches. <strong>If any of these changes fail to display/work for you, please clear both your browser's cache/history and your site's cache.</strong></p> <h4>New Features</h4> <ul><li><strong>Past Events / Event Archives view is now available</strong> - A link to a View displaying expired event content It will show by default in brand new sites. Site Managers who would like to include this feature in existing sites can do so by creating a main menu link pointing to ‘/events-archive’ pathway.</li> <li><strong>Person References</strong> - users can now associate a Person page with a Basic Page under the Additional Options » Related Content section. <a href="/training/all/people-related-to-content">Documentation</a>.</li> <li><strong>Receptive widget</strong> - a link has been added to the admin toolbar allowing users with Receptive.io accounts to submit feature requests to our new feedback/request system. <a href="/training/managers/receptive">Documentation</a>.</li> <li><strong>Entity Clone</strong> - pages and blocks, now considered "entities" by the Drupal community, can be duplicated. This module can be enabled by Site Builders and the permissions will automatically be assigned or you can submit the <a href="/form/service-request-form">Service Request Form</a> to request it be added to your site(s). <a href="/training/all/duplicating-blocks-pages">Documentation</a>.</li> </ul><h4>Bug Fixes</h4> <ul><li><strong>Taxonomy Term Page RSS Links</strong> - The URL for Taxonomy term RSS feeds were reported as providing broken links, excluding the /news or /blog URL alias pathways. This has been fixed to include the necessary sections to correct the malformed links.</li> <li><strong>Teaser Link Box link redirects</strong> - If the page a Teaser Link Box link points to updates its URL pathway, a redirect will now automatically be added so the Link Box’s link won’t break or direct to a 404.</li> <li><strong>Related Content Block Duplications</strong> - The related content block no longer shows content twice when the currently viewed page shares more than one of the same tag with the related pages.</li> <li><strong>Multilingual Duplications</strong> - Sites using Multilingual features will no longer list the same article in every language the site is designed to show; instead, the system will detect the user’s language preferences to filter content to the single designed language for display purposes.</li> </ul><p> </p> </div> <div class="field field--name-field-sf-article-category field--type-entity-reference field--label-above"> <div class="field__label">Category</div> <div class="field__item"><a href="/articles/changelog" hreflang="en">Changelogs</a></div> </div> <div class="field field--name-field-sf-tags field--type-entity-reference field--label-above"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/sitefarm-610" hreflang="en">SiteFarm 6.1.0</a></div> </div> </div> Tue, 12 Feb 2019 16:18:35 +0000 Jessica Hayes 3451 at https://sitefarm.ucdavis.edu New feature request tool in SiteFarm https://sitefarm.ucdavis.edu/blog/new-feature-request-tool-sitefarm <span class="field field--name-title field--type-string field--label-hidden">New feature request tool in SiteFarm</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <span lang="" about="/user/6" typeof="schema:Person" property="schema:name" datatype="">Jessica Hayes</span> </span> <span class="field field--name-created field--type-created field--label-hidden">January 28, 2019</span> <div class="field field--name-field-sf-primary-image field--type-image field--label-hidden field__item"> <img src="/sites/g/files/dgvnsk511/files/styles/sf_landscape_16x9/public/images/article/receptive-io-customer-service.png?h=dd3437bd&amp;itok=5fwRVBZP" width="1280" height="720" alt="Receptive.io" title="Copyright: Receptive.io" typeof="foaf:Image" class="image-style-sf-landscape-16x9" /> </div> <div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="https://sitefarm.ucdavis.edu/blog/226/feed" addthis:title="" addthis:description="SiteFarm is Receptive to your ideas! One of the things we love about working with all of you is your interest in seeing SiteFarm improve and grow. Many of you have offered ideas that have been instrumental to our development path and overall vision for the future. We want to make it even easier for you to get involved. SiteFarm has started a one-year pilot program with a tool called Receptive.io to improve and streamline communications between our user community members and the SiteFarm team. This third-party service specializes in providing a portal for clients to more effectively share ideas, discuss them as a community, vote on them, and the development team to evaluate the ideas, and then update clients on each suggestion’s progress through the roadmap, development, and release cycle with greater transparency.   Who is eligible to use Receptive? Initially, access to Receptive is limited to already established members of the Client Group List who will receive a separate email containing steps for accessing Receptive. If your group needs to expand or update its member list, individuals added must be a faculty or staff member possessing a Site Manager role; due to FERPA requirements, we cannot include students or student-employees at this time. Students and anyone with Editor or Contributor roles will need to share their ideas through their eligible Site Manager. Site Managers not in the Client Group List can submit a Receptive account request form to be added to the account waitlist if you would like to be added at a future date after a preliminary period of working with our phase I group. You’ll be able to: Make feature requests Join discussions with other SiteFarm users about specific feature requests Vote on and prioritize feature requests Keep up-to-date on our work with our Roadmap, What’s Coming, and Releases pages in Receptive We’ve created documentation to help you familiarize yourself with the features. We look forward to hearing from you, but if you have any questions. "> <a class="addthis_button_facebook"></a> <a class="addthis_button_linkedin"></a> <script> var addthis_share = { templates: { twitter: "One of the things we love about working with all of you is your interest in seeing SiteFarm improve and grow. Many of you have offered ideas that have been instrumental to our development path and overall vision for the future. We want to make it even easier for you to get involved. Welcome to Receptive.io. " } } </script> <a class="addthis_button_twitter"></a> <a class="addthis_button_email"></a> <a class="addthis_button_compact"></a> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><h2 class="heading--underline">SiteFarm is Receptive to your ideas!</h2> <p>One of the things we love about working with all of you is your interest in seeing SiteFarm improve and grow. Many of you have offered ideas that have been instrumental to our development path and overall vision for the future.</p> <p>We want to make it even easier for you to get involved. SiteFarm has started a one-year pilot program with a tool called Receptive.io to improve and streamline communications between our user community members and the SiteFarm team. This third-party service specializes in providing a portal for clients to more effectively share ideas, discuss them as a community, vote on them, and the development team to evaluate the ideas, and then update clients on each suggestion’s progress through the roadmap, development, and release cycle with greater transparency.</p> <img alt="Receptive.io logo" data-entity-type="file" data-entity-uuid="4b5b780a-f374-4a75-b928-ac4c7d333ecf" height="63" src="/sites/g/files/dgvnsk511/files/inline-images/receptive_logo_no_squares.png" width="554" class="align-center" /><h4> </h4> <h4>Who is eligible to use Receptive?</h4> <p>Initially, access to Receptive is limited to already established members of the <a href="/sign-up/client-groups">Client Group List</a> who will receive a separate email containing steps for accessing Receptive. If your group needs to expand or update its member list, individuals added must be a faculty or staff member possessing a Site Manager role; due to FERPA requirements, we cannot include students or student-employees at this time. Students and anyone with Editor or Contributor roles will need to share their ideas through their eligible Site Manager.</p> <p>Site Managers not in the Client Group List can submit a <a href="/form/request-a-receptive-account">Receptive account request form</a> to be added to the account waitlist if you would like to be added at a future date after a preliminary period of working with our phase I group.</p> <p>You’ll be able to:</p> <ul type="disc"><li><span>Make feature requests</span></li> <li><span>Join discussions with other SiteFarm users about specific feature requests</span></li> <li><span>Vote on and prioritize feature requests</span></li> <li><span>Keep up-to-date on our work with our Roadmap, What’s Coming, and Releases pages in Receptive</span></li> </ul><p>We’ve created <a href="/training/managers/receptive">documentation</a> to help you familiarize yourself with the features. We look forward to hearing from you, but if you have any questions.</p> </div> <div class="field field--name-field-sf-article-category field--type-entity-reference field--label-above"> <div class="field__label">Category</div> <div class="field__item"><a href="/articles/service-updates" hreflang="en">Service Updates</a></div> </div> <div class="field field--name-field-sf-tags field--type-entity-reference field--label-above"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/receptiveio" hreflang="en">Receptive.io</a></div> </div> </div> Mon, 28 Jan 2019 17:04:58 +0000 Jessica Hayes 3426 at https://sitefarm.ucdavis.edu Changelog SiteFarm 6.0.0 Released https://sitefarm.ucdavis.edu/blog/changelog-600-released <span class="field field--name-title field--type-string field--label-hidden">Changelog SiteFarm 6.0.0 Released</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <span lang="" about="/user/6" typeof="schema:Person" property="schema:name" datatype="">Jessica Hayes</span> </span> <span class="field field--name-created field--type-created field--label-hidden">December 03, 2018</span> <div class="field field--name-field-sf-primary-image field--type-image field--label-hidden field__item"> <img src="/sites/g/files/dgvnsk511/files/styles/sf_landscape_16x9/public/images/article/google-custom-search.png?h=fc9d9b55&amp;itok=iFBv3XFp" width="1280" height="720" alt="The Google logo with a magnifying glass in front of it." title="Visitors can now use the Google to search your sites." typeof="foaf:Image" class="image-style-sf-landscape-16x9" /> </div> <div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="https://sitefarm.ucdavis.edu/blog.rss" addthis:title="Latest Blog Posts" addthis:description="This latest release of SiteFarm 6.0.0 comes with several high-impact updates and features to create added value for your sites. New Features Footnotes &amp; Citations - this came as a feature request in conjunction with the ability to insert sub- and superscript text. A new icon is available from your WYSIWYG bar to automate and style the inclusion of footnotes in your pages. Documentation Geolocation Configuration - site managers will now be able to enter in a Google Maps API key once the module is enabled via the Manage » Configuration » Web Services section » Geolocation settings page. Google Custom Search - you will now have access to the Google Custom Search appliance that, if enabled, will replace the default search option that came packaged with your default SiteFarm site. All content, including block content, is visible to the search. Instructions for configuring the look are included so your search results will blend with your default theme, and you can configure it to search one or more sites at a time, a great feature for large organizations with many sites. Documentation Print.css - while we don&#039;t encourage you to print out your web pages, if you should see a need to do so, we&#039;ve implemented an optional setting to optimize your content for printing to minimize ink usage and remove commonly ignored sections for improved output. Documentation SiteImprove - if you haven&#039;t heard of SiteImprove yet, it&#039;s a service specifically designed to help improve the overall quality of a site&#039;s content, SEO, and most importantly, accessibility compliance. This is a UC-wide license meant to encourage site owners to take the time to review and improve the site utilizing the newly available, optional plugin. An account with SiteImprove is required to use this feature (please contact David Levin, IET Academic Technology Services, for more information). Documentation Interface Update With the integration of the Drupal 8.6 software update, you&#039;ll discover that the entry known as &quot;URL PATH SETTINGS&quot; available from under the Additional Options section of your page while in Edit mode has been renamed to &quot;URL ALIAS&quot;. The entire list of labels under Additional Options has also had their links changed from black to blue. Only the appearance has changed; all functionality remains the same. Drupal Community Development - Feature Watch The Layout Builder and Media Library projects, both highly anticipated, are continuing their development on schedule. In the latest Drupal 8.6 both of these initiatives have been labeled as &quot;Experimental&quot; by the Drupal Community. The current Drupal Roadmap indicates an effort to bring both of these to a Stable state in time for the release of Drupal 8.7 on May 1, 2019. Once available, our developers will be reviewing these two features again to determine if they&#039;re ready for broader use by the SiteFarm community and what work may be required (code retrofitting, theming, documentation) so as to avoid any possible bugs or user-experience problems. To clarify: while the Drupal Community projects may be completed next spring, work may yet need to be done before we can release it for your use, so a further update on their viability will follow a period of thorough review by the team. Bug Fixes Multi-select drop-downs should have the text centered vertically now. If a site was set-up as an intranet with CAS authentication required, a redirect loop was occurring and forcing a user along a specific path, resulting in access denied, but no 404 or 403 message to advise the user that they require a user account. The webform confirmation process was producing 3 submissions if the confirmation notification utilized an option other than the inline confirmation page. We were unable to reproduce the problem as we believe a Core patch fixed the issue prior to our review. Users reported problems with the addThis with respect to presentation and connection issues with Twitter. Two elements were at issue here: first, the proper Metatags must be enabled and configured to allow your site to send the information to Twitter, and second, your summaries, which are used by Twitter for the text can&#039;t exceed the 280 character count. "> <a class="addthis_button_facebook"></a> <a class="addthis_button_linkedin"></a> <script> var addthis_share = { templates: { twitter: "This latest release of SiteFarm 6.0.0 comes with several high-impact updates and features to create added value for your sites, including Google Custom Search and the UC System&#039;s SiteImprove plugin for improving SEO, content quality, and accessibility compliance. " } } </script> <a class="addthis_button_twitter"></a> <a class="addthis_button_email"></a> <a class="addthis_button_compact"></a> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>This latest release of SiteFarm 6.0.0 comes with several high-impact updates and features to create added value for your sites.</p> <h4>New Features</h4> <ul><li><strong>Footnotes &amp; Citations</strong> - this came as a feature request in conjunction with the ability to insert sub- and superscript text. A new icon is available from your WYSIWYG bar to automate and style the inclusion of footnotes in your pages. <a href="/training/all/footnotes-citations">Documentation</a></li> <li><strong>Geolocation Configuration</strong> - site managers will now be able to enter in a Google Maps API key once the module is enabled via the Manage » Configuration » Web Services section » Geolocation settings page.</li> <li><strong>Google Custom Search</strong> - you will now have access to the Google Custom Search appliance that, if enabled, will replace the default search option that came packaged with your default SiteFarm site. All content, including block content, is visible to the search. Instructions for configuring the look are included so your search results will blend with your default theme, and you can configure it to search one or more sites at a time, a great feature for large organizations with many sites. <a href="/training/managers/google-custom-search">Documentation</a></li> <li><strong>Print.css</strong> - while we don't encourage you to print out your web pages, if you should see a need to do so, we've implemented an optional setting to optimize your content for printing to minimize ink usage and remove commonly ignored sections for improved output. <a href="/training/managers/print-css">Documentation</a></li> <li><strong>SiteImprove</strong> - if you haven't heard of SiteImprove yet, it's a service specifically designed to help improve the overall quality of a site's content, SEO, and most importantly, accessibility compliance. This is a UC-wide license meant to encourage site owners to take the time to review and improve the site utilizing the newly available, optional plugin. An account with SiteImprove is required to use this feature (<a href="mailto:dslevin@ucdavis.edu">please contact David Levin</a>, IET Academic Technology Services, for more information). <a href="/training/managers/siteimprove-module">Documentation</a></li> </ul><h4>Interface Update</h4> <p>With the integration of the Drupal 8.6 software update, you'll discover that the entry known as "URL PATH SETTINGS" available from under the Additional Options section of your page while in Edit mode has been renamed to "URL ALIAS". The entire list of labels under Additional Options has also had their links changed from black to blue. Only the appearance has changed; all functionality remains the same.</p> <p><img alt="Screenshot of the label with its updated text from URL Pathway Setting to URL Alias." data-entity-type="file" data-entity-uuid="2390e8c1-350f-41af-b101-61d5def0f42a" height="264" src="/sites/g/files/dgvnsk511/files/inline-images/url-alias-label-nov2018.png" width="273" /></p> <h4>Drupal Community Development - Feature Watch</h4> <p>The <strong>Layout Builder and Media Library</strong> projects, both highly anticipated, are continuing their development on schedule. In the latest Drupal 8.6 both of these initiatives have been labeled as "Experimental" by the Drupal Community. The current <a href="https://www.drupal.org/core/roadmap">Drupal Roadmap</a> indicates an effort to bring both of these to a Stable state in time for the release of Drupal 8.7 on May 1, 2019. Once available, our developers will be reviewing these two features again to determine if they're ready for broader use by the SiteFarm community and what work may be required (code retrofitting, theming, documentation) so as to avoid any possible bugs or user-experience problems. To clarify: while the Drupal Community projects may be completed next spring, work may yet need to be done before we can release it for your use, so a further update on their viability will follow a period of thorough review by the team.</p> <h4>Bug Fixes</h4> <ul><li>Multi-select drop-downs should have the text centered vertically now.</li> <li>If a site was set-up as an intranet with CAS authentication required, a redirect loop was occurring and forcing a user along a specific path, resulting in access denied, but no 404 or 403 message to advise the user that they require a user account.</li> <li>The webform confirmation process was producing 3 submissions if the confirmation notification utilized an option other than the inline confirmation page. We were unable to reproduce the problem as we believe a Core patch fixed the issue prior to our review.</li> <li>Users reported problems with the addThis with respect to presentation and connection issues with Twitter. Two elements were at issue here: first, the <a href="/blog/getting-facebook-and-twitter-display-primary-image-articles">proper </a><a href="/blog/getting-facebook-and-twitter-display-primary-image-articles">Metatags</a><a href="/blog/getting-facebook-and-twitter-display-primary-image-articles"> must be enabled and configured</a> to allow your site to send the information to Twitter, and second, your summaries, which are used by Twitter for the text can't exceed the 280 character count.</li> </ul></div> <div class="field field--name-field-sf-article-category field--type-entity-reference field--label-above"> <div class="field__label">Category</div> <div class="field__item"><a href="/articles/changelog" hreflang="en">Changelogs</a></div> </div> <div class="field field--name-field-sf-tags field--type-entity-reference field--label-above"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/sitefarm-600" hreflang="en">SiteFarm 6.0.0</a></div> <div class="field__item"><a href="/tags/wysiwyg" hreflang="en">WYSIWYG</a></div> <div class="field__item"><a href="/tags/google-custom-search" hreflang="en">Google Custom Search</a></div> <div class="field__item"><a href="/tags/search" hreflang="en">Search</a></div> <div class="field__item"><a href="/tags/siteimprove" hreflang="en">SiteImprove</a></div> <div class="field__item"><a href="/tags/accessibility" hreflang="en">Accessibility</a></div> </div> </div> Mon, 03 Dec 2018 15:00:00 +0000 Jessica Hayes 3211 at https://sitefarm.ucdavis.edu Changelog 5.3.0 Released [Updated] https://sitefarm.ucdavis.edu/blog/changelog-530-released <span class="field field--name-title field--type-string field--label-hidden">Changelog 5.3.0 Released [Updated]</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <span lang="" about="/user/6" typeof="schema:Person" property="schema:name" datatype="">Jessica Hayes</span> </span> <span class="field field--name-created field--type-created field--label-hidden">October 15, 2018</span> <div class="field field--name-field-sf-primary-image field--type-image field--label-hidden field__item"> <img src="/sites/g/files/dgvnsk511/files/styles/sf_landscape_16x9/public/images/article/business-tech-support.jpg?h=1c9b88c9&amp;itok=g3WUtGz9" width="1280" height="720" alt="A group of people&#039;s hands connecting at the center of table signaling success and cooperation amid lots of laptops." typeof="foaf:Image" class="image-style-sf-landscape-16x9" /> </div> <div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="https://sitefarm.ucdavis.edu/blog.rss" addthis:title="Latest Blog Posts" addthis:description="Our latest change, released just this past weekend, is an important infrastructure update designed to improve server and caching performance. It&#039;s not only a system update with important benefits, but it&#039;s also an update that can have a noticeable effect on how your site updates depending on where you&#039;ve been doing your edits to this point. What changed? We moved from APCu to Memcache (server caching, defined by https://whatis.techtarget.com, is a process &quot;that saves Web pages or other Internet content locally. By placing previously requested information in temporary storage, or cache, a cache server both speeds up access to data and reduces demand on an enterprise&#039;s bandwidth.&quot;) to improve how the SiteFarm service handles caching and memory usage. What this means for you Your site is not live yet - no change, continue as you have. Your site is live and everyone in your unit is editing the site using: sitename.ucdavis.edu/login or sub.sitename.ucdavis.edu/login - no change, continue as you have. Your site is live and some or all of the people working on the site are using: sitename.sf.ucdavis.edu/login - changed: do not use your sitename.sf.ucdavis.edu/login domain to log in and do work; use your live domain name. Why you should work from your live domain The new memory protocols incorporated into SiteFarm mean that content will automatically refresh every 6 hours. This is a passive protocol that doesn&#039;t require you to do anything. If work has been done in sitename.sf.ucdavis.edu, then after the 6 hours have elapsed, the content will be published out to sitename.ucdavis.edu. All changes made from your live domain, sitename.ucdavis.edu/ or sub.sitename.ucdavis.edu/, will notify the server to update its content and display it immediately. As this is the version of your site the public sees, they too will receive the update almost at the same time. All changes made from your sitename.sf.ucdavis.edu are only visible to people who can access that domain name until the protocol to refresh the memory runs, after which the changes will be visible on the live sitename.ucdavis.edu. UPDATED - Cache Clearing Issue Identified With our 5.3.0 release detailed in this Changelog, we updated the method used for caching site traffic across the entire SiteFarm platform. In our Changelog, we indicated the importance of editing content from your live domain if you have already launched your site (this does not apply if you&#039;re still developing your site). However, after testing this process, we have learned site changes are still not appearing to the public immediately after saving. Instead, the updates are relying on the default passive cache clear set to 6 hour intervals. We recognize this needs to be changed as quickly as possible and, to that end, we&#039;ve been evaluating the Purge module. This will allow the caching system to become aware of your changes immediately so that your new content will be available to the public even quicker than ever before. We have scheduled the deployment of this update for Sunday, October 21. We thank you for your patience while we fine-tune the balance between performance caching and rapidly-updated content. Your SiteFarm Team How to sync your site and fix the problem if you&#039;re experiencing it If you discover you or someone on your team has been working on the sitename.sf.ucdavis.edu version of your site advise your team to immediately switch to editing the site from your live domain URL ONLY. AS A LAST RESORT IN AN EMERGENCY: If you have access to Site Factory, run the Clear Caches command from your site card to force a refresh. If you don&#039;t have access to your site, you&#039;re welcome to submit a request to the SiteFarm team to perform this test for you, but please communicate the importance of only editing from your live domain URL. Please DO NOT perform multiple Clear Caches: It is bad practice to clear cache via Site Factory unless something is very wrong. It will significantly slow down your site for a bit until the cache is warmed again. Larger sites performing this task can significantly slow down the performance of all the other sites in the service while the process runs. Be kind to your fellow SiteFarmers. "> <a class="addthis_button_facebook"></a> <a class="addthis_button_linkedin"></a> <script> var addthis_share = { templates: { twitter: "Our latest change, released just this past weekend, is an important infrastructure update designed to improve server and caching performance. It&#039;s not only a system update with important benefits, but it&#039;s also an update that can have a noticeable effect on how your site updates depending on where you&#039;ve been doing your edits to this point. " } } </script> <a class="addthis_button_twitter"></a> <a class="addthis_button_email"></a> <a class="addthis_button_compact"></a> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Our latest change, released just this past weekend, is an important infrastructure update designed to improve server and caching performance. It's not only a system update with important benefits, but it's also an update that can have a noticeable effect on how your site updates depending on where you've been doing your edits to this point.</p> <h4>What changed?</h4> <p>We moved from APCu to Memcache (server caching, defined by <a href="https://whatis.techtarget.com/definition/cache-server">https://whatis.techtarget.com</a>, is a process "that saves Web pages or other Internet content locally. By placing previously requested information in temporary storage, or <strong>cache</strong>, a <strong>cache server</strong> both speeds up access to data and reduces demand on an enterprise's bandwidth.") to improve how the SiteFarm service handles caching and memory usage.</p> <h4>What this means for you</h4> <ul><li><strong>Your site is not live yet</strong> - no change, continue as you have.</li> <li><strong>Your site is live and everyone in your unit is editing the site using: sitename.ucdavis.edu/login or sub.sitename.ucdavis.edu/login</strong> - no change, continue as you have.</li> <li><strong>Your site is live and some or all of the people working on the site are using: sitename.sf.ucdavis.edu/login</strong> - changed: do not use your sitename.sf.ucdavis.edu/login domain to log in and do work; use your live domain name.</li> </ul><h4>Why you should work from your live domain</h4> <ol><li>The new memory protocols incorporated into SiteFarm mean that content will automatically refresh every 6 hours. This is a passive protocol that doesn't require you to do anything. If work has been done in sitename.sf.ucdavis.edu, then after the 6 hours have elapsed, the content will be published out to sitename.ucdavis.edu.</li> <li>All changes made from your live domain, sitename.ucdavis.edu/ or sub.sitename.ucdavis.edu/, will notify the server to update its content and display it immediately. As this is the version of your site the public sees, they too will receive the update almost at the same time.</li> <li>All changes made from your sitename.sf.ucdavis.edu are only visible to people who can access that domain name until the protocol to refresh the memory runs, after which the changes will be visible on the live sitename.ucdavis.edu.</li> </ol><h4>UPDATED - Cache Clearing Issue Identified</h4> <p>With our 5.3.0 release detailed in this Changelog, we updated the method used for caching site traffic across the entire SiteFarm platform. In our Changelog, we indicated the importance of editing content from your live domain if you have already launched your site (this does not apply if you're still developing your site). However, after testing this process, we have learned site changes are still not appearing to the public immediately after saving. Instead, the updates are relying on the default passive cache clear set to 6 hour intervals.</p> <p>We recognize this needs to be changed as quickly as possible and, to that end, we've been evaluating the Purge module. This will allow the caching system to become aware of your changes immediately so that your new content will be available to the public even quicker than ever before.</p> <p>We have scheduled the deployment of this update for Sunday, October 21.</p> <p>We thank you for your patience while we fine-tune the balance between performance caching and rapidly-updated content.</p> <p>Your SiteFarm Team</p> <h4>How to sync your site and fix the problem if you're experiencing it</h4> <p>If you discover you or someone on your team has been working on the sitename.sf.ucdavis.edu version of your site advise your team to <strong>immediately switch to editing the site from your live domain URL ONLY.</strong></p> <p><strong>AS A LAST RESORT IN AN EMERGENCY:</strong> If you have access to Site Factory, run the <strong>Clear Caches</strong> command from your site card to force a refresh. If you don't have access to your site, you're welcome to submit a request to the SiteFarm team to perform this test for you, but please communicate the importance of only editing from your live domain URL. Please DO NOT perform multiple Clear Caches:</p> <ul><li>It is bad practice to clear cache via Site Factory unless something is very wrong. It will significantly slow down your site for a bit until the cache is warmed again.</li> <li>Larger sites performing this task can significantly slow down the performance of all the other sites in the service while the process runs. Be kind to your fellow SiteFarmers.</li> </ul> </div> <div class="field field--name-field-sf-article-category field--type-entity-reference field--label-above"> <div class="field__label">Category</div> <div class="field__item"><a href="/articles/changelog" hreflang="en">Changelogs</a></div> </div> <div class="field field--name-field-sf-tags field--type-entity-reference field--label-above"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/sitefarm-530" hreflang="en">SiteFarm 5.3.0</a></div> <div class="field__item"><a href="/tags/memcache" hreflang="en">Memcache</a></div> <div class="field__item"><a href="/tags/varnish" hreflang="en">Varnish</a></div> </div> </div> Mon, 15 Oct 2018 21:12:24 +0000 Jessica Hayes 3136 at https://sitefarm.ucdavis.edu 10 Things to make your BADCamp rock! https://sitefarm.ucdavis.edu/blog/10-things-make-your-badcamp-rock <span class="field field--name-title field--type-string field--label-hidden">10 Things to make your BADCamp rock!</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <span lang="" about="/user/6" typeof="schema:Person" property="schema:name" datatype="">Jessica Hayes</span> </span> <span class="field field--name-created field--type-created field--label-hidden">October 12, 2018</span> <div class="field field--name-field-sf-primary-image field--type-image field--label-hidden field__item"> <img src="/sites/g/files/dgvnsk511/files/styles/sf_landscape_16x9/public/images/article/badcamp-ten-things.png?h=a8386f0e&amp;itok=tFFS8-dQ" width="1280" height="720" alt="BADCamp 2018 logo" typeof="foaf:Image" class="image-style-sf-landscape-16x9" /> </div> <div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="https://sitefarm.ucdavis.edu/blog.rss" addthis:title="Latest Blog Posts" addthis:description="Are you attending BADCamp 2018 this year? We hope you are! But if you&#039;re new to the event or haven&#039;t attended in a while, here are some suggestions from the event organizers to help make your experience more comfortable and enjoyable. Read &quot;10 Things to make your BADCamp rock!&quot; on the BADCamp site. "> <a class="addthis_button_facebook"></a> <a class="addthis_button_linkedin"></a> <script> var addthis_share = { templates: { twitter: "Are you attending BADCamp 2018 this year? We hope you are! But if you&#039;re new to the event or haven&#039;t attended in a while, here are some suggestions from the event organizers to help make your experience more comfortable and enjoyable. " } } </script> <a class="addthis_button_twitter"></a> <a class="addthis_button_email"></a> <a class="addthis_button_compact"></a> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Are you attending BADCamp 2018 this year? We hope you are! But if you're new to the event or haven't attended in a while, here are some suggestions from the event organizers to help make your experience more comfortable and enjoyable.</p> <p><a class="btn--lg btn--primary" href="https://2018.badcamp.org/blog/2018/10/10-things-make-your-badcamp-rock">Read "10 Things to make your BADCamp rock!" on the BADCamp site.</a></p> </div> <div class="field field--name-field-sf-article-category field--type-entity-reference field--label-above"> <div class="field__label">Category</div> <div class="field__item"><a href="/articles/drupal" hreflang="en">Drupal News and Community</a></div> </div> <div class="field field--name-field-sf-tags field--type-entity-reference field--label-above"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/badcamp" hreflang="en">BADCamp</a></div> </div> </div> Fri, 12 Oct 2018 16:43:15 +0000 Jessica Hayes 3116 at https://sitefarm.ucdavis.edu