Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'thumbnail'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location


Badges


Expert ID

Found 140 results

  1. Hi, when i upload thumbnail images to embedded vimeo videos there is around a 50% chance they will actually show onscreen. Why is this? Do they have to be a specific size/format? It's very frustrating. They are visible on the thumbnail section of the video edit area, but they are not visible on my site. Is this a known issue?
  2. Heyyy , is it possible to have different product image sizes on the shop page. I will be selling a range of graphic prints. Some images need to appear in as landscape and other vertical. see image attachment for example. Thanks Brad
  3. Site URL: https://usualwines.com/blogs/knowledge-base/tannins-in-wine Hi there – Looking to have the "Thumbnail" of a blog entry display to the left of all content and not scroll. A few people have said it would be much better as a page, but really hoping it can be a blog – is this possible??
  4. Hi all and thanks in advance, Is there a way that I can replace the text in the navbar with images. I've hand drawn the texts (I.E "About", "Contact", "Home") and i would like to replace the text with images. Is there a way to do that, maybe even on CSS? Thanks.
  5. I'm having trouble figuring out how to optimize my website so the thumbnail images associated with a blog post show up next to google search results. I've attached a screenshot showing our google result next to someone's who has obviously figured this out a little better than I have. I'm using the Farro template. Any advice you may have is appreciated.
  6. Site URL: https://www.nathanvininglaw.com/blog Whenever I do a blog post, it places the thumbnail image above the blog post as a banner and I cannot figure out how to remove it. This is a problem because I want the thumbnail image displayed in summary posts throughout the site and not as a banner above the blog. Here is an example: https://www.nathanvininglaw.com/blog or https://www.nathanvininglaw.com/blog?category=Family+Law
  7. Site URL: https://augustussung.com Hello all, Hope everyone is well and safe during these crazy times. I am one of many who unfortunately lost their jobs due to COVID-19. As such, I am frantically trying to update my portfolio and was hoping you kind folks can help me with some issues I'm having. I use the Forte template, which has a full bleed image carousel on the landing page [Index pages]. It's beautiful but was thinking of adding some sort of motion instead of just static images. Is there a way to have them as video clips instead of images or gifs (which when stretched becomes really grainy)? Appreciate your help with this. Here's hoping the Squarespace community can help me get back on my feet. -G
  8. Site URL: https://www.catherineljackson.com/blog Hi! I was wondering if there is a way to adjust the way the pictures are formatted in the "single column" blog style. Right now, I am using the "side by side" layout because the pictures are ginormous in the single column blog. Ideally, I'd like the posts to be structured with the title on top, then the photo, then the post excerpt, all in one column. Is this possible? Thank you!
  9. Site URL: https://www.sarahwalker.work/ Hi there folks! I'm having trouble with the gallery block on my homepage. It contains three images, with the column number set to 3 in the gallery settings. On desktop, it displays fine, but on mobile, the grid pushes the third image onto a new line, which is making me frustrated. I had a Google and tried the following code in the Custom CSS area, but to no avail - it keeps running over two lines, rather than forcing the grid to three on mobile. @media screen and (max-width: 640px) { .sqs-gallery-block-grid .slide.sqs-gallery-design-grid-slide { width: calc(100%/1); } } This is all well above my wheelhouse - my coding knowledge extends to inserting images and making html links (what a boss). I'd greatly appreciate any thoughts anyone might have about how I can wrangle this! Cheers from Melbourne, Australia, Sarah
  10. I run a podcast as a part of a blog I host on Squarespace. As a result, I regularly link to external URLs on my Squarespace blog. However, it seems I can only link the post title to the source URL and not the thumbnail. I'd like to be able to link the post's thumbnail to the external URL as well. Currently, when people click the title, they end up at the correct content, but when they click the thumbnail, they're sent to an empty blog post. Does anyone have any solutions for this problem? Someone else seems to have brought up something similar in November:
  11. Site URL: https://www.seinajoenopiskelijapalvelut.fi/blog How can I add thumbnails to blog list view? Bryant doesen't give any options to customize this. https://www.seinajoenopiskelijapalvelut.fi/blog Or, if I have to manually make this with summary blog, how can I hide the category tag?
  12. I would like to hide the thumbnails from this product page: https://www.loungepair.com/offer-access Can anyone think of some custom script that I can inject to do so?
  13. Site URL: https://www.thislandisdigital.com/test-rectangles I've asked a less clear version of this question and wanted to try again with more clarity. The ideal solution would be flexible enough to be reapplied to achieve various similar arrangements. The immediate solution would strictly allow for the one requested arrangement. I am not amazing at CSS, so feel free to over-explain if you'd like. By default the Avenue template's indexes display a set of pages with identically proportioned thumbnails. In site styles, I can change the image ratio and every thumbnail will always occupy a single grid space. My current design uses square thumbnails (ratio 100, or 1:1) arranged in rows of 4 or, on mobile, rows of 2. In other words, I've created a perfect grid of squares. This design is largely inspired by ArtStation which sets a familiar standard in my industry. What I want is for the first two thumbnails to occupy two spaces in the grid for a ratio of 2:1. Because the rows for both desktop (4) and mobile (2) are divisible by 2, there is space for this in concept. Below are images of what I have and what I need. <<< Permission to stop reading here if you've already got an idea. Check images for reference. ⏰ So far I've been able to selectively target individual images and their backgrounds which I used to apply hover effects. I tried various methods of resizing images but often struggled with automatic vertical scaling (I'm looking for double wide with no change to height). Other attempts only scaled or skewed the image, leaving some part of the overall "thumbnail" structure at its original size. I don't know enough CSS to be able to understand that structure just yet. Below is the code I use to identify and affect particular thumbnails (modifying the "n" to a specific index). It's also how I'll assign rectangular hover images to the double-wide images. a.project:nth-child(n):hover { img { // On hovering over a specific block, affect the image at that selection. opacity: 20%; filter: blur(2px); transition: all 0.5s; } .content-fill { // On hovering over a specific block, affect the filled color at that selection. background-image: url(https://static1.squarespace.com/static/5338f2a1e4b012d5a0b4b9e7/t/5e852b782dc9304ac485f646/1585785720583/Thumbnails_HoverImage-Square_01.png); background-size: cover; //or: 100%; background-position: center center; background-repeat: no-repeat; } } I then tried to assign a {display: grid;} with grid-template-areas to an upper element on an index page. With this I successfully arranged the thumbnails as desired BUT had no control over vertical scaling. The double-wide thumbnails ended up appearing double-tall as well. My assumption here is that the width of the thumbnails was directly tied to the browser window (up to the maximum width), while the height had no obvious point of reference. Both my 1:1 thumbs and my 2:1 thumbs had a height of 512px, yet the height of each row was not identical. Instead, the images were locked to a 1:1 ratio, so if an image was assigned a width of two grid tiles, their height (while still one grid space tall) was doubled as well. I was able to rescale the image itself, but apparently not the entire container which stayed the same. I may have even been able to scale the grid space of each image at one point, but the clickable square and backgrounds and such were overlapping and jammed behind one another. Just lots and lots of weirdness. Below is some code for my attempts and a link to a page to test it. // Name the generic children of the layout in whatever order they appear. #collection-5c89d82aee6eb05083075575 #projectThumbs>div { a:nth-of-type(n){width: 100%;} a:nth-of-type(1){grid-area: one;} a:nth-of-type(2){grid-area: two;} a:nth-of-type(3){grid-area: three;} a:nth-of-type(4){grid-area: four;} a:nth-of-type(5){grid-area: five;} a:nth-of-type(6){grid-area: six;} a:nth-of-type(7){grid-area: seven;} a:nth-of-type(8){grid-area: eight;} a:nth-of-type(9){grid-area: nine;} a:nth-of-type(10){grid-area: ten;} a:nth-of-type(11){grid-area: eleven;} a:nth-of-type(12){grid-area: twelve;} a:nth-of-type(13){grid-area: thirteen;} a:nth-of-type(14){grid-area: fourteen;} a:nth-of-type(15){grid-area: fifteen;} a:nth-of-type(16){grid-area: sixteen;} } // Assign a grid display to the wrapper beneath #projectThumbs. #collection-5e83973d00d63d75669cbd19 #projectThumbs>div { display: grid; // Display the wrapper element as a grid. grid-template-areas: // CENTER ISLANDS "one one two two" // Two big "three four five six" // Four small "seven eight eight nine" //Small big small "ten eleven twelve thirteen" //Four small "fourteen fifteen fifteen sixteen"; // Small big small } // Customize the larger thumbnails. // At this point I was hopelessly lost, so this code is mostly to help isolate the specific indices needing double widths. #collection-5e83973d00d63d75669cbd19 #projectThumbs { a.project:nth-child(1) img, a.project:nth-child(2) img, a.project:nth-child(8) img { height: 50% !important; width: 100% !important; left: 0 !important; right: 0 !important; } a.project:nth-child(1), a.project:nth-child(2), a.project:nth-child(8){ height: 50% !important; width: 100% !important; } }
  14. Site URL: https://www.benblenner.com/ Hey, I'm struggling to add hover titles to my gallery thumbnails. There is an option to display the title below each thumbnail but I'd like the title of the project to become visible on rollover. Any ideas? I'm using Avenue. Thanks!
  15. Site URL: https://www.thislandisdigital.com/test-rectangles I've already located code to create a hover effect from a recent post (though it needs to be written for every single thumbnail). All of the tutorials and tips I've found so far replace one image with another, though, whereas I would like to overlay an image on top of the currently hovered thumbnail. The effect will basically place a border, some glowing vignette, and a few stylized notches as if looking through a camera. The test index I'm using can be found here. The image I'd like to overlay is here. My current hover code looks like this (with some extra toys thrown in while I experiment!): /* On hovering over a specific block, affect its image. */ a.project:nth-child(1):hover img, a.project:nth-child(2):hover img, a.project:nth-child(3):hover img, a.project:nth-child(4):hover img { //visibility: hidden; opacity: 50%; //border-radius: 150px; filter: blur(2px); //grayscale(100%); //invert(100%); transition: all 0.5s; } a.project:nth-child(1):hover .content-fill, a.project:nth-child(2):hover .content-fill, a.project:nth-child(3):hover .content-fill, a.project:nth-child(4):hover .content-fill { background-image: url(https://static1.squarespace.com/static/5338f2a1e4b012d5a0b4b9e7/t/5e83d5e07a31383b2b77d2d3/1585698273099/Thumbnails_HoverImage_02.png); background-size: 100%; //or: cover; background-position: center center; background-repeat: no-repeat; } How do I make the image appear over top of the thumbnails? I don't really want to fade their opacity to reveal something behind them.
  16. Hi all, The thumbnail images on my home page have stopped loading (they were working before). I'm not having this issue with any other images on the site, and the thumbnail links still work and link through to the page with the actual image. If I clear the cache and then reload the page they usually appear, but the next time I load the page they have gone again. It works fine on mobile, I'm only having trouble with the desktop site. The image below shows how the thumbnails appear. Does anyone know what I should do to fix this? Thanks!
  17. Site URL: https://www.noiamarart.com/ Hello, Wanted to see if anyone is able to help me out with figuring out how to change the title position (bottom of image, not under the image) to my thumbnail images when you hover over the image. *ONLY on Mobile VIEW! (added example pictures of a similar site) Currently when you hover over the image the title shows in center of image and the opacity covers the whole image. Also, seems like only first image on Mobile Viewing has the functioning opacity and title hover, as if it gets stuck on the first image. Got the Avenue template, fyi.
  18. Can anyone advise me on how can I access the month name inside the Event thumbnail so I can change the string to another one (localised to the language not currently supported by SQSP)? (see the picture) I managed to change most of the date instances in Events and Blog pages via datetime handle, but being a non-programmer I struggle with that thumbnail. Basically all I need is a function that will return a number of the month mentioned in the thumbnail (e.g. "3" for "MAR") --- missed bit od code marked below as ******* <script> var month=new Array(12); month[0]="LED"; month[1]="ÚNO"; month[2]="BŘE"; month[3]="DUB"; month[4]="KVĚ"; month[5]="ČER"; month[6]="ČVC"; month[7]="SRP"; month[8]="ZÁŘ"; month[9]="ŘÍJ"; month[10]="LIS"; month[11]="PRO"; Y.use('node', 'node-load', function(Y) { Y.on('domready', function() { Y.all('div.eventlist-datetag-startdate--month').each( function() { var mdate = new Date(this.getAttribute(************)); this.setHTML(month[mdate.getMonth()]); }); }); </script> *thanks*
  19. Site URL: https://runatitshouting.squarespace.com/config/design/custom-css I have posted a event and attached a product to it. it automatically has made this a clickable link and then takes me too a pointless page saying the same thing. is there any way i can disable the picture of the product as a clickable link? I have my add to cart on the screen so there is really no reason to take the user somewhere else saying the same thing. thanks for your help
  20. Site URL: http://xxnaomi.com When I'm creating a post and I want to add a thumbnail, I have the option to upload an image from the Options screen. Is there a way to just use the image I already have inside the post, or do I have to do a duplicate upload? Thanks!
  21. Site URL: https://www.ignatberbeci.com/ Can someone please help? I'm trying to get one index thumbnail on mobile devices while retaining two on desktop. Unfortunately Avenue doesn't have an option for that and it looks like a CSS code would solve this problem. Thank you guys!
  22. Site URL: https://www.thislandisdigital.com/ So I'll just say I'm not great with CSS as it applies to Squarespace (so far). I generally understand a decent amount of the action code with the brackets but identifying the right subjects (#thisPiece .thatPart) has given me too much trouble to get much done. Extra explanation on those subjects would be appreciated. Question: How do I selectively hide or otherwise alter (color, animation) the thumbnail titles only for specific pages within an index? Context: My site, ThisLandisDigital.com, uses the Avenue template and a grid of thumbnails organize my portfolio. It's common to include project logos for games and films within related thumbnails, so I've already got a layer of text for the first several images. When I enable the default index titles, the text color is not consistently legible and the text is redundant for some thumbnails. Similarly, when I try including titles directly in all of the thumbnail images, the whole page becomes much harder to read at a glance (the GIFs are distracting enough). The site style controls also don't let me choose top/bottom positions for the title, only left/center/right and overlay/under. I don't know yet what solution will be best or even whether playing with titles on some of the thumbnails will work at all, but to experiment with it I'll need to be able to single out each page's thumbnail and toggle its title visibility. Bonus Question: How would I swap the thumbnail images themselves when hovered such that I could design the titles into the images manually or possibly reduce my GIFs to hover reactions? Thanks.
  23. Hi everyone Hopefully this is a simple thing to fix. I'm trying to make the thumbnails on my events page smaller. Right now, they are at 1:1 (which works for the image dimensions), but they're way too big and also causing the images to blow out. Anyone know how to resize these, like we can in a gallery? Thanks SITE: https://www.saraleonlaw.com/news-events
  24. Site URL: https://oval-violin-hrze.squarespace.com/ I would love to know if there is some available code to inject to display the post thumbnail image for OM template. Unfortunately didn't realize this wasn't a feature of this template and already worked all day setting up basic styles for the site for a client. We'd really like to stick with this template too. Hopefully this is feasible and someone can help me. Thanks!!
  25. Hi, I am wondering if anybody have same issue with me and if solved? I am using Avenue template, and tried to change 1 thumbnail per row only on mobile, I am currently have 2 thumbnails per row on desktop version. Please help! Thanks in advance.
×
×
  • Create New...