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

Found 127 results

  1. Site URL: https://www.studiovertime.com/thoughts Hello! I'm trying to create a black and white to color rollover for blog post thumbnails (website very much under construction). I'm using this code that I found on another post in this forum: .no-touch .collection-5d7a891600952e518d49e751 .project-image { -webkit-filter: grayscale(100%); filter: grayscale(100%); &:hover, &:focus { -webkit-filter: grayscale(0%); filter: grayscale(0%); } } I've changed .collection...project-image to section[data-section-id="5ec00d59438c273bae2f3262"]. The rollover works, but because the selector is referencing a section (I'm assuming), the effect is applied to all of the blog posts at once instead of the individual blog post thumbnail. It also includes the text, and I don't want the text affected. Is there a way to do this so that the effect only occurs when rolling over a single blog post at a time? I hope this makes sense! Thank you!
  2. Site URL: http://www.erinsalmonwrites.com I have seen this question asked twice with no response, which is such a bummer! I have been working hard to design my website the way that I want it using the Rally template. There's only one thing at this point that I wish I could change, and it is holding me back from making my design live. I would love for the thumbnail image in my blog posts to be ABOVE the title and meta data. There's no way to adjust this in the site stiles, which is why I've come here to see if anyone has a bit of CSS that would make this change. TIA for your help. 🙂
  3. Hi there – wondering if there is anyway to have the thumbnail that is uploaded to a blog post to display inside the blog in addiction to the grid page. Specifically looking to get it left aligned and take up 50% of the screen. site: https://tarantula-calliope-fl4m.squarespace.com/blogs/knowledge-base pass: squarespace current code – clearly not looking to have the same image on every blog so I'm looking for someone to replace the url with a thumbnail target... /* Blog Interior */ .blog-item-wrapper article.entry { padding-top: 0; padding-bottom: 0; background-image: url("https://static1.squarespace.com/static/5eb179d00c6aef0b9ed1bfaf/5eb29c388099026de92ca571/5ec9945e02f4af1d185a2ed1/1590287286817/usual_wines_temperature_1024x1024.jpeg"); background-repeat: no-repeat; background-size: 50%; }
  4. Site URL: https://www.travelsandtreasures.com/home Hi there! I really like the Diary concept on the Brine template and prefer to not have a photo (so I purposely do not include it as a Thumbnail Image of the post). However, if I include one or more images in the body of the post, one of them is selected as the Thumbnail image. Perhaps this is as designed, but I prefer no image. Is there a way to prevent this from happening? (cross-posted)
  5. Site URL: https://www.travelsandtreasures.com/home Hi there! I really like the Diary concept on the Brine template and prefer to not have a photo (so I purposely do not include it as a Thumbnail Image of the post). However, if I include one or more images in the body of the post, one of them is selected as the Thumbnail image. Perhaps this is as designed, but I prefer no image. Is there a way to prevent this from happening?
  6. Hi, can any one help with some code to remove the thumbnails links from the bottom of every page in the flat iron template (Other than the index page) The old forums seems to have the answer to this but SP have deleted them! Thx!
  7. Site URL: https://www.marcodiallo.com/ Hallo guys. this i my first web site design. and i dont know what im doing tbh. I have created a portfolio, and then added som projects. i have then added some images for my projects. now i would like to have som text appearing when hovering the mouse over the image. is this possible ? thank you all in advance. - marco
  8. If I add an excerpt to an article it gets rid of the main image for it. Therefore, I have to resort to using a thumbnail image which is small and circular. Is there a way to have the thumbnail display as a normal image?
  9. I have followed the instructions here: https://support.squarespace.com/hc/en-us/articles/206543297-Linking-a-blog-post-title-to-another-page to link one blog post title to another page. However, this feature DOES NOT link the blog post thumbnail to the new URL in the summary. How can I include the thumbnail in redirecting to the new link, whether through this method, URL mapping, or another way? The blog post URL I want to redirect is: https://www.earthspeak.love/collective-courses-resources/heart-fire-activation-ritual Thank you.
  10. 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?
  11. 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
  12. 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??
  13. 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.
  14. 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.
  15. 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
  16. 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
  17. 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!
  18. 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
  19. 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:
  20. 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?
  21. 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?
  22. Site URL: https://oddthing.co.nz/ Hi there, I'm looking for some help with the number of product thumbnails displayed per row on my store. I have created a product page which has three thumbnails per row. Currently the three thumbnails reduce to two thumbnails per row when viewed on mobile. When viewing on mobile, I would like this to change to one thumbnail per row & ideally two thumbnails per row for tablet. Is this achievable with custom css? Thanks for your help in advance! 🙂
  23. Hello, on the Flatiron template, how can i change the word 'view' when you hover over a thumbnail? I would like to change it to the sign "+" Thank you
  24. 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; } }
  25. 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!
×
×
  • Create New...