Latest Contributions by KlaraSchmitt

Hi Kristen, To inject a background image in your header, you'll want to chose the "Custom HTML/CSS" option under appearance. We currently do not have a method for you to set a background image on our preconfigured header layout options, although we can certainly keep that as a consideration for a future improvements. After selecting the Custom HTML/CSS radio in the appearance section, you'll want to expand the next accordion, which will contain boxes for HTML and CSS. You can either select the text input or the expand icon to trigger the modal with the code editor for each section. Hub is currently using Bootstrap 3 and if you're using the default custom header we provide, you can apply your background image to the .first-tier CSS class or .navbar-default. You likely do not need width or height properties, but you might want to consider the background-size property: https://www.w3schools.com/cssref/css3_pr_background-size.asp If you want it to responsively rescale to fit the entire container, I'd recommend background-size: cover. You also probably want background-repeat: no-repeat to avoid tiling. If you are comfortable inspecting code, you might find https://opendata-rspb.opendata.arcgis.com/ to be a good example of how to construct a simple custom header with a background image. ... View more

Should anyone else run into this issue, the solution to targeting row classes is to use a section element rather than div element as the adjacent HTML to one's class, or simply use the classname. I was incorrect when I said the snippet looked like it should work otherwise. ... View more

This is probably going to be a little more hacky than you'd like and I apologize. We are looking into ways to make pulling in pre-existing images easier as we know many services do offer a media library. There are just some difficulties we're trying to iron out. If you have images hosted anywhere else, you could use those URLs. But if you need to replace the images and you wish to use the site item attached resources as your image hosting method, you can upload an image via the Image Card. Crop as necessary. Save your site. (You can always remove the image card once you have your image URL.) Once you have the image you want to use attached to the site as a resource, if you are using a mouse, right-click the image and select Inspect from the dropdown menu. (I'm on Chrome, so the next few screenshots will be depicting Chrome.) Select Chrome Inspect Option This will open up the Chrome Dev Tools and should highlight the image in the DOM. Code inspector showing image html Right-click the url and open in new tab. This will open a new browser tab. In the URL bar, you want to scan the url for the image extension. In my case this is a .jpg. Insert your cursor before the question mark, highlight everything from before the question mark to the end of the url, and delete it. You don't want the token as that's associated with your login and won't be there for everyone. Once you delete the part after the extension you should have an image URL that you can place in the card as a replacement image. I know this isn't terribly straightforward and I'm sorry about that. Best I can offer at the moment. ... View more

Hi Kristen, To change the row background image, you want to open the site in the Layout Editor. 1. Hover over the row until you see the vertical button controls for the row. (Row buttons are in vertical groupings, card buttons are in horizontal groupings to avoid overlay.) 2. Select the pencil icon to open Row Settings. 3. In the Row Settings panel, under the Appearance accordion, there will be options for adding a replacement image. You can choose to link by URL or upload directly. (This is my site so the color pallet will look different than yours, but this is what to expect.)   ... View more

Hi Kristen, It is a little hard to give recommended banner dimensions for background images in Hub as Hub is a responsive app and content will re-order based on device size. For example, with that template, assuming you keep the title, subtitle, and search as-is, and add no other cards to that row that would increase height, the row height is 365px on desktop and 616px on an average size phone screen. Depending on what you want to guess is the average desktop browser screen might be, maybe ~1200px for laptop screens or ~2000px for larger screens, I'd say the minimum size requirements for replacing that image would be a 616px height banner than is 1600-2000px wide.  But because large images do tend to load more slowly, especially on mobile networks, it's also best to use JPEG if no transparency is required and to compress images if possible, using something like: https://www.iloveimg.com/compress-image Lastly, as previously stated, Hub is responsive; this means we may proportionally resize your background image so that regardless of device size, your image will cover the entirety of your row background. It also means that parts of your image may not always be visible depending on a viewer's screen size. We do provide an option to set image focal point. This lets you choose which portion of the image should be the part the primary focus as the image scales for different devices. If you do wind up changing the height of the content in the row, you can determine your new row height on desktop and mobile by a couple different methods. 1) You can use a browser ruler plugin, such as this Chrome extension, which will let you draw a rectangle on any portion of your screen and get measurements: https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal?hl=en  2) Alternatively, you can use Chrome Dev Tools to measure the height of an element. You would right-click on the row, select inspect from the dropdown menu, and then click on the <section> html element from the Elements panel. This should pop up a white tooltip on the visual panel with the dimensions of the row and that is what you can use to size images. You do want to do this for both a desktop browser and a mobile browser, but Chrome Dev Tools does offer a mobile emulator, simply click the icon, select the device type, and repeat the inspection of section. ... View more

Hi Ulrich, I'm sorry that you are having this problem. When you are dropping a card in the layout editor, are you seeing a white box with two sides and does one of them turn blue before you release the card to drop it? The blue side of the white box is where your dragged card will show up in relation to existing content. If you able to see the boxes and are able see one side turn blue before you release the card to drop and it's still not working, can you please tell me what browser you are using?   ... View more

Unfortunately, it is not presently possible to edit individual items in our Gallery Card as that is a dynamic card that updates automatically based on the parameters you set, so you would have to change the name of the item at the root object, which I recognize you do not want to do. The only other solution I can see is that instead of using our Gallery Card, you could make your own cards using HTML and our Text Card, which would allow you to change the item name to whatever you want and you'd simply need to link to the Hub item yourself. I will provide the basic code for a card - styling will be handled automatically, but you may want to adjust the Boostrap grid classes in the div wrapping the card depending on how many cards you want to show in a row. The code I will provide assumes 3 cards in a row on laptops, 2 cards per row on tablets, and 1 card per row on mobile. If you want 4 cards in a row on laptop instead, switch col-md-4 to col-md-3. <div class="col-xs-12 col-sm-6 col-md-4"> <div class="calcite-web"> <div class="card-base"> <div class="card-image-wrap"> <img class="card-image" src="http://esri.github.io/calcite-web/assets/img/docs/bridge3.jpg" alt="Bridge Club, 1954"> <div class="card-image-caption"> Florida, January 1954 </div> </div> <div class="card-content"> <h4><a href="#">Card with Image</a></h4> <p>Cards can have full-bleed images with optional captions.</p> <a href="" class="btn btn-default">View Examples</a> </div> </div> </div> </div>   ... View more

Hello, Instead of using <a href="https://..."> for your home link, try <a href="/">. ... View more